動(dòng)效設(shè)計(jì)是開發(fā)實(shí)現(xiàn)前的最重要的一步，但是重中之重還是設(shè)計(jì)的表達(dá)。怎樣把設(shè)計(jì)師的想法準(zhǔn)確的表達(dá)出來、并且工程師能準(zhǔn)確理解，最終快速實(shí)現(xiàn)效果，就是我們想要的結(jié)果。

做出好的動(dòng)效需要設(shè)計(jì)師有好的想法，和工程師有一流的實(shí)現(xiàn)技術(shù)。其中最關(guān)鍵的是設(shè)計(jì)師如何準(zhǔn)確的表達(dá)出設(shè)計(jì)想法和動(dòng)效參數(shù)。

1、基本參數(shù)

動(dòng)畫的基本屬性：

1. 描述動(dòng)畫效果及動(dòng)畫參數(shù)（時(shí)間，位移，縮放，透明度，旋轉(zhuǎn)）
2. 描述出不同情況下的動(dòng)畫效果

時(shí)間參數(shù)表

（位移、縮放、透明度、旋轉(zhuǎn)等同理）

圖例展示了三種動(dòng)畫的不同的動(dòng)畫時(shí)長，和動(dòng)畫出現(xiàn)的時(shí)間點(diǎn)，同理（位移，縮放，透明度，旋轉(zhuǎn)等同理）可同時(shí)出現(xiàn)。

2. 曲線

時(shí)間和位移的關(guān)系

曲線包括曲線形狀和坐標(biāo)參數(shù)。

曲線是實(shí)現(xiàn)動(dòng)效過程中的靈魂，不同的曲線能體現(xiàn)不同的物理。

運(yùn)動(dòng)節(jié)奏，也是提升用戶體驗(yàn)的關(guān)鍵。

（ 圖例是不同類型的緩動(dòng)函數(shù)的曲線）

如何精確的還原曲線

在開發(fā)實(shí)現(xiàn)中可以把貝塞爾曲線看做是位移曲線（位置和時(shí)間的關(guān)系）

上面這條曲線就是一條勻速的曲線，是指物體運(yùn)動(dòng)從開始到停止都是按照同一個(gè)速度移動(dòng)。

大家都知道在移動(dòng)端的各大ROM廠商或APP公司都在聲稱要做符合物理運(yùn)動(dòng)原理、符合用戶心理預(yù)期、還原生活場景、有情懷的、更加真實(shí)有效的動(dòng)畫效果等等說法，把這些含蓄的說法轉(zhuǎn)化成開發(fā)語言就是繪制一條看著舒服的運(yùn)動(dòng)曲線。那么什么樣的曲線才是符合物理運(yùn)動(dòng)規(guī)律、真實(shí)有效的呢？

大家試想著從手里扔出去一塊石頭，扔出的一瞬間是不是有個(gè)加速的過程，即速度從0往上增長，然后越來越快，它要落下的時(shí)候速度開始減下來，最后落下速度為0。石頭運(yùn)動(dòng)的軌跡其實(shí)是一個(gè)完整的拋物線（即速度曲線）：

這條曲線是我們根據(jù)真實(shí)的生活場景推理出來的，具體參數(shù)是模糊的，但是我們從中學(xué)到了真實(shí)的物理運(yùn)動(dòng)規(guī)律：物體運(yùn)動(dòng)是從靜止加速到停止減速的一個(gè)過程。

平常工作中我們是通過在動(dòng)畫制作軟件（如AE、Flash）中調(diào)節(jié)這條曲線最終得到我們看到的動(dòng)畫效果：

怎么樣把這條位移曲線轉(zhuǎn)換成開發(fā)語言呢？獲得有效參數(shù)的方法是這樣的（以PS為例）：

在PS里新建一個(gè)1000*1000像素的畫板（為了好計(jì)算取整，只要是正方形就行），把動(dòng)畫軟件里的曲線截圖導(dǎo)入到建好的PS畫板里，曲線的起點(diǎn)和終點(diǎn)分別與畫板的左下角和右上角對齊，這樣就在一個(gè)正方形內(nèi)形成了一條位移曲線：

然后在繪圖軟件里臨摹出這條曲線，調(diào)節(jié)節(jié)點(diǎn)時(shí)的支點(diǎn)坐標(biāo)就是開發(fā)需要的參數(shù)（以畫板左下角為原點(diǎn)（0,0），右上角為終點(diǎn)（1,1）。如上圖中黃色的點(diǎn)的坐標(biāo)就是起點(diǎn)（0.26,0.05），終點(diǎn)（0.26,0.97）

這條曲線是一條最簡單的貝塞爾曲線，在繪圖軟件里通過調(diào)節(jié)起點(diǎn)和終點(diǎn)的節(jié)點(diǎn)就可以得到這條曲線，更復(fù)雜的貝塞爾曲線是由多個(gè)節(jié)點(diǎn)組成，那是更復(fù)雜的函數(shù)公式。

3. DEMO

直觀的展示動(dòng)畫效果

1. 制作軟件不限
2. 輸出格式必須在電腦或者手機(jī)上播放，如 MOV，MP4，SWF等

綜合以上三點(diǎn)步驟，能讓設(shè)計(jì)師在和開發(fā)人員對接的時(shí)候更清晰的表達(dá)出設(shè)計(jì)的理念和參數(shù)，更精確更流暢的的實(shí)現(xiàn)動(dòng)效。

作者：Jason-ren

來源：ME網(wǎng)易移動(dòng)設(shè)計(jì)