讓動畫生動的技巧

2022-6-20    純純

前言

前人早已總結(jié)了讓動畫生動的技巧,早在1981年由兩位迪士尼動畫師所撰寫的《The illusion of life:Disney Animation》一書就提到了動畫的12項基本法則,該法則也是受用至今。法則雖是針對傳統(tǒng)動畫而制定,但對于我們?nèi)粘P枨笾兴佑|的動效/動畫需求也同樣受用。


目錄

1)動畫原則介紹

2)結(jié)合案例應用原則

3)流程方法論沉淀

4)結(jié)語








01: 擠壓與伸展

擠壓與伸展是我們最常用的運動技巧。使用擠壓與拉伸來強調(diào)物體的質(zhì)感、重量、速度。擠壓和拉伸會給予物體運動時具備質(zhì)量感和體積感的錯覺。例如當一個皮球正在進行下落運動,在運動過程中讓皮球體積產(chǎn)生一定拉伸來表現(xiàn)它的速度感,皮球落地后則因力的作用產(chǎn)生擠壓變形。






技巧建議

擠壓與伸展的幅度影響著物體的質(zhì)感、重量。設計師們可根據(jù)物體的質(zhì)感去決定擠壓伸展的幅度。動畫雖存在夸張性,但對于物體擠壓拉伸的體積盡可能保持視覺統(tǒng)一,避免較大的體積誤差導致運動的突兀。











02: 預期動作

預期動作可告知觀者物體運動即將發(fā)生,增強觀者的場景代入感,使運動更加生動真實。如果我們?nèi)コ捌诘念A備過程物體所呈現(xiàn)的運動感知像是突然被前方磁鐵所吸引。






技巧建議

預期動作可對觀者視線進行引導,設計師可以根據(jù)預期動作所引導的方向來銜接鏡頭/場景的轉(zhuǎn)場。反之預期動作也可以用來欺騙觀眾,當用戶預期與畫面不符時也可增加動畫舞臺的趣味性。








03: 演出方式

每個角色/運動元素在運動過程中都會流露出獨特的態(tài)度和氣質(zhì)。針對不同的角色/元素的運動特性運用不同的運鏡、表演技巧、時間節(jié)奏以及舞臺的編排技巧,傳遞貼合角色/元素氣質(zhì)的動態(tài)感知。








04: 持續(xù)動作與關鍵動作

在現(xiàn)今動畫工作流程中,考慮到流程效率及技巧利弊,我們可以使用兩者相互結(jié)合的方式。關鍵動作描述的是設計師們熟知的關鍵幀動畫的方式(類似AE)。在動畫設計前進行基本運動的關鍵動作提煉,再進行細化,一層層的遞進。底層的關鍵運動越完善,在后續(xù)添加細節(jié)時才不會耗費大量時間調(diào)整。而對于持續(xù)動作(逐幀動畫)的技巧,我們可以利用它處理一些復雜效果例如(涉及到運動空間的變化、形狀上的靈動變化等)。






1)持續(xù)動作(Frame by Frame)

逐幀動畫。

優(yōu)點:自由且流暢的動態(tài)。

缺點:難以把控時間長短、體積大小。


2)關鍵動作(Key Frame)

關鍵幀動畫。

優(yōu)點:清晰、可靠、規(guī)范。

缺點:修改成本略高。









05: 跟隨與重疊動作

跟隨動作指的是元素運動結(jié)束后不會立刻停止,會因為質(zhì)量、慣性等因素,元素會慢慢進行振動減幅的過程。重疊動作則指的是運動不會同一時間發(fā)生,主體與附屬部分的運動會因質(zhì)感、外力等因素產(chǎn)生不同的速率。






技巧建議

1)表達運動的力量、速度感

當一個人跳躍的時候,自身的衣帽等附屬物也會隨之擺動。跟隨&重疊動作反應著運動的力量感和速度感,利用好跟隨與重疊動作,可以更好地表現(xiàn)角色/元素主要動作/運動。當主要動作/運動力量大、速度快的時候,跟隨與重疊的物體運動幅度大,反之則運動幅度小。









06: 緩動

真實世界的運動遵循著緩動運動的規(guī)律,而并非勻速運動。根據(jù)物體運動情況、動態(tài)質(zhì)感去編排元素合適的運動速率。關于運動的速率編排相關內(nèi)容,可以看看過往的文章-《動效的質(zhì)感》。








07: 弧形運動

仔細觀察可發(fā)現(xiàn)自然界中的運動多為弧形運動的組合,而勻速運動只存在于機械運動中。






技巧建議

1) 弧形運動路徑

角色動畫:

在人物運動過程中使用弧形運動增添角色動畫表現(xiàn)力。比如當人物抬頭或轉(zhuǎn)頭時,通過弧度的變化映射人物的情感,是充滿好奇心的還是沮喪的。


交互動效:

在交互動效中,弧形運動路徑會給予觀者運動表現(xiàn)力較年輕活潑的感知隱喻。設計師可根據(jù)品牌調(diào)性及產(chǎn)品屬性去選擇運動路徑類型。









08: 附屬動作

當主體在運動時,設計師可通過附屬物運動來輔助表達主體運動氣質(zhì)。比如人物敲門時,捏緊拳頭的敲(代表生氣)與翹起蘭花指敲的(代表精致)區(qū)別。








09: 時間控制

在上篇文章其實我們有提到影響動效質(zhì)感的原因之一就是時間,控制好物體的運動時間也是表現(xiàn)良好動畫節(jié)奏感的關鍵。








技巧建議

1) 時間偏差(角色動畫側(cè))

使用「時間偏差」的技巧,可以讓你的動畫更加生動。因為受力、質(zhì)感等因素影響,主體運動時附屬部分的運動不會同時發(fā)生。比如當人物正在打哈欠時,首先是從嘴巴發(fā)力,再擴散至五官眉毛。






2) 時間偏差(體驗動效側(cè))

為保持動效的連續(xù)性以及營造自然流暢的交互體驗,適當?shù)氖褂脮r間偏差,可避免動效元素變化過程出現(xiàn)空檔期,提升信息傳遞效率減少認知負荷。








10: 夸張

通過夸張手法增添動畫表現(xiàn)張力,加強運動元素的吸引力令動畫更有代入感和戲劇性。








11: 多維表現(xiàn)

動畫設計時可通過營造鏡頭透視感、景深感模擬真實的空間感打破二維扁平視覺效果,提升畫面表現(xiàn)力。








12: 吸引力

一部好的動畫作品一定會有令人吸引的人事物,比如動態(tài)氣質(zhì)或視覺風格等它們都能很好的吸引觀眾。除此之外,如何講好一個故事,通過趣味幽默的故事表達手法也可以增添動畫的吸引力。








原則歸類

通過對十二大基本原則的學習,我將技巧分為以下兩大類:設計技巧和表演技巧。

設計技巧:動畫設計的技法,增添動畫細節(jié)令動畫表現(xiàn)更生動自然。

表演技巧:舞臺表演的技巧,提升動畫舞臺全局的表現(xiàn)力。












結(jié)合案例

接下來我們結(jié)合上述所提及的動畫原則,根據(jù)實際案例進行結(jié)合應用。一起來探討下當接到動效設計需求時,我們需要思考哪些點?才能使我們的動效表現(xiàn)力更上一層樓。








腳本背景

假設在項目中我們需要對設計元素(豬豬存錢罐)添加動效以提示用戶已省錢成功的情感氛圍。設計前我們先來分析下元素以什么動態(tài)/動作表現(xiàn)會更貼合元素性格。考慮到豬豬的可愛屬性,采用了跳躍的運動方式。并擬定了跳躍后天上落下金幣的動畫腳本。








動態(tài)分析

將腳本確定后,我們在腦海里已經(jīng)有大概的運動畫面。但在進入動效設計前,還需要明確在動畫中使用哪些動畫原則來提升動畫生動性。








應用技巧

在添加動畫細節(jié)前,我分享下在項目中經(jīng)常用到的兩個技巧。


1) 實現(xiàn)擠壓與伸展的多種形式

實現(xiàn)擠壓與伸展的方式有很多種,最常見的是直接改變物體的縮放比例或形狀路徑來實現(xiàn)。但在設計項目中我們往往會遇到非矢量的設計元素,利用xxx可實現(xiàn)圖層的彎曲扭曲等變形效果。






2) 考慮運動物體質(zhì)感

質(zhì)地堅硬的物體受外力的影響較小,質(zhì)地柔軟的物體受外力的影響較大。而像豬豬這類柔軟的物體在恢復靜止吋肉肉會有一個跟隨&重疊動作(抖動)。在處理這類抖動的效果除了使用常規(guī)的彈性表達式外還可配合使用AE的 CC bend it 效果增加形變細節(jié)令物體運動更為生動自然。








差異對比

當我們?nèi)コ@些動畫原則后,再去作對比明顯的感知差異就出來了。








經(jīng)驗沉淀

根據(jù)過往項目經(jīng)驗,我總結(jié)了動效/動畫設計的流程思路。從業(yè)務目標的分析到動畫腳本的確定,層層遞進。前期的目標和框架確定后,之后進行動畫原則的梳理及最后的動效輸出。設計師們不妨在項目中嘗試上述的流程思路及原則技巧,將自身動畫的表現(xiàn)力提升一個檔次。








結(jié)語

隨著動畫/動效的落地方式愈來愈完善,像Lottie、svga等新型的動畫落地形式所帶來的高品質(zhì)畫面呈現(xiàn)。設計師們不能滿足于動畫僅僅只是動那么簡單,如何去塑造生動的動畫形象還有不少我們需要考慮的細節(jié)。恰好前人總結(jié)了相應的原則技巧,幫助我們站在巨人的肩膀上看得更遠。除《The illusion of life:Disney Animation》外,近期也在閱覽《動畫師的生存手冊》里面涵蓋了不少關于角色動畫的運動技巧及細節(jié)。其中部分技巧并不局限于角色動畫的設計中,下期文章我將分享關于角色動畫的知識沉淀內(nèi)容。



作者:Fiasc1         來源:站酷
藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設計m.820esy.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司









分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.820esy.cn

存檔