動畫UI 元素運動規律的描述
原則上，標準(zhun)的 UI 動(dong)畫時長是(shi)在大約 200ms 到 500ms 之間。小(xiao)于 100ms 的動(dong)畫是(shi)瞬時的，不會被用戶(hu)注意到，但是(shi)如果大于 1000ms（1s），則會讓(rang)人感覺(jue)遲鈍(dun)，給人一(yi)種拖(tuo)泥帶水的感覺(jue)。
03
屬性和值
屬性是對 UI 元素運動規律的描述。為了使兩個關鍵幀之間能夠產生重慶動畫制作，我們(men)必須為它們(men)設置(zhi)不(bu)同的值。
在上面的(de)例子中，我設置的(de)動畫屬(shu)性是(shi)(shi)元素所在位置的(de) X 坐標，關鍵幀(zhen) 1 的(de)值是(shi)(shi) 0，關鍵幀(zhen) 2 的(de)值是(shi)(shi) 500 。如(ru)果(guo)兩(liang)個關鍵幀(zhen)的(de)值完全相同，是(shi)(shi)不可能生成動畫的(de)。
我在(zai)下面列出(chu)了(le)一(yi)些可以設置動(dong)畫的常見屬(shu)性。
當然(ran)，在現代的 UI 設(she)計軟件(jian)里，你(ni)可以修改任何可編輯的屬性(xing)，使元(yuan)素動起來。
顏色、透明度
尺寸
X 坐標(biao)、Y 坐標(biao)
旋轉角度
寬度、高度
現在我們知道了(le)什么(me)(me)是關鍵幀、屬(shu)性以及什么(me)(me)是值(zhi)，那么(me)(me)就(jiu)可以來定義插值(zhi)了(le)。
插值(zhi)是指兩個關鍵幀之間，某一屬性值(zhi)的動態變化(hua)。
這么說有些拗口，讓我們用例子來分解它。要使藍色正方形從左向右移動，我們需要在 100ms 的時間內，重慶動畫公司將正方形(xing)的 X 坐標(biao)屬(shu)性(xing)值從 0（關(guan)鍵幀1，0ms）增加到 500（關(guan)鍵幀2，100ms）。
當定(ding)義兩個關鍵幀之間(jian)的動畫時(shi)，我們只需指(zhi)定(ding)要更改的屬性值(zhi)。
在(zai)這個例子中，由于位置屬(shu)性(xing)的(de)(de) X 坐標值(zhi)是唯一改變(bian)的(de)(de)值(zhi)，因此不需要(yao)為(wei)正方形的(de)(de)其他屬(shu)性(xing)指定值(zhi)，因為(wei)這兩個關(guan)鍵幀的(de)(de)其它屬(shu)性(xing)是相同的(de)(de)。
04緩動
當元素動起(qi)來之后(hou)，你會發現它看起(qi)來很死板，并不生動。這是因為(wei)我們(men)沒有加入緩(huan)動函數。緩(huan)動函數可以為(wei)關鍵幀之間變化的屬性值設置加速(su)度或(huo)減速(su)度。
Source
換(huan)句話(hua)說，它允許我(wo)們在動畫的持(chi)續時(shi)間內改變元(yuan)素的運(yun)動速度。注意，你可以(yi)為(wei)關(guan)鍵幀之間的每一種屬性(xing)變化(hua)賦予不同的緩(huan)動函數。
如果沒(mei)有緩(huan)動(dong)函數，動(dong)畫就會(hui)勻速（加速度為(wei) 0）運動(dong)，這不(bu)符合現實生活中的物(wu)體運動(dong)規律。
現實中的(de)物(wu)體往(wang)往(wang)會受到重力、慣性(xing)和阻(zu)力的(de)影響。為了使動畫更加(jia)真實，我們需要模擬出這些(xie)因素是(shi)如何影響緩動函數的(de)。
緩動函數(shu)可以表(biao)示(shi)為 “三次(ci)貝(bei)塞爾(er)(er)函數(shu)”，它(ta)使用(yong)兩組坐標來表(biao)示(shi)初始和(he)結(jie)束狀態(tai)，即（x1、y1、x2、y2）。三次(ci)貝(bei)塞爾(er)(er)曲(qu)線的(de)默認線性運動函數(shu)是（0.0，0.0，1.0，1.0）。
幸運的是，我們不需要從頭開始創建這些緩動函數，因為如今所有的重慶3D動畫公司的軟(ruan)件都包含(han)以下緩動函數預設(she)。
1. 線性勻速
不受(shou)物理(li)力（重量、慣(guan)性和阻力）影響的對象(xiang)可以設置沒有加(jia)速度的線性動畫。
勻速曲(qu)線(xian)使用(yong)較(jiao)少，但在更(geng)改對象(xiang)狀態（如顏色、透明度）時非(fei)常有(you)效，因為(wei)這些屬性的變化不需(xu)要(yao)改變對象(xiang)的位置(zhi)或比例(li)。
2. 淡入或加速曲線
淡入函(han)數(shu)會從初始(shi)關(guan)鍵幀(zhen)開始(shi)影(ying)響(xiang)屬(shu)性值(zhi)。當(dang)物體全速(su)出現(xian)時可以使用該(gai)函(han)數(shu)，例如(ru) toast 提示。想象一輛(liang)汽車駛(shi)出時，它的(de)速(su)度從 0 開始(shi)逐(zhu)漸增(zeng)加，然后(hou)在(zai)駛(shi)出幀(zhen)達(da)到峰(feng)值(zhi)。
加速曲(qu)線 圖片(pian)來自Taras
3. 淡出或減速(su)曲線
淡出函數會(hui)在到(dao)達(da)結束(shu)關鍵幀時(shi)影響屬(shu)性(xing)值。當物體全速進入(ru)時(shi)，應使用該函數。例如，單(dan)(dan)擊漢堡(bao)包導航圖標并(bing)使菜單(dan)(dan)進入(ru)幀時(shi)。想象一個雪(xue)橇從山(shan)頂滑到(dao)山(shan)底，它(ta)的起(qi)始速度為峰值，并(bing)在進入(ru)幀時(shi)減到(dao)零(ling)。
減速曲線 圖片來自Taras
4. 淡入淡出或標(biao)準曲線
淡入淡出函數會在初始關鍵幀到結束關鍵幀之間影響屬性值。當對象從幀的一個部分移動到另一個部分，但在整個過程中始終保持在幀中時，重慶影視制作公司應(ying)使用此功能，例(li)如，點擊卡片后擴展填充(chong)整個(ge)屏幕。想象一(yi)個(ge)鐘(zhong)擺，它的速(su)度(du)從峰值開始(shi)，緩慢減速(su)到 0 ，然后再次加速(su)。
當你拿捏不準(zhun)(zhun)的時候(hou)，大可(ke)以放心使(shi)用這個(ge)函(han)數，這就(jiu)是為(wei)什么它會被(bei)稱為(wei)標準(zhun)(zhun)曲線。
也有(you)更復雜(za)的(de)(de)緩動函數，像是(shi) “漸隱為黑色、彈性、反(fan)彈” 等，這些用的(de)(de)都(dou)比較(jiao)少。你可以(yi)在 easings.net 上找到一些其他常用的(de)(de)函數。那么(me)更復雜(za)的(de)(de)動效(xiao)是(shi)什么(me)樣子的(de)(de)呢？不同于在兩個(ge)關鍵幀之(zhi)間設置(zhi)單(dan)個(ge)特(te)性的(de)(de)動效(xiao)，你也可以(yi)使(shi)用跨多(duo)個(ge)關鍵幀的(de)(de)不同的(de)(de)緩動曲線來設置(zhi)具有(you)多(duo)個(ge)特(te)性的(de)(de)動效(xiao) 。
Uplabs 上(shang)使(shi)用(yong)了我們剛才所學的函數(shu)原則的復雜動(dong)效(xiao)示例
需(xu)要強(qiang)調的(de)(de)是，每個插(cha)值(zhi)(zhi)都可(ke)以在動效過(guo)程中的(de)(de)不同點(dian)(dian)開始(shi)和(he)結束 。舉個例(li)子(zi)，如果(guo)你需(xu)要為你的(de)(de) UI 元素的(de)(de) X 坐標設置超(chao)過(guo) 800ms 的(de)(de)插(cha)值(zhi)(zhi)，同時還要為它的(de)(de)尺(chi)寸設置插(cha)值(zhi)(zhi)，那(nei)么(me)起始(shi)點(dian)(dian)和(he)結束點(dian)(dian)可(ke)以設置在這 800ms 期(qi)間的(de)(de)任意位置。
這意味著兩個關鍵幀之間動畫的持續時間由元素屬性的最長插值決定 。因此，如果要為多個屬性設置動效，則可以在動效期間的任何點開始和結束該屬性，重慶動畫公司以創建各(ge)種效果(guo)，例如交錯。這就是(shi)所謂的編排(pai)（choreography），是(shi)一個有點高級的主題(ti)，我們繼續說。
不過，我建議初(chu)學者盡量保持簡單。你往往很少(shao)需(xu)要為關鍵幀之間(jian)的(de)每個屬性都設置動畫。當你對所(suo)有(you)東(dong)西進(jin)行插值時(shi)，用(yong)戶(hu)的(de)眼睛也會被動效搞得(de)暈頭轉(zhuan)向。
上一篇：在短時間內制作「流暢感」動畫