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