精美的動畫對于提升產品體驗有很大幫助，如促進用戶理解功能，緩解用戶情緒，調動用戶積極心理，為產品提供亮點等等。諸如此類的文章相信各位已經看過不少了，不少人已經開始越來越重視動效在產品中的應用了，還沒有看過的同學不用急，谷歌官方的動效指南講解得很詳細，建議只看這個就夠了，配合一些動畫理解起來更容易。

你已經有了大致的想法，那么怎么讓研發(fā)哥哥們實現呢？demo又改怎么做呢？可別說讓研發(fā)下一個app照著做。

一、工具的選取

目前的動效設計工具非常多，建議使用主流的工具，不僅教程多，后期更新也更方便。我用過主流的有以下幾種，各有不同，需要針對彼此的優(yōu)缺點使用。

1. flinto

這個比較適合做頁面跳轉，比如從點擊一個按鈕從一個頁面跳轉到另一個頁面，實際項目中很少用，比較適合一些小項目，上手比較容易。

2. principle

相當于一個輕量級的AE，調節(jié)動畫非常方面，同步sketch使用，頁面跳轉或者單頁面小元素動畫都可以實現，缺點在于復雜的動畫難以實現，上手比較容易，可以同步手機演示。

3. origami studio

上手稍微有點門檻，實現動畫的方式是節(jié)點動畫，facebook推出的，前身為quartz composer 可以將動畫導出為android和iOS的代碼，需要引入的facebook的包，后續(xù)推出的origami studio中就不能再導出代碼了，另外使用origami studio 做的彈性動畫還需要接入pop引擎。綜合來說，可以方便地實現一些更復雜的動畫，如粘性，彈性，緩動等，不太適合頁面跳轉。

4. AE

可以是動效設計中的大殺器，你想要的特效都可以做出來，配合一些插件可以做出相當驚艷的效果，缺點就是上手難度大，而且做出的動畫不利于交互。最近airbnb推出的lottie可以將AE做的動畫轉為代碼，有興趣的同學可以保持關注。

對于動效軟件的選擇，看個人的愛好了，新手比較推薦flinto和principle。

二、設計時的注意點

別以為demo做好了就結束了，接下來才是最麻煩的一步，如何讓研發(fā)哥哥們實現你的動效。你可別拿著demo就直接丟給研發(fā)哥哥了，運動時間，淡化的百分比，運動的形式，這些可別讓研發(fā)看著你的demo猜。

在寫動效需求文檔的時候，有這么幾個注意點：

1. 運動模式

雖然研發(fā)會更喜歡勻速直線運動（畢竟做起來簡單），但是讓人愉悅的動效應該是模擬現實的，會有對應的減速和加速運動，這一點參考谷歌的動效指南就好，使用系統(tǒng)自帶的參數就好，不要再去調整加速曲線了。

2. 運動時間

要注意研發(fā)的單位一般是毫秒，所以你就盡量別寫0.03秒這種了。

3. 動畫的實現類

這里就要說到代碼層了，不能理解的沒關系，看看就好。

iOS 的動畫可以被分為兩大類：

1. 系統(tǒng)提供的關鍵幀動畫實現方式：用戶指定關鍵信息，系統(tǒng)實現動畫過程，對用戶而言操作起來會簡單些。
2. 逐幀動畫實現方式：周期性的調用繪制方法，繪制每幀的動畫對象。系統(tǒng)操作方法簡單，但用戶操作的工作量就會大一些。著名的 facebook 的pop動畫框架，就是使用CADisplayLink這種逐幀繪制的方式實現的。

如果繪制過程過于復雜，不能在屏幕刷新一幀的時間內完成，可以考慮改為每隔一幀繪制，相當于是 30 FPS的刷新率。不然可能會使動畫不連貫，有卡頓感。

采用關鍵幀的方式來實現動畫，要講的內容相對逐幀的方式就多的多了。

動畫過程實際是一個時間的函數，橫坐標是時間的變化值，縱坐標是動畫屬性的變化量。那么我們就可以在一個直角坐標系中，通過作圖來畫出這個函數。比如勻速運動的圖形，就是一條通過原點的直線。

所以這個類的功能就是畫出一條曲線，來表示時間和屬性變化之間的關系。而畫圖的方法，是使用的是畫貝葉斯曲線的方法。

系統(tǒng)提供了幾個常用的函數，比如kCAMediaTimingFunctionLinear就是勻速運動；kCAMediaTimingFunctionEaseInEaseOut就是一般系統(tǒng)動畫的默認值，漸入漸出，即在動畫開始和結束的時候速度稍慢些。

三、具體范例

如圖，一個點擊分享按鈕后，各個分享圖標依次減速入場的動畫的需求如下

說明：
1.優(yōu)化直播間分享面板，增加特效
2.當用戶點擊分享按鈕時（*包括傳統(tǒng)直播間主播面板的分享按鈕和上方分享按鈕，手機直播間的分享按鈕*），從下方彈出分享面板，逐個彈出分享icon，并淡入顯示分享獎勵。
3.用戶關閉分享面板時，分享icon從右到左依次下落淡化消失

相關參數：
1.分享面板減速彈出，運動時間225ms

2.分享icon從左到右依次彈出，運動時間225ms。帶有獎勵圖標的，當對應分享icon彈出后，分享圖標淡入顯示（時間225ms），第二個圖標比第一個遲100ms開始運動
eg：如圖第一個為qq圖標，當用戶點擊分享按鈕，分享面板彈出后，qq圖標開始彈出（時間225ms），100ms后第二個圖標（qq空間）彈出，當qq圖標完全彈出時，淡入顯示分享獎勵圖標，時間225ms。

3.分享icon從右往左依次收回，分享面板收回，所有運動的時間減少30毫秒，如分享面板收回時間195ms，分享icon收回時間195ms。
andorid端動畫曲線采用系統(tǒng)自帶：AccelerateDecelerateInterpolator（在動畫開始與結束的地方速率改變比較慢，在中間的時候加速）
iOS端動畫采用系統(tǒng)自帶：kCAMediaTimingFunctionEaseInEaseOut （在動畫開始和結束的時候速度稍慢些）

具體效果可參考附件視頻

四、Android和iOS可能的區(qū)別

1.在研發(fā)哥哥寫完代碼后，檢查的時候你會發(fā)現andorid似乎比iOS卡了那么一點點，這也是受很多一些因素影響，如果追求體驗，可以嘗試加快20ms。

2.一些動效，本身就是系統(tǒng)自帶的，如果不清楚，建議多閱讀官方文檔，或者設計前多請教研發(fā)吧。

也是學習動效沒多久，如果文章中哪里寫的不對，歡迎各位指出，共同討論。

本文由 @Placeless 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。