編者按：動(dòng)效未來(lái)有多火同學(xué)們都感受到了，之前發(fā)的AE教程都是實(shí)戰(zhàn)型，軟件得會(huì)，思路更不能少。如何做出有意思有趣的動(dòng)畫(huà)設(shè)計(jì)？今天@正越升?以圖標(biāo)動(dòng)效為例，把高手常用的6種動(dòng)效設(shè)計(jì)思路都總結(jié)出來(lái)，非常值得收藏的干貨。

想學(xué)AE的同學(xué)來(lái)看動(dòng)效大神雞爺?shù)慕坛蹋?a target="_blank" href="http://www.hx168888.com/tczhang-ae-radish-course" target="_blank">《大牛開(kāi)課啦！郁悶的雞動(dòng)效教程之從零開(kāi)始繪制蘿卜》

現(xiàn)在越來(lái)越多手機(jī)應(yīng)用和web應(yīng)用都開(kāi)始注重動(dòng)效的設(shè)計(jì)，恰到好處的動(dòng)效可以給用戶帶來(lái)愉悅的交互體驗(yàn)，是應(yīng)用顏值擔(dān)當(dāng)?shù)囊淮笾匾糠帧?/p>

icon，也就是圖標(biāo)。在交互過(guò)程中，應(yīng)用各種icon都會(huì)跟隨不同的事件發(fā)生不同的轉(zhuǎn)換。舉兩個(gè)例子，一個(gè)音樂(lè)播放器的播放模式改變和充電時(shí)電量圖標(biāo)的改變。

過(guò)去，icon的轉(zhuǎn)換都十分死板，而近年來(lái)開(kāi)始流行在切換icon的時(shí)候加入過(guò)渡動(dòng)畫(huà)，這種動(dòng)效給用戶體驗(yàn)帶來(lái)的正面效果十分明顯，給應(yīng)用添色不少。

然而面對(duì)icon動(dòng)效，我們應(yīng)該如何設(shè)計(jì)？今天分享幾個(gè)設(shè)計(jì)icon動(dòng)效的思路。在此說(shuō)明一下，配圖的動(dòng)效有些是臨摹有些是原創(chuàng)，只為了統(tǒng)一樣式方便閱讀。

一、屬性轉(zhuǎn)換法

這是最為普遍也最為簡(jiǎn)單的一種icon切換思路。

屬性包含了位置、大小、旋轉(zhuǎn)、透明度、顏色等，在這些屬性上面做動(dòng)效，若運(yùn)用恰當(dāng)，可以做出令人眼前一亮的動(dòng)效。

現(xiàn)在絕大多數(shù)icon動(dòng)效都離不開(kāi)屬性變化，運(yùn)動(dòng)恰當(dāng)，這個(gè)簡(jiǎn)單而強(qiáng)大的方法大有可為之處。

二、路徑重組法

這可能是看慣了屬性變換的動(dòng)效之后，又一個(gè)讓人眼前一亮的動(dòng)效思路。

將icon的路徑（筆畫(huà)）進(jìn)行重組，構(gòu)成一個(gè)新的icon，這期間考驗(yàn)著更多的東西，比如觀察兩個(gè)icon筆畫(huà)之間的關(guān)系，這個(gè)思路最近相當(dāng)流行，同時(shí)也具有挑戰(zhàn)性。

三、點(diǎn)線面降級(jí)法

這是一個(gè)相當(dāng)有用的思路。

面和面進(jìn)行轉(zhuǎn)換的時(shí)候，可以用線作為介質(zhì)，一個(gè)面先轉(zhuǎn)換成一根線，再通過(guò)這根線轉(zhuǎn)換成另一個(gè)面。同理，線和線轉(zhuǎn)換時(shí)，可以用點(diǎn)作為介質(zhì)，一根線先轉(zhuǎn)換成一個(gè)點(diǎn)，再通過(guò)這個(gè)點(diǎn)轉(zhuǎn)換成另一根線。

這么說(shuō)有點(diǎn)抽象，我們來(lái)看幾個(gè)例子。

四、遮罩法

兩個(gè)圖形之間相互轉(zhuǎn)換時(shí)，可以用其中一個(gè)圖形作為另一個(gè)圖形的遮罩，也就是邊界，當(dāng)這個(gè)圖形放大的時(shí)候，因?yàn)榱硪粋€(gè)圖形作為邊界的緣故，轉(zhuǎn)換成了另一個(gè)圖形的形狀。

思路很簡(jiǎn)單，卻又一點(diǎn)局限性，兩個(gè)圖形必須是包含關(guān)系。

在谷歌的Material design規(guī)范中也出現(xiàn)類(lèi)似的動(dòng)效。

五、分裂融合法

打個(gè)貼切的比方，就是把一把劍融成鐵水之后，鑄成一把新刀。

分裂融合法尤其適用于其中一個(gè)圖標(biāo)是一個(gè)整體，另一個(gè)圖標(biāo)由多個(gè)分離的部分組成的情況。由分裂融合法做出來(lái)的動(dòng)效也相當(dāng)有趣。

六、圖標(biāo)特性法

以上的思路只是停留在如何讓icon動(dòng)效有趣的層面上，那么如何讓icon動(dòng)效不僅有趣而且有意義呢？這就需要考慮不同icon之間的特性來(lái)設(shè)計(jì)動(dòng)效。

圖標(biāo)特性法，顧名思義就是利用圖標(biāo)表達(dá)的實(shí)際意義，做出與之吻合的動(dòng)效，需要很強(qiáng)的思維發(fā)散性。

要做好一個(gè)icon動(dòng)效，光有思路是不行的，還需要了解一些圖形運(yùn)動(dòng)方面的知識(shí)。如何做出令人愉悅的icon動(dòng)效，可以考慮的方面有緩動(dòng)、彈動(dòng)、拖尾、時(shí)差、隨機(jī)、層次感、運(yùn)動(dòng)修飾等等。

對(duì)了，歡迎同學(xué)們關(guān)注作者的微信公眾號(hào)：壞打印機(jī)。

【動(dòng)效神器Hype零基礎(chǔ)入門(mén)教程系列】

先聊一下這個(gè)軟件的強(qiáng)大功能，附上簡(jiǎn)單教程！
《Sketch神助攻！無(wú)代碼做動(dòng)效神器Hype3入門(mén)教程》

中國(guó)臺(tái)灣設(shè)計(jì)師叫你用Hype做原型過(guò)場(chǎng)！
《無(wú)代碼動(dòng)效神器！教你用HYPE3做APP原型的基礎(chǔ)過(guò)場(chǎng)（附神器）》

美丫姐手把手教你用Hype做Path菜單動(dòng)畫(huà)！
《比AE還方便！教你用HYPE無(wú)代碼制作PATH扇形菜單動(dòng)畫(huà)》

作者：@正越升

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量106萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com