（本文為個(gè)人筆記，我都用 Hype3 直接產(chǎn)出 Prototype 和 JS，避開(kāi)和一堆數(shù)值的大混戰(zhàn)，但該知道「為什么要這樣做」的部份還是要懂。）

 

如果設(shè)計(jì)師要產(chǎn)出動(dòng)態(tài)特效給 RD ，他們需要幾種信息。感謝邱政憲、Cateyes Lin 、謝孟哲的分享，綜合三位說(shuō)法整理出下列 6 點(diǎn)：

 

起始狀態(tài)、結(jié)束狀態(tài)

變化屬性（寬度、高度、XY 坐標(biāo)、XYZ 軸旋轉(zhuǎn)角度、透明度、顏色…）

時(shí)間腳本（多少 ms 到多少 ms 做哪個(gè)屬性變化）

漸變函式（Ex. ease-in）

操作行為（停止并改為根據(jù)使用者操作、忽略、其他）

參考范例

1. 起始狀態(tài)、結(jié)束狀態(tài)

 

動(dòng)態(tài)效果開(kāi)始和結(jié)束時(shí)的狀態(tài)。也就是動(dòng)畫(huà)開(kāi)始前、跑完動(dòng)畫(huà)后，畫(huà)面會(huì)長(zhǎng)什么樣子。

 

2. 變化屬性

 

有寫(xiě)過(guò)標(biāo)示文件的設(shè)計(jì)師都知道，一個(gè)組件需標(biāo)出它的尺寸、距離、色碼、透明度等，如果是文字還要加上字體字級(jí)行高之類(lèi)。在動(dòng)畫(huà)的領(lǐng)域除了 X 軸和 Y 軸外，在 3D 空間里要再加上 Z 軸。

 

所有需要制作動(dòng)態(tài)效果的組件通通要標(biāo)出這些數(shù)值，注意是數(shù)值，不是一個(gè)「感覺(jué)」，RD 寫(xiě)程序不能靠感覺(jué)。

 

百度搜索用戶(hù)體驗(yàn)中心的 H5 實(shí)現(xiàn)酷炫水滴效果 文中對(duì)于「水滴」有非常可怕 + 兇惡的數(shù)值示范（抖）。

 

天馬行空般的設(shè)計(jì)甩到面前，含著淚也要做出來(lái)——百度前端工程師的內(nèi)心獨(dú)白

 

設(shè)計(jì)師很爽地把想象中的動(dòng)態(tài)效果扔給 RD ，RD 要經(jīng)過(guò)這么復(fù)雜的計(jì)算才有辦法實(shí)現(xiàn)。如果有專(zhuān)門(mén)處理動(dòng)畫(huà)的職務(wù)就算了，這是他的工作，但往往沒(méi)有這么美夢(mèng)，RD 光是解 Bug 都沒(méi)時(shí)間了，哪有這么多心力處理錦上添花的部份呢？）

 

3. 時(shí)間腳本

 

在什么時(shí)間點(diǎn)、某個(gè)組件的屬性變化。同樣是關(guān)鍵影格的概念，配合「變化屬性」，從 A 時(shí)間點(diǎn)到 B 時(shí)間點(diǎn)之間，某組件的數(shù)值有什么變化。

 

若各組件變化時(shí)間不同，就會(huì)有很多不同的「時(shí)間經(jīng)過(guò)」搭配「屬性變化」要處理。

 

4. 漸變函式

 

可以用「動(dòng)作的加減速」來(lái)理解。根據(jù)迪斯尼 12 項(xiàng)動(dòng)畫(huà)原則，第 6 條是漸快與漸慢（Slow in and slow out），Material Design 有一整個(gè)章節(jié)在說(shuō)明曲線的必要性，并附上許多動(dòng)畫(huà)范例說(shuō)明。當(dāng)然這對(duì)設(shè)計(jì)師來(lái)講很有難度。

 

Easing 函數(shù)速查表 可以參考這個(gè)網(wǎng)址，和 RD 共同討論組件動(dòng)作的路徑。

 

5. 操作行為

 

「觸發(fā)條件」，使用者的操作是否會(huì)影響動(dòng)畫(huà)？游戲類(lèi)特別會(huì)注意到這個(gè)部分。

 

6. 參考范例

 

展示動(dòng)畫(huà)、模擬影片、Prototype 之類(lèi)，對(duì)設(shè)計(jì)師來(lái)說(shuō)不算太大的困難，難的絕對(duì)是上方提的這 5 項(xiàng)數(shù)值怎么標(biāo)。這些屬性狀態(tài)數(shù)值沒(méi)寫(xiě)清楚就要靠 RD 通靈了。

 

RD 現(xiàn)身說(shuō)法

 

感謝 謝孟哲 在 FB 公開(kāi)分享他的實(shí)作經(jīng)驗(yàn)，已征得同意轉(zhuǎn)錄。看完這篇文后，就會(huì)知道為什么 RD 會(huì)練滿(mǎn)通靈 Lv.99了。

 

全文如下：

 

其實(shí)動(dòng)畫(huà)會(huì)有分兩種：

 

一般的2D動(dòng)畫(huà)（平移、旋轉(zhuǎn)、透明?）

特殊或3D動(dòng)畫(huà)（翻頁(yè)、mac的丟到垃圾桶?）

后者大概都只能用口頭或是影片溝通，而且開(kāi)發(fā)成本很高。我遇過(guò)的情況是：有一個(gè)專(zhuān)業(yè)的設(shè)計(jì) team，一個(gè)專(zhuān)業(yè)的特效函式庫(kù) team，再加上完成一切作業(yè)的軟件研發(fā) team。

 

前者就比較有一定的規(guī)則可循，因?yàn)?nbsp;engineer在開(kāi)發(fā)時(shí)，系統(tǒng)已經(jīng)提供了相關(guān)的操作方式，只要給些相關(guān)的參數(shù)即可：

 

動(dòng)畫(huà)對(duì)象的參數(shù)變化（如坐標(biāo)、透明度、旋轉(zhuǎn)角度）

動(dòng)畫(huà)持續(xù)的時(shí)間

動(dòng)畫(huà)加減速的曲線，f(x)=y 表示在時(shí)間點(diǎn) x 的時(shí)候?qū)ο髤?shù)為 y。

這就是上面其他人所提到的。

 

前兩點(diǎn)是很簡(jiǎn)單能量化的，但是光是動(dòng)畫(huà)持續(xù)時(shí)間就能看出這個(gè) team 在 ux 上的 sense：使用者覺(jué)得幾秒的動(dòng)畫(huà)能被接受？動(dòng)畫(huà)播放時(shí)是否能被中斷或者改變狀態(tài)（左滑到一半可以停止，或變成右滑）？或者，這個(gè)動(dòng)畫(huà)是否是需要的？

 

我遇過(guò)新手 designer 或是 engineer 最常做的事情就是把動(dòng)畫(huà)時(shí)間定義為 0.6 到 1sec，如果沒(méi)有特別的設(shè)計(jì)我通常會(huì)說(shuō)「太長(zhǎng)」而要求改為 0.3 到 0.5sec…這邊扯比較遠(yuǎn)，點(diǎn)到為止就好了。

 

第三點(diǎn)那個(gè)方程式就好玩了。這個(gè)部分 designer 根本不知道該怎么描述，即使是 engineer，在這個(gè)素質(zhì)落差那么大的年代，也不是人人都能寫(xiě)出那個(gè) f(x)=y 的方程式。不過(guò)現(xiàn)在還是有些好用的工具可以用，如這種網(wǎng)頁(yè)：

 

http://matthewlein.com/ceaser/

 

你可以拉動(dòng)方塊改變那個(gè)曲線，然后按那些按鈕看到實(shí)時(shí)的效果。

 

當(dāng)然，如同上面其他人所言，這個(gè)方程式是有現(xiàn)成的可以套用，比如說(shuō)漸減（ web engineer 喜歡說(shuō) ease-out，android 上會(huì)說(shuō) DecelerateInterpolator，由于各平臺(tái)用詞不同，除非是只跟特定某個(gè)平臺(tái)的 engineer 溝通，否則溝通上我覺(jué)得還是用通俗的語(yǔ)言「漸減」來(lái)描述比較好。至少 PM 看得懂）。一般而言能有這樣的描述就不錯(cuò)了，不過(guò)若要求更高的質(zhì)量，就會(huì)需要更精確的描述。漸減這種詞就跟黃色一樣，是種很不精確的概念，黃色再精確一點(diǎn) 可能會(huì)說(shuō)鵝黃或香蕉黃，但是要十分精確一定是用色碼來(lái)描述，否則你的香蕉黃跟我的香蕉黃可能會(huì)不同。漸減也是一樣，ease-out 跟 DecelerateInterpolator 是否相同呢？有興趣的可以研究一下，最精確的描述則一定是數(shù)學(xué)方程式。

 

在開(kāi)發(fā)某個(gè)要求很高的手機(jī) app 項(xiàng)目時(shí)，我是直接仿造上面網(wǎng)頁(yè)的概念，在手機(jī)上面做了一個(gè)長(zhǎng)得很像的 app 來(lái)跟 designer 溝通。他們手指拉一拉，方程式會(huì)用到的參數(shù)就出來(lái)了，也能直接在手機(jī)上看到效果。