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