本文的主要目的是希望能給新手一些啟發(fā)，在遇到轉(zhuǎn)場動效相關(guān)工作時能夠快速捋清頭緒，希望能夠?qū)懗隹梢灾苯幼屓四脕碛玫乃健５鳛樵O(shè)計師而言思考過程和結(jié)果同樣重要，所以在此我也會寫一些工作時的思考過程，拋磚引玉。

前段時間接到優(yōu)化界面轉(zhuǎn)場動效的需求，這對老司機而言是小菜一碟，但是對我來說，算是一個從0到1的任務(wù)。

之前對轉(zhuǎn)場動效并沒有系統(tǒng)的了解，對接開發(fā)層面的文檔更是沒有接觸過，所以接到任務(wù)的第一反應(yīng)是尋找能夠參考的模板，也就是所謂的拿來主義。經(jīng)過一天的收集，發(fā)現(xiàn)大部分文章都只是對動效做分類和介紹，沒發(fā)現(xiàn)可以直接參照并能copy成文檔的樣例。投機取巧走不通，我開始思考如何“原創(chuàng)”一份動效文檔。

如上文所說，拿到需求后一頭霧水，簡單梳理了一下后續(xù)的工作思路。當(dāng)時用反推的方法縮小著手范圍。思路見圖1：

圖1.思路圖

當(dāng)時認(rèn)為整個輸出內(nèi)容應(yīng)當(dāng)包括文字描述和效果演示。按照上圖的思路，可以把工作劃分為較為清晰的兩條主線，雖然在實踐過程中會不斷推翻之前的想法，肯定不會按照之前的規(guī)劃走，但這種思考方法給了我很大幫助。

下面是正文。

一、動效的標(biāo)注內(nèi)容

此部分內(nèi)容是和程序員交流的最關(guān)鍵部分，標(biāo)注內(nèi)容是否清晰和全面，會直接影響開發(fā)的工作效率。項目中最占用時間的不是具體實施，而是在實施過程中的反復(fù)溝通和多次確認(rèn)。常見標(biāo)注內(nèi)容如表1所示，可以涵蓋轉(zhuǎn)場動效的大部分場景。

表1.常用動效標(biāo)注內(nèi)容

如上表所示，其中透明度、旋轉(zhuǎn)、縮放、移動等內(nèi)容不需要過多的描述，下面詳細(xì)說一下時長和曲線的問題。

1）時長（duration）

手機端轉(zhuǎn)場動效的持續(xù)時間通常為300ms，根據(jù)屏幕的大小，動效的時長也會產(chǎn)生變化，根據(jù)material design的定義，不同設(shè)備對應(yīng)的動效時長如表2所示。

表2.動效時長表

根據(jù)上面的表格，可以大概確定動畫的持續(xù)時間，像material design這樣精確的時長定義，個人認(rèn)為對項目而言，沒有必要糾結(jié)幾毫秒的差別。我們項目基于于平板設(shè)備，但是考慮到使用環(huán)境和任務(wù)流暢度，再經(jīng)設(shè)備上對比查看效果之后最終確定以300ms為基準(zhǔn)，沒有生搬硬套增加30%的時間。

針對嚴(yán)謹(jǐn)學(xué)術(shù)派的小伙伴，推薦閱讀一遍國外的文獻，題目為《Response time in man-computer conversational transactions》，暫時沒有找到翻譯版，有興趣的可以看看，不是專門針對動效的文章但堪稱響應(yīng)時間的鼻祖。

2）曲線（curve）

material design里有專門章節(jié)定義緩動曲線（easing curve），這些緩動曲線可以作用于元素的運動速率、透明度，大小變化等等。元素的加速和減速的變化在整個持續(xù)期間應(yīng)保證流暢平滑，避免機械化。值得注意的一點是，運動時加速和減速不對稱發(fā)生時，可以使運動更加自然和靈動。（以上是谷歌的官方說明，簡單翻譯了一下）

緩動曲線概括來說可以分為：為標(biāo)準(zhǔn)曲線（standard curve）、減速曲線（deceleration curve）、加速度曲線（acceleration curve）和急速曲線（sharp curve）。下面對各種曲線做一個簡單的介紹。

標(biāo)準(zhǔn)曲線，又被稱為“緩入緩出曲線”（ease in out），是最常見的緩動曲線。當(dāng)時把所用轉(zhuǎn)場動效都用這個曲線試了一遍，夸張一些講，這個曲線可以滿足大部分用戶在轉(zhuǎn)場動效流暢性方面的需求，當(dāng)然本著嚴(yán)謹(jǐn)認(rèn)真的學(xué)術(shù)精神當(dāng)然不能這么做啦。標(biāo)準(zhǔn)曲線運動效果如圖2所示。

圖2.標(biāo)準(zhǔn)曲線示意圖

減速曲線，又被稱為“緩出曲線”(ease out)，適用于元素進入屏幕的情況。這么說可能有點繞，大家看下圖可以有一個直觀的感受，所謂的“緩出”，描述的是元素運動結(jié)束時的狀態(tài)。在元素運動開始，即進入屏幕的時候，速度最快，然后慢慢減速。這樣一來元素可以很快的進入視野，給人以流暢的感覺，到后面速度變慢，增加了視覺停留的時間，讓人對元素能有更加清晰的印象。減速曲線運動效果如圖3所示。

圖3.減速曲線示意圖

加速曲線，又被稱為“緩入曲線”(ease in)?？梢詤⒄諟p速曲線理解，和減速曲線正好相反，適用于元素離開屏幕的情況，不做過多解釋，加速曲線運動效果如圖4所示。

圖4.加速曲線示意圖

急速曲線（sharp curve），sharp我在這里翻譯成了“急速”，意思是速度較快。從示意圖上來看，急速曲線可以理解為“帶有運動邊界且變化速率較快的標(biāo)準(zhǔn)曲線”。適用于元素可以隨時返回屏幕的情況，例如一些應(yīng)用的右滑菜單。加速曲線運動效果如圖5所示。

圖5.急速曲線示意圖

在對曲線有了一些了解后，就可以將動效需要標(biāo)注的內(nèi)容和對應(yīng)曲線進行組合了。我的做法是結(jié)合一些優(yōu)秀的app動效，通過不斷嘗試調(diào)整參數(shù)，找到最接近或者最看起來最舒服的效果。這么做中規(guī)中矩但難以出彩，不過綜合考慮開發(fā)成本和時間節(jié)點，差強人意吧。

下面圖6是我當(dāng)時輸出的部分文檔，舉個例子供大家參考。不算高大上但是很實用，給到開發(fā)之后也沒有發(fā)生問來問去的情況。后期校驗的時候發(fā)現(xiàn)有個動效和演示效果不太一樣，究其原因是沒有寫清楚曲線對應(yīng)的標(biāo)注內(nèi)容，導(dǎo)致有些標(biāo)注內(nèi)容采用的是線性曲線，改正過來之后就和演示效果一樣了。雖然曲線的演示動畫是物體的運動狀態(tài)，但并不只局限于運動軌跡，標(biāo)注的每個內(nèi)容比如大小、透明度等都應(yīng)該有對應(yīng)的曲線，這一點要特別注意。

圖6.輸出文檔示例

動效文檔部分到此算是告一段落。

二、效果演示

提到動效肯定首先想到的是AE，一開始也是用的AE嘗試，但是做到后面有一種殺雞用牛刀的感覺，路子不對趕緊轉(zhuǎn)向。最終選定的是principle。當(dāng)然還有其他的軟件也可以實現(xiàn)類似的效果，如flinto和keynote。轉(zhuǎn)場動效這種自由度較小的就這幾款軟件就差不多啦。

正文就是以上這些了。轉(zhuǎn)場動效從無從下手到最后落地，成就感還是蠻大的。

最后說一下的感想：

1. 思考問題的能力很重要，再一次體會到“磨刀不誤砍柴工”這句真理。
2. 站在巨人的肩膀上很重要，一定要避免重復(fù)造車輪，很多問題網(wǎng)上多找找都會有答案。
3. 溝通交流很重要。和開發(fā)兄弟多溝通受益匪淺。
4. 總結(jié)很重要。所以才有了這篇文章：）

下面附上一些鏈接供大家參考。我總結(jié)的不好的地方還請大家多多閱讀“原版”。

material design 官方文檔動效部分：https://material.io/guidelines/motion/duration-easing.html

熱心網(wǎng)友翻譯版：http://www.jianshu.com/p/10dcd7854e89?winzoom=1

知乎某達(dá)人專欄文章：https://zhuanlan.zhihu.com/p/26898642

principle官方文檔：http://principleformac.com/docs.html

作者：陳木魚，交互設(shè)計師。

本文由 @陳木魚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。