本文的主要目的是希望能給新手一些啟發，在遇到轉場動效相關工作時能夠快速捋清頭緒，希望能夠寫出可以直接讓人拿來用的水平。但作為設計師而言思考過程和結果同樣重要，所以在此我也會寫一些工作時的思考過程，拋磚引玉。

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

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

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

圖1.思路圖

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

下面是正文。

一、動效的標注內容

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

表1.常用動效標注內容

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

1）時長（duration）

手機端轉場動效的持續時間通常為300ms，根據屏幕的大小，動效的時長也會產生變化，根據material design的定義，不同設備對應的動效時長如表2所示。

表2.動效時長表

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

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

2）曲線（curve）

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

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

標準曲線，又被稱為“緩入緩出曲線”（ease in out），是最常見的緩動曲線。當時把所用轉場動效都用這個曲線試了一遍，夸張一些講，這個曲線可以滿足大部分用戶在轉場動效流暢性方面的需求，當然本著嚴謹認真的學術精神當然不能這么做啦。標準曲線運動效果如圖2所示。

圖2.標準曲線示意圖

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

圖3.減速曲線示意圖

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

圖4.加速曲線示意圖

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

圖5.急速曲線示意圖

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

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

圖6.輸出文檔示例

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

二、效果演示

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

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

最后說一下的感想：

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

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

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

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

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

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

作者：陳木魚，交互設計師。

本文由 @陳木魚 原創發布于人人都是產品經理。未經許可，禁止轉載。