動畫UI 元素運動規律的描述
原則上，標準的 UI 動畫時長是在大約 200ms 到 500ms 之間。小于 100ms 的動畫是瞬時的，不會被用戶注意到，但是如果大于 1000ms（1s），則會讓人感覺遲鈍，給人一種拖泥帶水的感覺。
03
屬性和值
屬性是對 UI 元素運動規律的描述。為了使兩個關鍵幀之間能夠產生重慶動畫制作，我們必須為它們設置不同的值。
在上面的例子中，我設置的動畫屬性是元素所在位置的 X 坐標，關鍵幀 1 的值是 0，關鍵幀 2 的值是 500 。如果兩個關鍵幀的值完全相同，是不可能生成動畫的。
我在下面列出了一些可以設置動畫的常見屬性。
當然，在現代的 UI 設計軟件里，你可以修改任何可編輯的屬性，使元素動起來。
顏色、透明度
尺寸
X 坐標、Y 坐標
旋轉角度
寬度、高度
現在我們知道了什么是關鍵幀、屬性以及什么是值，那么就可以來定義插值了。
插值是指兩個關鍵幀之間，某一屬性值的動態變化。
這么說有些拗口，讓我們用例子來分解它。要使藍色正方形從左向右移動，我們需要在 100ms 的時間內，重慶動畫公司將正方形的 X 坐標屬性值從 0（關鍵幀1，0ms）增加到 500（關鍵幀2，100ms）。
當定義兩個關鍵幀之間的動畫時，我們只需指定要更改的屬性值。
在這個例子中，由于位置屬性的 X 坐標值是唯一改變的值，因此不需要為正方形的其他屬性指定值，因為這兩個關鍵幀的其它屬性是相同的。
04緩動
當元素動起來之后，你會發現它看起來很死板，并不生動。這是因為我們沒有加入緩動函數。緩動函數可以為關鍵幀之間變化的屬性值設置加速度或減速度。
Source
換句話說，它允許我們在動畫的持續時間內改變元素的運動速度。注意，你可以為關鍵幀之間的每一種屬性變化賦予不同的緩動函數。
如果沒有緩動函數，動畫就會勻速（加速度為 0）運動，這不符合現實生活中的物體運動規律。
現實中的物體往往會受到重力、慣性和阻力的影響。為了使動畫更加真實，我們需要模擬出這些因素是如何影響緩動函數的。
緩動函數可以表示為 “三次貝塞爾函數”，它使用兩組坐標來表示初始和結束狀態，即（x1、y1、x2、y2）。三次貝塞爾曲線的默認線性運動函數是（0.0，0.0，1.0，1.0）。
幸運的是，我們不需要從頭開始創建這些緩動函數，因為如今所有的重慶3D動畫公司的軟件都包含以下緩動函數預設。
1. 線性勻速
不受物理力（重量、慣性和阻力）影響的對象可以設置沒有加速度的線性動畫。
勻速曲線使用較少，但在更改對象狀態（如顏色、透明度）時非常有效，因為這些屬性的變化不需要改變對象的位置或比例。
2. 淡入或加速曲線
淡入函數會從初始關鍵幀開始影響屬性值。當物體全速出現時可以使用該函數，例如 toast 提示。想象一輛汽車駛出時，它的速度從 0 開始逐漸增加，然后在駛出幀達到峰值。
加速曲線 圖片來自Taras
3. 淡出或減速曲線
淡出函數會在到達結束關鍵幀時影響屬性值。當物體全速進入時，應使用該函數。例如，單擊漢堡包導航圖標并使菜單進入幀時。想象一個雪橇從山頂滑到山底，它的起始速度為峰值，并在進入幀時減到零。
減速曲線 圖片來自Taras
4. 淡入淡出或標準曲線
淡入淡出函數會在初始關鍵幀到結束關鍵幀之間影響屬性值。當對象從幀的一個部分移動到另一個部分，但在整個過程中始終保持在幀中時，重慶影視制作公司應使用此功能，例如，點擊卡片后擴展填充整個屏幕。想象一個鐘擺，它的速度從峰值開始，緩慢減速到 0 ，然后再次加速。
當你拿捏不準的時候，大可以放心使用這個函數，這就是為什么它會被稱為標準曲線。
也有更復雜的緩動函數，像是 “漸隱為黑色、彈性、反彈” 等，這些用的都比較少。你可以在 easings.net 上找到一些其他常用的函數。那么更復雜的動效是什么樣子的呢？不同于在兩個關鍵幀之間設置單個特性的動效，你也可以使用跨多個關鍵幀的不同的緩動曲線來設置具有多個特性的動效 。
Uplabs 上使用了我們剛才所學的函數原則的復雜動效示例
需要強調的是，每個插值都可以在動效過程中的不同點開始和結束 。舉個例子，如果你需要為你的 UI 元素的 X 坐標設置超過 800ms 的插值，同時還要為它的尺寸設置插值，那么起始點和結束點可以設置在這 800ms 期間的任意位置。
這意味著兩個關鍵幀之間動畫的持續時間由元素屬性的最長插值決定 。因此，如果要為多個屬性設置動效，則可以在動效期間的任何點開始和結束該屬性，重慶動畫公司以創建各種效果，例如交錯。這就是所謂的編排（choreography），是一個有點高級的主題，我們繼續說。
不過，我建議初學者盡量保持簡單。你往往很少需要為關鍵幀之間的每個屬性都設置動畫。當你對所有東西進行插值時，用戶的眼睛也會被動效搞得暈頭轉向。
上一篇：在短時間內制作「流暢感」動畫