精美的動(dòng)畫(huà)對(duì)于提升產(chǎn)品體驗(yàn)有很大幫助，如促進(jìn)用戶(hù)理解功能，緩解用戶(hù)情緒，調(diào)動(dòng)用戶(hù)積極心理，為產(chǎn)品提供亮點(diǎn)等等。諸如此類(lèi)的文章相信各位已經(jīng)看過(guò)不少了，不少人已經(jīng)開(kāi)始越來(lái)越重視動(dòng)效在產(chǎn)品中的應(yīng)用了，還沒(méi)有看過(guò)的同學(xué)不用急，谷歌官方的動(dòng)效指南講解得很詳細(xì)，建議只看這個(gè)就夠了，配合一些動(dòng)畫(huà)理解起來(lái)更容易。

你已經(jīng)有了大致的想法，那么怎么讓研發(fā)哥哥們實(shí)現(xiàn)呢？demo又改怎么做呢？可別說(shuō)讓研發(fā)下一個(gè)app照著做。

一、工具的選取

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

1. flinto

這個(gè)比較適合做頁(yè)面跳轉(zhuǎn)，比如從點(diǎn)擊一個(gè)按鈕從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，實(shí)際項(xiàng)目中很少用，比較適合一些小項(xiàng)目，上手比較容易。

2. principle

相當(dāng)于一個(gè)輕量級(jí)的AE，調(diào)節(jié)動(dòng)畫(huà)非常方面，同步sketch使用，頁(yè)面跳轉(zhuǎn)或者單頁(yè)面小元素動(dòng)畫(huà)都可以實(shí)現(xiàn)，缺點(diǎn)在于復(fù)雜的動(dòng)畫(huà)難以實(shí)現(xiàn)，上手比較容易，可以同步手機(jī)演示。

3. origami studio

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

4. AE

可以是動(dòng)效設(shè)計(jì)中的大殺器，你想要的特效都可以做出來(lái)，配合一些插件可以做出相當(dāng)驚艷的效果，缺點(diǎn)就是上手難度大，而且做出的動(dòng)畫(huà)不利于交互。最近airbnb推出的lottie可以將AE做的動(dòng)畫(huà)轉(zhuǎn)為代碼，有興趣的同學(xué)可以保持關(guān)注。

對(duì)于動(dòng)效軟件的選擇，看個(gè)人的愛(ài)好了，新手比較推薦flinto和principle。

二、設(shè)計(jì)時(shí)的注意點(diǎn)

別以為demo做好了就結(jié)束了，接下來(lái)才是最麻煩的一步，如何讓研發(fā)哥哥們實(shí)現(xiàn)你的動(dòng)效。你可別拿著demo就直接丟給研發(fā)哥哥了，運(yùn)動(dòng)時(shí)間，淡化的百分比，運(yùn)動(dòng)的形式，這些可別讓研發(fā)看著你的demo猜。

在寫(xiě)動(dòng)效需求文檔的時(shí)候，有這么幾個(gè)注意點(diǎn)：

1. 運(yùn)動(dòng)模式

雖然研發(fā)會(huì)更喜歡勻速直線(xiàn)運(yùn)動(dòng)（畢竟做起來(lái)簡(jiǎn)單），但是讓人愉悅的動(dòng)效應(yīng)該是模擬現(xiàn)實(shí)的，會(huì)有對(duì)應(yīng)的減速和加速運(yùn)動(dòng)，這一點(diǎn)參考谷歌的動(dòng)效指南就好，使用系統(tǒng)自帶的參數(shù)就好，不要再去調(diào)整加速曲線(xiàn)了。

2. 運(yùn)動(dòng)時(shí)間

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

3. 動(dòng)畫(huà)的實(shí)現(xiàn)類(lèi)

這里就要說(shuō)到代碼層了，不能理解的沒(méi)關(guān)系，看看就好。

iOS 的動(dòng)畫(huà)可以被分為兩大類(lèi)：

1. 系統(tǒng)提供的關(guān)鍵幀動(dòng)畫(huà)實(shí)現(xiàn)方式：用戶(hù)指定關(guān)鍵信息，系統(tǒng)實(shí)現(xiàn)動(dòng)畫(huà)過(guò)程，對(duì)用戶(hù)而言操作起來(lái)會(huì)簡(jiǎn)單些。
2. 逐幀動(dòng)畫(huà)實(shí)現(xiàn)方式：周期性的調(diào)用繪制方法，繪制每幀的動(dòng)畫(huà)對(duì)象。系統(tǒng)操作方法簡(jiǎn)單，但用戶(hù)操作的工作量就會(huì)大一些。著名的 facebook 的pop動(dòng)畫(huà)框架，就是使用CADisplayLink這種逐幀繪制的方式實(shí)現(xiàn)的。

如果繪制過(guò)程過(guò)于復(fù)雜，不能在屏幕刷新一幀的時(shí)間內(nèi)完成，可以考慮改為每隔一幀繪制，相當(dāng)于是 30 FPS的刷新率。不然可能會(huì)使動(dòng)畫(huà)不連貫，有卡頓感。

采用關(guān)鍵幀的方式來(lái)實(shí)現(xiàn)動(dòng)畫(huà)，要講的內(nèi)容相對(duì)逐幀的方式就多的多了。

動(dòng)畫(huà)過(guò)程實(shí)際是一個(gè)時(shí)間的函數(shù)，橫坐標(biāo)是時(shí)間的變化值，縱坐標(biāo)是動(dòng)畫(huà)屬性的變化量。那么我們就可以在一個(gè)直角坐標(biāo)系中，通過(guò)作圖來(lái)畫(huà)出這個(gè)函數(shù)。比如勻速運(yùn)動(dòng)的圖形，就是一條通過(guò)原點(diǎn)的直線(xiàn)。

所以這個(gè)類(lèi)的功能就是畫(huà)出一條曲線(xiàn)，來(lái)表示時(shí)間和屬性變化之間的關(guān)系。而畫(huà)圖的方法，是使用的是畫(huà)貝葉斯曲線(xiàn)的方法。

系統(tǒng)提供了幾個(gè)常用的函數(shù)，比如kCAMediaTimingFunctionLinear就是勻速運(yùn)動(dòng)；kCAMediaTimingFunctionEaseInEaseOut就是一般系統(tǒng)動(dòng)畫(huà)的默認(rèn)值，漸入漸出，即在動(dòng)畫(huà)開(kāi)始和結(jié)束的時(shí)候速度稍慢些。

三、具體范例

如圖，一個(gè)點(diǎn)擊分享按鈕后，各個(gè)分享圖標(biāo)依次減速入場(chǎng)的動(dòng)畫(huà)的需求如下

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

相關(guān)參數(shù)：
1.分享面板減速?gòu)棾?，運(yùn)動(dòng)時(shí)間225ms

2.分享icon從左到右依次彈出，運(yùn)動(dòng)時(shí)間225ms。帶有獎(jiǎng)勵(lì)圖標(biāo)的，當(dāng)對(duì)應(yīng)分享icon彈出后，分享圖標(biāo)淡入顯示（時(shí)間225ms），第二個(gè)圖標(biāo)比第一個(gè)遲100ms開(kāi)始運(yùn)動(dòng)
eg：如圖第一個(gè)為qq圖標(biāo)，當(dāng)用戶(hù)點(diǎn)擊分享按鈕，分享面板彈出后，qq圖標(biāo)開(kāi)始彈出（時(shí)間225ms），100ms后第二個(gè)圖標(biāo)（qq空間）彈出，當(dāng)qq圖標(biāo)完全彈出時(shí)，淡入顯示分享獎(jiǎng)勵(lì)圖標(biāo)，時(shí)間225ms。

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

具體效果可參考附件視頻

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

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

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

也是學(xué)習(xí)動(dòng)效沒(méi)多久，如果文章中哪里寫(xiě)的不對(duì)，歡迎各位指出，共同討論。

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