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