]]>
為什么叫流行趨勢(shì)呢？不是我想這么叫，是大家都這么寫(xiě)這么叫?；蛘呶覀兛梢試L試用一種新的理解方式是對(duì)過(guò)去的總結(jié)和為未來(lái)的展望。
回歸正題和往年一樣我從追波中挑選了2019年中最流行的Shots，由于今年追波支持上傳視頻作品，今年挑選的600件設(shè)計(jì)作品中動(dòng)效（包含GIF和MP4）246件作品，我算了下就光動(dòng)效就占到總數(shù)的41%，差不多半壁江山了，或許2020年就是動(dòng)效元年，動(dòng)效本身就是一種設(shè)計(jì)趨勢(shì)。
為什么我猜2020年或許就是動(dòng)效元年？
首先追波平臺(tái)今天率先支持了視頻格式展示作品，包括國(guó)內(nèi)的短視頻平臺(tái)的快速發(fā)展已經(jīng)形成了N個(gè)巨頭企業(yè)。
明年5G時(shí)代的到來(lái)，到時(shí)候我們的手機(jī)、電腦等硬件設(shè)備將迎來(lái)一個(gè)大的迭代，速度效率會(huì)更快，如果動(dòng)效的制作成本降低，同樣是設(shè)計(jì)一幅插畫(huà)或制作一個(gè)短片來(lái)運(yùn)營(yíng)用戶(hù)你會(huì)更喜歡那種形式呢，在更注重用戶(hù)體驗(yàn)的今天短片會(huì)從視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)等多維度給用戶(hù)帶來(lái)極致體驗(yàn)。
在這樣的大環(huán)境下我們也希望能有一款動(dòng)效軟件出現(xiàn)像Sketch、Figma顛覆Ps去顛覆Ae（這里只是從互聯(lián)網(wǎng)行業(yè)協(xié)同實(shí)現(xiàn)層的顛覆，Adobe軟件還是很強(qiáng)大的），從界面的簡(jiǎn)單易學(xué)和代碼實(shí)現(xiàn)層面上去創(chuàng)新?，F(xiàn)在我們來(lái)了解下追波平臺(tái)的主流動(dòng)效有哪些呢？
品牌動(dòng)效篇
品牌動(dòng)效Logo作為一種更新穎的展現(xiàn)方式，動(dòng)態(tài)品牌圖形會(huì)更容易讓用戶(hù)理解其寓意，當(dāng)然也會(huì)具有更高的品牌辨識(shí)度。一個(gè)好的有趣的動(dòng)態(tài)Logo能夠讓人體會(huì)到不同的情感。我們可以設(shè)計(jì)營(yíng)造一個(gè)美好的故事情節(jié)，讓用戶(hù)更容易記住并體現(xiàn)我們品牌專(zhuān)業(yè)性。
品牌升級(jí)
UNFOLD是追波一個(gè)很老牌的設(shè)計(jì)團(tuán)隊(duì)了，他們來(lái)自美國(guó)佛羅里達(dá)州的薩拉索塔，他們將自己的設(shè)計(jì)作品做出動(dòng)效作為自己的品牌來(lái)宣傳，更好的體現(xiàn)了他們?cè)O(shè)計(jì)的專(zhuān)業(yè)、用心和前衛(wèi)。
Firefox新品牌VI升級(jí)設(shè)計(jì)，在新的品牌架構(gòu)中，F(xiàn)irefox瀏覽器與Firefox Send，F(xiàn)irefox Monitor和Firefox Lockwise產(chǎn)品相當(dāng)。
新創(chuàng)建的產(chǎn)品系列由傘品牌Firefox領(lǐng)導(dǎo)。作為傘形商標(biāo)的商標(biāo)，F(xiàn)irefox的功能是基于瀏覽器的徽標(biāo)螺旋圖形。你可以將徽章標(biāo)志想象為瀏覽器的圖標(biāo)，因?yàn)樽鳛閼?yīng)用程序圖標(biāo)和菜單圖標(biāo)，狐貍和地球儀只剩下橙藍(lán)色黃球。漩渦是動(dòng)態(tài)的，開(kāi)放的并且在視覺(jué)上吸引人。
品牌IP篇?jiǎng)有?/h3>
品牌IP化是移動(dòng)互聯(lián)網(wǎng)變革下產(chǎn)生的，品牌IP就是品牌的“人格化”，目的是為了迎合品牌的主流人群用的一種營(yíng)銷(xiāo)手段。品牌IP主體可以是一個(gè)擬物的形象，可以表達(dá)用戶(hù)情感在精神層面與用戶(hù)達(dá)成共鳴。
品牌IP可以緩解品牌的周期性衰落問(wèn)題，給品牌重新賦予生命力，所以品牌IP化漸漸的流行起來(lái)。當(dāng)品牌IP賦予了動(dòng)效會(huì)更加真實(shí)形象，更好的傳達(dá)寓意。
界面動(dòng)效篇
界面動(dòng)效可以讓界面更活潑生動(dòng)，還可以更好傳達(dá)用戶(hù)與界面之間的交互情感，好的界面動(dòng)效設(shè)計(jì)可以解決界面中的功能問(wèn)題，讓產(chǎn)品更容易被用戶(hù)接受，能讓你的應(yīng)用更快、更流暢。
微交互動(dòng)效
界面微交互動(dòng)效會(huì)讓用戶(hù)體驗(yàn)更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計(jì)，微交互和動(dòng)效設(shè)計(jì)是繞不開(kāi)的，UI界面設(shè)計(jì)通過(guò)微交互反饋告知用戶(hù)當(dāng)前正在發(fā)生的事情，所處的狀態(tài)。細(xì)微的動(dòng)效更能調(diào)動(dòng)用戶(hù)情緒，取悅用戶(hù)。
圖標(biāo)動(dòng)效
在短視頻領(lǐng)域中圖標(biāo)動(dòng)效運(yùn)用更為廣泛，在直播廣場(chǎng)中涮禮物時(shí)有炫酷的圖標(biāo)動(dòng)效會(huì)更加用戶(hù)的炫耀感和愉悅感。當(dāng)然我們?cè)诋a(chǎn)品設(shè)計(jì)中也可以設(shè)計(jì)微動(dòng)效來(lái)傳達(dá)用戶(hù)點(diǎn)擊或觸摸的行為動(dòng)效，可以更加用戶(hù)理解界面之間的轉(zhuǎn)場(chǎng)和交互關(guān)系。
界面動(dòng)效
界面動(dòng)效沒(méi)什么好說(shuō)的，依然是動(dòng)效占比最重的部分，對(duì)比初學(xué)者界面動(dòng)效首先把握時(shí)間的長(zhǎng)短，關(guān)于動(dòng)效時(shí)間的學(xué)習(xí)可以學(xué)習(xí)Material design界面動(dòng)效，里面都有嚴(yán)謹(jǐn)?shù)臅r(shí)間規(guī)范。www.material.io/design/motion/speed.html#duration
難點(diǎn)在于緩動(dòng)函數(shù)貝塞爾曲線Linear、Ease、Ease-in、Ease-out、Ease-in-out，轉(zhuǎn)場(chǎng)時(shí)運(yùn)用了大量的緩動(dòng)函數(shù)效果都很棒。
Mg動(dòng)畫(huà)篇
Mg動(dòng)畫(huà)
Mg動(dòng)畫(huà)需要很好的節(jié)奏感、韻律，每一個(gè)場(chǎng)景動(dòng)畫(huà)都需要其中的元素進(jìn)行連接變化，讓轉(zhuǎn)場(chǎng)動(dòng)畫(huà)更加自然，MG人物動(dòng)畫(huà)通過(guò)點(diǎn)線面的動(dòng)效變化讓畫(huà)面更加有趣、自然，通過(guò)粒子效果讓特定場(chǎng)景無(wú)限循環(huán)會(huì)讓人更加印象深刻。
行走動(dòng)效
行走動(dòng)效是Mg動(dòng)效學(xué)習(xí)的必修課，大體分為動(dòng)物人物的行走、奔跑、跳躍等形態(tài)，如果簡(jiǎn)單的行走動(dòng)畫(huà)只要參考動(dòng)物或人的行走分步圖插上關(guān)鍵幀就可以制作完成。
對(duì)于一些彈性的行走動(dòng)畫(huà)，我們那需要使用插件可以使用Puppet Tools插件利用圖釘來(lái)制作骨架的工具，但因?yàn)閳D釘工具本身的缺陷，容易破圖。DUIK插件現(xiàn)在普遍用在AE制作角色動(dòng)畫(huà)（角色動(dòng)畫(huà)比較硬），RubberHose插件角色動(dòng)畫(huà)比較軟，相對(duì)更加自然。為了更好的做好人物角色動(dòng)畫(huà)還需要平時(shí)對(duì)人物形態(tài)更細(xì)致的觀察。
Q彈動(dòng)畫(huà)
Q彈動(dòng)畫(huà)中的Q彈效果會(huì)讓畫(huà)面更加有趣，會(huì)讓人重復(fù)欣賞不回感到膩。使用AE彈性表達(dá)式Bounce 和 Overshoot！利用這個(gè)兩個(gè)表達(dá)式你可以輕而易舉地實(shí)現(xiàn)各種彈性動(dòng)畫(huà)，也可以使用Ae腳本：物體彈簧彈性預(yù)設(shè)腳本 Aescripts Rubberize It，可以將你的物體圖形層中的元素模擬成具有彈簧彈性效果，更符合力學(xué)！
循環(huán)動(dòng)效
循環(huán)動(dòng)效是為了更好的展示一個(gè)作品的自然收尾銜接，沒(méi)有明顯的停頓感會(huì)讓欣賞者樂(lè)此不疲。所以我們?cè)谠O(shè)計(jì)動(dòng)效時(shí)應(yīng)盡可能使用循環(huán)動(dòng)效。
動(dòng)效創(chuàng)意篇
偽3D旋轉(zhuǎn)動(dòng)效
偽3D旋轉(zhuǎn)動(dòng)效漸漸的成為一種趨勢(shì)，360度無(wú)死角旋轉(zhuǎn)對(duì)角色造型有更高的要求。偽3D旋轉(zhuǎn)動(dòng)效也漸漸被更多的設(shè)計(jì)愛(ài)好者所喜歡，偽3D旋轉(zhuǎn)動(dòng)效主要使用了ae表達(dá)式進(jìn)行制作對(duì)360不同旋轉(zhuǎn)角度進(jìn)行定型，這種動(dòng)效比較新穎、很有意思百看不厭。
抖音風(fēng)（魔性）
抖音風(fēng)就是一種加上魔性的音樂(lè)，可以讓用戶(hù)無(wú)限循環(huán)進(jìn)行觀看。抖音風(fēng)動(dòng)效也是如此，光看動(dòng)效畫(huà)面就很魔性可以無(wú)限循環(huán)看很多篇，越看越有趣。
形變動(dòng)效
形變動(dòng)效的魅力就在于都是圍繞主題進(jìn)行展開(kāi)，并且通過(guò)一定的趣味性來(lái)抓住用戶(hù)的眼球，通過(guò)一些不規(guī)律的形變會(huì)讓人思考它是如何實(shí)現(xiàn)的，是不是用了很高深的技術(shù)等，會(huì)給人留下深刻印象并嘗試去思考。
跟隨動(dòng)效
早期的跟隨動(dòng)畫(huà)多為網(wǎng)站上的鼠標(biāo)跟隨形變動(dòng)效，現(xiàn)在跟隨動(dòng)畫(huà)可以加入三維動(dòng)畫(huà)或使用插件Joysticks ’n Sliders可以在一個(gè)小的框框內(nèi)實(shí)時(shí)反應(yīng)畫(huà)面的動(dòng)態(tài)。
酷炫科技風(fēng)
AE Trapcode插件最常用的是particular和form了，這兩款粒子插件可以制作出很多酷炫的動(dòng)態(tài)效果，隨著科技進(jìn)步上面的動(dòng)態(tài)炫酷風(fēng)格可適用于多媒體大屏展示或用于公司企業(yè)官網(wǎng)，通過(guò)粒子插件來(lái)突出企業(yè)科技感，多用戶(hù)互聯(lián)網(wǎng)公司。
三維動(dòng)效（C4D）
c4d三維場(chǎng)景動(dòng)畫(huà)通過(guò)構(gòu)建實(shí)物和場(chǎng)景模擬生活中的現(xiàn)實(shí)場(chǎng)景，會(huì)讓用戶(hù)體驗(yàn)真實(shí)感，三維軟件制作動(dòng)效的最大優(yōu)勢(shì)是通過(guò)動(dòng)力學(xué)和表達(dá)式會(huì)模擬真實(shí)感，未來(lái)在AR/VR領(lǐng)域會(huì)有更好的發(fā)展。相對(duì)于界面動(dòng)效學(xué)習(xí)成本難度也相對(duì)較大。
動(dòng)效應(yīng)用篇
字體篇
小米MIUI 11推出了“動(dòng)態(tài)字體系統(tǒng)”，可以無(wú)級(jí)調(diào)節(jié)字體粗細(xì)，每個(gè)人都能找到自己感覺(jué)舒適的閱讀字重，同時(shí)系統(tǒng)會(huì)根據(jù)內(nèi)容不同，給予不同程度的加粗，交互細(xì)節(jié)也得到了全面提升。字體也慢慢加入動(dòng)效的行業(yè)里來(lái)了。
2019年11月7日，我們將在阿姆斯特丹中央車(chē)站接管通常用于24小時(shí)廣告的所有80個(gè)屏幕，以展示來(lái)自世界各地的設(shè)計(jì)師的動(dòng)畫(huà)設(shè)計(jì)。該網(wǎng)站旨在引起公眾參觀展覽的興趣，并鼓勵(lì)設(shè)計(jì)師，工作室和藝術(shù)院校提交他們的作品。
技術(shù)本身在很大程度上依賴(lài)于我們使用Processing和After Effects創(chuàng)建的動(dòng)畫(huà)。我們使用了p5.js的Javascript來(lái)設(shè)定網(wǎng)站上的交互元素?？梢酝ㄟ^(guò)鼠標(biāo)輸入，也可以使用手機(jī)中的陀螺儀。
插畫(huà)動(dòng)效
插畫(huà)繪制一般都具有藝術(shù)感，插畫(huà)傳達(dá)的信息是否明確就顯得格外重要。適當(dāng)添加簡(jiǎn)單的動(dòng)效，會(huì)增加插畫(huà)的場(chǎng)景性給用戶(hù)帶入感。插畫(huà)和動(dòng)效結(jié)合起來(lái)更容易引導(dǎo)用戶(hù)，吸引人的眼球。插畫(huà)動(dòng)畫(huà)可以幫助用戶(hù)更好的了解內(nèi)容，會(huì)讓用戶(hù)在界面插畫(huà)中尋找可交互的體驗(yàn)樂(lè)趣。
Ipad插畫(huà)動(dòng)效
Ipad插畫(huà)之所以能流行還是因?yàn)樘O(píng)果公司出的ApplePencil ，用過(guò)的都說(shuō)好。ApplePencil 能幫你盡情表達(dá)創(chuàng)意。無(wú)論你是在畫(huà)水彩，進(jìn)行室內(nèi)設(shè)計(jì)，還是潤(rùn)色照片，ApplePencil 總能幫你把創(chuàng)想變成現(xiàn)實(shí)。
追波大佬Gal Shir上傳的作品都是錄制自己使用 Ipad插畫(huà)的整個(gè)過(guò)程，從構(gòu)圖起形加光陰加材質(zhì)，最后形成一幅美麗的插畫(huà)。想學(xué)習(xí) Ipad插畫(huà)技巧更多請(qǐng)到Gal Shir的追波主頁(yè)觀看。https://dribbble.com/galshir
游戲動(dòng)效
游戲動(dòng)效可以很好的引導(dǎo)玩家操作，幫助新手引導(dǎo)，讓玩家了解游戲規(guī)則和操作使用，好的游戲動(dòng)效可以增加用戶(hù)粘性。游戲動(dòng)態(tài)、場(chǎng)景特效、角色動(dòng)畫(huà)對(duì)動(dòng)畫(huà)運(yùn)動(dòng)規(guī)律都有很高的要求，游戲動(dòng)態(tài)demo也可以節(jié)約研發(fā)人員的時(shí)間成本和溝通效率。
Priciple高保真
Principle是一款做原型的軟件。很多公司也用Principle做高保真原型，這樣就可以作為最小可行性產(chǎn)品（mvp）,在正式開(kāi)發(fā)前就進(jìn)行用戶(hù)調(diào)查、可用性測(cè)試。
阿里大佬Dimest的作品最具有代表性，視覺(jué)沖擊力強(qiáng)有美感，加上創(chuàng)意的微交互讓Priciple高保真作品獨(dú)具一格。更多的高保真動(dòng)效作品可以去Dimest追波主頁(yè)欣賞。www.dribbble.com/Dimest
代碼動(dòng)效篇
GitHub是一個(gè)面向開(kāi)源及私有軟件項(xiàng)目的托管平臺(tái)，GitHub是基于代碼已經(jīng)實(shí)現(xiàn)了可用的代碼動(dòng)效，如果工作中有類(lèi)似的動(dòng)效效果可用直接使用，對(duì)于設(shè)計(jì)或者產(chǎn)品來(lái)說(shuō)公司中有這樣的前端此乃大幸。愿意實(shí)現(xiàn)更好的用戶(hù)體驗(yàn)中的微交互微動(dòng)效花時(shí)間花精力。
最后還是要感謝程序員幫我們守住產(chǎn)品實(shí)現(xiàn)的最后一道防線，可能我們?cè)O(shè)計(jì)時(shí)會(huì)出現(xiàn)思考不周的情況或者理想與實(shí)踐之間的沖突問(wèn)題等等，程序員會(huì)用更理性的思考方式幫我們找到產(chǎn)品界面中的漏洞，及時(shí)調(diào)整確保產(chǎn)品的合理上線。
原文地址： 水手哥學(xué)設(shè)計(jì)（公眾號(hào)）
作者：水手哥
1、新聞列表互動(dòng)類(lèi)
https://dribbble.com/shots/4757077-Newslist-Interactions
這個(gè)新聞列表的互動(dòng)非常順滑，用良好的原型設(shè)計(jì)工具來(lái)創(chuàng)建這個(gè)應(yīng)用程序原型，使其更加真實(shí)。
2、閱讀類(lèi)
https://dribbble.com/shots/5284950-Reading-App-Design-Project-Interactive-2
這是一個(gè)閱讀應(yīng)用程序設(shè)計(jì)，具有流暢的動(dòng)畫(huà)和精致的UI設(shè)計(jì)，使這個(gè)應(yīng)用程序更加真實(shí)。最令人驚訝的部分是添加到購(gòu)物車(chē)的微交互。超酷。
3、液體下拉動(dòng)畫(huà)
https://dribbble.com/shots/2590603-Liquid-Pull-Down-UI-Animation
這是Dribbble應(yīng)用程序項(xiàng)目的重新設(shè)計(jì)，帶有液體下拉動(dòng)畫(huà)，使設(shè)計(jì)更加有趣和生動(dòng)。
4、nelio食品插畫(huà)
https://dribbble.com/shots/4023198-Nelio-Food-Illustrations
5、nike+聊天界面
https://dribbble.com/shots/6289684-Nike-Chat-dark-concept
這是Nike +聊天應(yīng)用程序的聊天概念，具有深色背景和流暢的交互，使這個(gè)應(yīng)用程序項(xiàng)目達(dá)到一個(gè)全新的水平。
6、交互式標(biāo)簽欄
https://dribbble.com/shots/5982908-Interactive-animation-Tab-bar
7、視頻應(yīng)用動(dòng)畫(huà)
https://dribbble.com/shots/6248258-Video-App-Animation
這個(gè)視頻應(yīng)用交互是驚人的。整個(gè)設(shè)計(jì)流程超順暢，色彩搭配得非常好。我肯定會(huì)使用這個(gè)應(yīng)用程序。
8、點(diǎn)餐動(dòng)畫(huà)
https://dribbble.com/shots/5567998-interactive-animation-0144
如果您想以有趣的方式訂購(gòu)一杯可口可樂(lè)，這個(gè)應(yīng)用程序概念非常有趣。美麗的色彩和流暢的設(shè)計(jì)流程使得整體非常干凈。
9、Rally網(wǎng)頁(yè)
https://rallyinteractive.com/
Rally是一個(gè)小型的數(shù)字產(chǎn)品工作室，交互和動(dòng)畫(huà)非?？?，具有干凈的界面和精致的色彩搭配。點(diǎn)擊箭頭以獲取更多信息功能是本網(wǎng)站上最時(shí)尚的設(shè)計(jì)元素之一。
10、Globekit
https://globekit.co/
GlobeKit是一個(gè)可視化平臺(tái)，可以將地理數(shù)據(jù)轉(zhuǎn)化為令人驚嘆的交互式體驗(yàn)。巨大的移動(dòng)地球儀令人驚嘆，并通過(guò)使用動(dòng)畫(huà)獲得了很多關(guān)注。
11、電子商務(wù)類(lèi)
https://dribbble.com/shots/6314115-Products-Page-Animation
電子商務(wù)網(wǎng)站始終保持安全，特別是在其產(chǎn)品頁(yè)面上。如果您想增加轉(zhuǎn)化率和收入，此產(chǎn)品頁(yè)面就是一個(gè)很好的例子，使用流暢的互動(dòng)來(lái)展示他們的產(chǎn)品。
12、開(kāi)發(fā)者網(wǎng)站
https://dribbble.com/shots/5999213-Developer-Website-Contacts-Page
我不敢相信這是一個(gè)聯(lián)系頁(yè)面！如果我是網(wǎng)絡(luò)開(kāi)發(fā)者，我肯定會(huì)通過(guò)電子郵件發(fā)送給這個(gè)網(wǎng)站設(shè)西瓜非?？蓯?ài)，互動(dòng)使整個(gè)頁(yè)面在視覺(jué)上很有趣。
13、Apple Music
https://dribbble.com/shots/5523931-Apple-Music
這是Apple Music的非官方重新設(shè)計(jì)。通過(guò)在黑暗模式下繪制具有漂亮的色彩漸變和藝術(shù)家卡片的功能卡，在播放音樂(lè)時(shí)看起來(lái)更有趣。
14、Hello World Agency Portfolio
https://dribbble.com/shots/6339620-Hello-World-Agency-Portfolio-Website
15、Almea解決方案
https://dribbble.com/shots/6036333-
這個(gè)項(xiàng)目太棒了，布局干凈，用戶(hù)界面精致，互動(dòng)性強(qiáng)，顏色很棒。
16、馬里布蘭界面
Tab bar設(shè)計(jì)中，有一個(gè)很重要但卻常常會(huì)被設(shè)計(jì)師們遺漏的關(guān)鍵點(diǎn)——tab切換時(shí)的 “圖標(biāo)動(dòng)畫(huà)設(shè)計(jì)” 。
Tab Bars圖標(biāo)動(dòng)畫(huà)的作用
精彩的圖標(biāo)動(dòng)畫(huà)，對(duì)整體的設(shè)計(jì)具有畫(huà)龍點(diǎn)睛的作用，降低tab切換時(shí)的枯燥感，提升操作的愉悅度和期待感。甚至可以通過(guò)tab的動(dòng)畫(huà)設(shè)計(jì)給用戶(hù)傳達(dá)出整個(gè)APP設(shè)計(jì)的品牌及理念。
動(dòng)靜對(duì)比
動(dòng)態(tài)的設(shè)計(jì)豐富了圖標(biāo)更多可能性的表達(dá)，結(jié)合不同的動(dòng)態(tài)效果表達(dá)出不同的情緒或情感。而除了情感的表達(dá)之外，最基礎(chǔ)的作用在于動(dòng)態(tài)比靜態(tài)更加吸引眼球、增加視覺(jué)關(guān)注度，因此在切換tab時(shí)具有更強(qiáng)的視覺(jué)沖擊力。
柔和與生硬
緩動(dòng)的動(dòng)效過(guò)度，相比于無(wú)動(dòng)效的設(shè)計(jì)，在tab切換時(shí)整體的視覺(jué)感受會(huì)更加柔和、輕量。過(guò)度直接的反饋，容易造成過(guò)度生硬而不具美感。
趣味的表達(dá)
由于動(dòng)效的加入，我們?cè)谠O(shè)計(jì)tab切換時(shí)會(huì)變得更加多元化，而不是單純的只是設(shè)計(jì)一個(gè)動(dòng)作的反饋。在過(guò)度的時(shí)間差中，可以進(jìn)行很多趣味的表達(dá)。
情緒代入
圖標(biāo)結(jié)合表情的設(shè)計(jì)，運(yùn)用動(dòng)效的設(shè)計(jì)，讓整體的情緒感受更加直觀。如下圖案例，默認(rèn)態(tài)與選中態(tài)通過(guò)前后的差異對(duì)比，點(diǎn)擊后出現(xiàn)的表情驚喜，具有不一樣的情緒變化。
Tab Bar 圖標(biāo)動(dòng)畫(huà)的基礎(chǔ)類(lèi)型
動(dòng)畫(huà)的設(shè)計(jì)是多樣化的，Tab bar 圖標(biāo)動(dòng)畫(huà)的類(lèi)型實(shí)際上并沒(méi)有明確的劃分，這里主要列舉的是自己在日常瀏覽設(shè)計(jì)網(wǎng)站時(shí)的收集，以及個(gè)人認(rèn)為比較常見(jiàn)的一些類(lèi)型。我們可以基于這些常見(jiàn)類(lèi)型的設(shè)計(jì)，對(duì)我們的設(shè)計(jì)進(jìn)行再升華，從而提高整體設(shè)計(jì)的質(zhì)感和趣味。
縮放動(dòng)畫(huà)
點(diǎn)擊后通過(guò)一定的比例的 “縮放” 反饋，突出tab之前的變化，從而強(qiáng)化了tab操作的感知，提升對(duì)于操作區(qū)域的視覺(jué)聚焦。結(jié)合不同的縮放效果，可以呈現(xiàn)出不同的視覺(jué)感知，縮放動(dòng)畫(huà)大致分為線性和彈性?xún)煞N類(lèi)型。
線性縮放
圖標(biāo)在放大或縮小的過(guò)程中，使用了勻速的動(dòng)畫(huà)效果，整體動(dòng)畫(huà)一步到位、干凈利落。整體視覺(jué)感知較為柔和。
彈性縮放
帶有彈性縮放的tab反饋，讓整體的設(shè)計(jì)更加具有趣味性，相比線性縮放也更有視覺(jué)沖擊力。圖標(biāo)的運(yùn)動(dòng)規(guī)則：先從0放大到最大（數(shù)值根據(jù)實(shí)際情況設(shè)定），然後再回彈至正常大小。
透明度自然過(guò)度
讓tab切換之間的過(guò)度更加自然、柔和。相比于純靜態(tài)切換只多了一層透明度變化，但卻具有完全不一樣的操作視覺(jué)感受。
位移
位移出現(xiàn)的圖標(biāo)會(huì)產(chǎn)生一定的速度感，但需要控制位移的速度，過(guò)快容易忽略中間的運(yùn)動(dòng)軌跡，而影響自然過(guò)度的效果。
抖動(dòng)
通過(guò)圖標(biāo)的左右、上下快速位移或旋轉(zhuǎn)形成，整體的動(dòng)畫(huà)效果節(jié)奏較快，具有一定的速度感。情緒表達(dá)上較為俏皮。
左右抖動(dòng)
點(diǎn)擊后，圖標(biāo)反饋進(jìn)行上下快速位移。建議來(lái)回位移次數(shù)不太太多，控制在1-2次左右，次數(shù)太多容易顯得拖沓。
跳動(dòng)的圖標(biāo)
點(diǎn)擊切換后，圖標(biāo)從底部彈起再回到初始位置，整體視覺(jué)感受具有跳動(dòng)的韻律感。
晃動(dòng)的圖標(biāo)
旋轉(zhuǎn)抖動(dòng)的圖標(biāo)比上下或左右會(huì)更加具有趣味感。設(shè)定圖標(biāo)的中心點(diǎn)或角點(diǎn)為旋轉(zhuǎn)軸，通過(guò)來(lái)回晃動(dòng)而形成的效果。
填充
切換時(shí)，默認(rèn)tab由線形向面形的轉(zhuǎn)變。填充類(lèi)型的動(dòng)畫(huà)效果整體簡(jiǎn)單、直接，直觀的表達(dá)出圖標(biāo)切換前后的對(duì)應(yīng)關(guān)系。關(guān)鍵點(diǎn)在于處理好線形與面形的圖標(biāo)的細(xì)節(jié)轉(zhuǎn)換。
中心填充
使用某種幾何圖形（可以是圓形或其他）通過(guò)發(fā)散放大的設(shè)計(jì)方式，結(jié)合一定的節(jié)奏韻律擴(kuò)展至填滿整個(gè)圖標(biāo)。
掃描填充
動(dòng)畫(huà)效果從圖標(biāo)的一側(cè)，通過(guò)劃動(dòng)變化至填滿。
畫(huà)線 – 線形軌跡
以線性圖標(biāo)或線面圖標(biāo)中的線運(yùn)動(dòng)為主，在設(shè)計(jì)整套圖標(biāo)是，在運(yùn)動(dòng)軌跡的上需要保持統(tǒng)一（線的初始與結(jié)束的位置/方向等）。軌跡不一致，容易導(dǎo)致圖標(biāo)的一致性被破壞。
局部細(xì)節(jié)畫(huà)線
選擇圖標(biāo)的關(guān)鍵細(xì)節(jié)或圖標(biāo)的特征進(jìn)行畫(huà)設(shè)計(jì)，增強(qiáng)圖標(biāo)的特征細(xì)節(jié)，提高圖標(biāo)的記憶點(diǎn)。
整體畫(huà)線
與局部細(xì)節(jié)畫(huà)線基本一致，差別的點(diǎn)在于表達(dá)了不同的視覺(jué)感受。整體畫(huà)線從視覺(jué)感受上會(huì)相對(duì)更加飽滿。但需要根據(jù)圖標(biāo)的復(fù)雜程度而定，圖標(biāo)過(guò)度復(fù)雜，可能容易造成拖沓的動(dòng)畫(huà)效果。
結(jié)合容器
結(jié)合不同的幾何形作為選中圖標(biāo)的當(dāng)前態(tài)的背景，在背景上設(shè)計(jì)出現(xiàn)的動(dòng)畫(huà)效果。既強(qiáng)化了選中當(dāng)前態(tài)，整體的tab切換的一致性也較高。
元素介質(zhì)
設(shè)計(jì)上結(jié)合某種圖形元素作為當(dāng)前選中態(tài)，在切換時(shí)通過(guò)元素的位移、跳動(dòng)等方式來(lái)達(dá)到tab切換的動(dòng)畫(huà)效果。
Tab 圖標(biāo)動(dòng)畫(huà)的組合形
除了以上單種類(lèi)型的動(dòng)畫(huà)方式外，還可以嘗試多種方式結(jié)合。通過(guò)不同的方式結(jié)合可以產(chǎn)生出更多的可能性，讓你的設(shè)計(jì)更加具有創(chuàng)意和打破常規(guī)的設(shè)計(jì)。
填充 畫(huà)線
填充 抖動(dòng)
彈性縮放 填充
元素介質(zhì) 抖動(dòng)
位移 透明度
更多案例（來(lái)自dribbble）
總結(jié)
tabbar的圖標(biāo)動(dòng)畫(huà)最大的作用在于解決切換時(shí)的枯燥與單調(diào)，我們?cè)谠O(shè)計(jì)時(shí)除了單純追求動(dòng)畫(huà)的變化及多樣性之外，更多需要思考的是什么樣的動(dòng)畫(huà)更符合我們的設(shè)計(jì)。
本文的主旨主要是分享自己日?？吹降囊恍﹦?dòng)畫(huà)效果，以及對(duì)收集的內(nèi)容進(jìn)行一個(gè)分享。實(shí)際的動(dòng)畫(huà)樣式或者效果肯定遠(yuǎn)遠(yuǎn)不只這些，我們可以通過(guò)基礎(chǔ)的方法再結(jié)合自己的創(chuàng)意發(fā)揮出更多滿足自我設(shè)計(jì)的表達(dá)方式。
作者：IDfor (公眾號(hào):IDfor_all)
]]>