2021-4-12 ui設(shè)計分享達(dá)人
前人早已總結(jié)了讓動畫生動的技巧，早在1981年由兩位迪士尼動畫師所撰寫的《The illusion of life:Disney Animation》一書就提到了動畫的12項基本法則，該法則也是受用至今。法則雖是針對傳統(tǒng)動畫而制定，但對于我們?nèi)粘Ｐ枨笾兴佑|的動效/動畫需求也同樣受用。
1）動畫原則介紹
2）結(jié)合案例應(yīng)用原則
3）流程方法論沉淀
4）結(jié)語
擠壓與伸展是我們最常用的運(yùn)動技巧。使用擠壓與拉伸來強(qiáng)調(diào)物體的質(zhì)感、重量、速度。擠壓和拉伸會給予物體運(yùn)動時具備質(zhì)量感和體積感的錯覺。例如當(dāng)一個皮球正在進(jìn)行下落運(yùn)動，在運(yùn)動過程中讓皮球體積產(chǎn)生一定拉伸來表現(xiàn)它的速度感，皮球落地后則因力的作用產(chǎn)生擠壓變形。
擠壓與伸展的幅度影響著物體的質(zhì)感、重量。設(shè)計師們可根據(jù)物體的質(zhì)感去決定擠壓伸展的幅度。動畫雖存在夸張性，但對于物體擠壓拉伸的體積盡可能保持視覺統(tǒng)一，避免較大的體積誤差導(dǎo)致運(yùn)動的突兀。
預(yù)期動作可告知觀者物體運(yùn)動即將發(fā)生，增強(qiáng)觀者的場景代入感，使運(yùn)動更加生動真實。如果我們?nèi)コ捌诘念A(yù)備過程物體所呈現(xiàn)的運(yùn)動感知像是突然被前方磁鐵所吸引。
預(yù)期動作可對觀者視線進(jìn)行引導(dǎo)，設(shè)計師可以根據(jù)預(yù)期動作所引導(dǎo)的方向來銜接鏡頭/場景的轉(zhuǎn)場。反之預(yù)期動作也可以用來欺騙觀眾，當(dāng)用戶預(yù)期與畫面不符時也可增加動畫舞臺的趣味性。
每個角色/運(yùn)動元素在運(yùn)動過程中都會流露出獨(dú)特的態(tài)度和氣質(zhì)。針對不同的角色/元素的運(yùn)動特性運(yùn)用不同的運(yùn)鏡、表演技巧、時間節(jié)奏以及舞臺的編排技巧，傳遞貼合角色/元素氣質(zhì)的動態(tài)感知。
在現(xiàn)今動畫工作流程中，考慮到流程效率及技巧利弊，我們可以使用兩者相互結(jié)合的方式。關(guān)鍵動作描述的是設(shè)計師們熟知的關(guān)鍵幀動畫的方式（類似AE）。在動畫設(shè)計前進(jìn)行基本運(yùn)動的關(guān)鍵動作提煉，再進(jìn)行細(xì)化，一層層的遞進(jìn)。底層的關(guān)鍵運(yùn)動越完善，在后續(xù)添加細(xì)節(jié)時才不會耗費(fèi)大量時間調(diào)整。而對于持續(xù)動作（逐幀動畫）的技巧，我們可以利用它處理一些復(fù)雜效果例如（涉及到運(yùn)動空間的變化、形狀上的靈動變化等）。
逐幀動畫。
優(yōu)點：自由且流暢的動態(tài)。
缺點：難以把控時間長短、體積大小。
關(guān)鍵幀動畫。
優(yōu)點：清晰、可靠、規(guī)范。
缺點：修改成本略高。
跟隨動作指的是元素運(yùn)動結(jié)束后不會立刻停止，會因為質(zhì)量、慣性等因素，元素會慢慢進(jìn)行振動減幅的過程。重疊動作則指的是運(yùn)動不會同一時間發(fā)生，主體與附屬部分的運(yùn)動會因質(zhì)感、外力等因素產(chǎn)生不同的速率。
當(dāng)一個人跳躍的時候，自身的衣帽等附屬物也會隨之?dāng)[動。跟隨&重疊動作反應(yīng)著運(yùn)動的力量感和速度感，利用好跟隨與重疊動作，可以更好地表現(xiàn)角色/元素主要動作/運(yùn)動。當(dāng)主要動作/運(yùn)動力量大、速度快的時候，跟隨與重疊的物體運(yùn)動幅度大，反之則運(yùn)動幅度小。
真實世界的運(yùn)動遵循著緩動運(yùn)動的規(guī)律，而并非勻速運(yùn)動。根據(jù)物體運(yùn)動情況、動態(tài)質(zhì)感去編排元素合適的運(yùn)動速率。關(guān)于運(yùn)動的速率編排相關(guān)內(nèi)容，可以看看過往的文章-《動效的質(zhì)感》。
仔細(xì)觀察可發(fā)現(xiàn)自然界中的運(yùn)動多為弧形運(yùn)動的組合，而勻速運(yùn)動只存在于機(jī)械運(yùn)動中。
在人物運(yùn)動過程中使用弧形運(yùn)動增添角色動畫表現(xiàn)力。比如當(dāng)人物抬頭或轉(zhuǎn)頭時，通過弧度的變化映射人物的情感，是充滿好奇心的還是沮喪的。
在交互動效中，弧形運(yùn)動路徑會給予觀者運(yùn)動表現(xiàn)力較年輕活潑的感知隱喻。設(shè)計師可根據(jù)品牌調(diào)性及產(chǎn)品屬性去選擇運(yùn)動路徑類型。
當(dāng)主體在運(yùn)動時，設(shè)計師可通過附屬物運(yùn)動來輔助表達(dá)主體運(yùn)動氣質(zhì)。比如人物敲門時，捏緊拳頭的敲（代表生氣）與翹起蘭花指敲的（代表精致）區(qū)別。
在上篇文章其實我們有提到影響動效質(zhì)感的原因之一就是時間，控制好物體的運(yùn)動時間也是表現(xiàn)良好動畫節(jié)奏感的關(guān)鍵。
使用「時間偏差」的技巧，可以讓你的動畫更加生動。因為受力、質(zhì)感等因素影響，主體運(yùn)動時附屬部分的運(yùn)動不會同時發(fā)生。比如當(dāng)人物正在打哈欠時，首先是從嘴巴發(fā)力，再擴(kuò)散至五官眉毛。
為保持動效的連續(xù)性以及營造自然流暢的交互體驗，適當(dāng)?shù)氖褂脮r間偏差，可避免動效元素變化過程出現(xiàn)空檔期，提升信息傳遞效率減少認(rèn)知負(fù)荷。
通過夸張手法增添動畫表現(xiàn)張力，加強(qiáng)運(yùn)動元素的吸引力令動畫更有代入感和戲劇性。
動畫設(shè)計時可通過營造鏡頭透視感、景深感模擬真實的空間感打破二維扁平視覺效果，提升畫面表現(xiàn)力。
一部好的動畫作品一定會有令人吸引的人事物，比如動態(tài)氣質(zhì)或視覺風(fēng)格等它們都能很好的吸引觀眾。除此之外，如何講好一個故事，通過趣味幽默的故事表達(dá)手法也可以增添動畫的吸引力。
通過對十二大基本原則的學(xué)習(xí)，我將技巧分為以下兩大類：設(shè)計技巧和表演技巧。
設(shè)計技巧：動畫設(shè)計的技法，增添動畫細(xì)節(jié)令動畫表現(xiàn)更生動自然。
表演技巧：舞臺表演的技巧，提升動畫舞臺全局的表現(xiàn)力。
接下來我們結(jié)合上述所提及的動畫原則，根據(jù)實際案例進(jìn)行結(jié)合應(yīng)用。一起來探討下當(dāng)接到動效設(shè)計需求時，我們需要思考哪些點？才能使我們的動效表現(xiàn)力更上一層樓。
假設(shè)在項目中我們需要對設(shè)計元素（豬豬存錢罐）添加動效以提示用戶已省錢成功的情感氛圍。設(shè)計前我們先來分析下元素以什么動態(tài)/動作表現(xiàn)會更貼合元素性格。考慮到豬豬的可愛屬性，采用了跳躍的運(yùn)動方式。并擬定了跳躍后天上落下金幣的動畫腳本。
將腳本確定后，我們在腦海里已經(jīng)有大概的運(yùn)動畫面。但在進(jìn)入動效設(shè)計前，還需要明確在動畫中使用哪些動畫原則來提升動畫生動性。
在添加動畫細(xì)節(jié)前，我分享下在項目中經(jīng)常用到的兩個技巧。
實現(xiàn)擠壓與伸展的方式有很多種，最常見的是直接改變物體的縮放比例或形狀路徑來實現(xiàn)。但在設(shè)計項目中我們往往會遇到非矢量的設(shè)計元素，利用xxx可實現(xiàn)圖層的彎曲扭曲等變形效果。
質(zhì)地堅硬的物體受外力的影響較小，質(zhì)地柔軟的物體受外力的影響較大。而像豬豬這類柔軟的物體在恢復(fù)靜止吋肉肉會有一個跟隨&重疊動作（抖動）。在處理這類抖動的效果除了使用常規(guī)的彈性表達(dá)式外還可配合使用AE的 CC bend it 效果增加形變細(xì)節(jié)令物體運(yùn)動更為生動自然。
當(dāng)我們?nèi)コ@些動畫原則后，再去作對比明顯的感知差異就出來了。
根據(jù)過往項目經(jīng)驗，我總結(jié)了動效/動畫設(shè)計的流程思路。從業(yè)務(wù)目標(biāo)的分析到動畫腳本的確定，層層遞進(jìn)。前期的目標(biāo)和框架確定后，之后進(jìn)行動畫原則的梳理及最后的動效輸出。設(shè)計師們不妨在項目中嘗試上述的流程思路及原則技巧，將自身動畫的表現(xiàn)力提升一個檔次。
隨著動畫/動效的落地方式愈來愈完善，像Lottie、svga等新型的動畫落地形式所帶來的高品質(zhì)畫面呈現(xiàn)。設(shè)計師們不能滿足于動畫僅僅只是動那么簡單，如何去塑造生動的動畫形象還有不少我們需要考慮的細(xì)節(jié)。恰好前人總結(jié)了相應(yīng)的原則技巧，幫助我們站在巨人的肩膀上看得更遠(yuǎn)。除《The illusion of life:Disney Animation》外，近期也在閱覽《動畫師的生存手冊》里面涵蓋了不少關(guān)于角色動畫的運(yùn)動技巧及細(xì)節(jié)。其中部分技巧并不局限于角色動畫的設(shè)計中，下期文章我將分享關(guān)于角色動畫的知識沉淀內(nèi)容。
文章來源：站酷 作者：Fiasc1
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.sillybuy.com