高手常用的六種圖標(biāo)動效設(shè)計思路

編者按：動效未來有多火同學(xué)們都感受到了，之前發(fā)的AE教程都是實(shí)戰(zhàn)型，軟件得會，思路更不能少。如何做出有意思有趣的動畫設(shè)計？今天@正越升 以圖標(biāo)動效為例，把高手常用的6種動效設(shè)計思路都總結(jié)出來，非常值得收藏的干貨。 現(xiàn)在越來越多手機(jī)應(yīng)用和web應(yīng)用都開始注重動效的設(shè)計，恰到好處的動效可以給用戶帶來愉悅的交互體驗(yàn)，是應(yīng)用顏值擔(dān)當(dāng)?shù)囊淮笾匾糠帧?icon，也就是圖標(biāo)。在交互過程中，應(yīng)用各種icon都會跟隨不同的事件發(fā)生不同的轉(zhuǎn)換。舉兩個例子，一個音樂播放器的播放模式改變和充電時電量圖標(biāo)的改變。
過去，icon的轉(zhuǎn)換都十分死板，而近年來開始流行在切換icon的時候加入過渡動畫，這種動效給用戶體驗(yàn)帶來的正面效果十分明顯，給應(yīng)用添色不少。 然而面對icon動效，我們應(yīng)該如何設(shè)計？今天分享幾個設(shè)計icon動效的思路。在此說明一下，配圖的動效有些是臨摹有些是原創(chuàng)，只為了統(tǒng)一樣式方便閱讀。
一、屬性轉(zhuǎn)換法 這是最為普遍也最為簡單的一種icon切換思路。 屬性包含了位置、大小、旋轉(zhuǎn)、透明度、顏色等，在這些屬性上面做動效，若運(yùn)用恰當(dāng)，可以做出令人眼前一亮的動效。
現(xiàn)在絕大多數(shù)icon動效都離不開屬性變化，運(yùn)動恰當(dāng)，這個簡單而強(qiáng)大的方法大有可為之處。
二、路徑重組法 這可能是看慣了屬性變換的動效之后，又一個讓人眼前一亮的動效思路。 將icon的路徑（筆畫）進(jìn)行重組，構(gòu)成一個新的icon，這期間考驗(yàn)著更多的東西，比如觀察兩個icon筆畫之間的關(guān)系，這個思路最近相當(dāng)流行，同時也具有挑戰(zhàn)性。
三、點(diǎn)線面降級法 這是一個相當(dāng)有用的思路。 面和面進(jìn)行轉(zhuǎn)換的時候，可以用線作為介質(zhì)，一個面先轉(zhuǎn)換成一根線，再通過這根線轉(zhuǎn)換成另一個面。同理，線和線轉(zhuǎn)換時，可以用點(diǎn)作為介質(zhì)，一根線先轉(zhuǎn)換成一個點(diǎn)，再通過這個點(diǎn)轉(zhuǎn)換成另一根線。 這么說有點(diǎn)抽象，我們來看幾個例子。