前言
前人已經(jīng)總結(jié)了讓動畫生動的技巧，早在1981年由兩位迪士尼動畫師所撰寫的《The illusion of life:Disney Animation》一書就提到了動畫的12項基本法則，該法則也是受用至今。法則雖是針對傳統(tǒng)動畫而制定，但對于我們?nèi)粘Ｐ枨笾兴佑|的動效/動畫需求也同樣受用。
目錄
這次分享分為三個內(nèi)容，第一個是介紹一下動畫設(shè)計的“十二大原則”是什么？；第二部分是結(jié)合幾個案例說明如何將這些原則運用到具體的項目中去的。最后就是動效設(shè)計流程的一個總結(jié)。
【1】動畫設(shè)計技巧
如上圖；動畫的十二大原則又可以拆分為兩類，動畫設(shè)計技巧和動畫表現(xiàn)技巧。
第一部分設(shè)計技巧是增添動畫細(xì)節(jié)的方法，可以用這些原則讓動畫更有細(xì)節(jié)更生動。
第二部分表現(xiàn)技巧是提升整個動畫在畫面中全局表現(xiàn)力的，這個主要是多用在動畫里。
在產(chǎn)品動效設(shè)計中還是常用到設(shè)計技巧，所以這次著重分享設(shè)計技巧這一部分。
01 擠壓和拉伸
【擠壓和拉伸】是動效設(shè)計中最常用到的設(shè)計技巧。使用擠壓和拉伸來強(qiáng)調(diào)物體的質(zhì)感、重量、速度。我們可以根據(jù)物體的質(zhì)感去決定擠壓伸展的具體幅度？梢院芎玫谋磉_(dá)出不同物體的不同質(zhì)感。這里需要注意的是，物體擠壓拉伸的面積盡可能保持視覺統(tǒng)一。以免動畫前后造成不協(xié)調(diào)。
02 預(yù)期動作
【預(yù)期動作】可讓用戶感知到該物體即將發(fā)生運動，以及具體運動的方式和方向。讓用戶對動畫效果有一個提前的預(yù)判不會太突兀。也可以根據(jù)預(yù)期動作去引導(dǎo)用戶的視線。比如起跳時雙腿先要彎曲，踢球向前射門時腿要向后擺動。所以在動效設(shè)計中我們運用好預(yù)期動作會讓用戶做好心理準(zhǔn)備，讓這個動畫更加真實。
03 跟隨與重疊動作
【跟隨與重疊動作】這個技巧也是表達(dá)運動速度和物體質(zhì)感的重要技巧之一。
跟隨簡單說舉個例子就是揮棒球棒，棒球棒是手帶動棒球棒轉(zhuǎn)動，當(dāng)手停止發(fā)力時，棒球棒不會立刻停止，會隨著發(fā)力的方向擺動減幅，直到完全停止。擺動的幅度和持續(xù)時間會根據(jù)不同的力量及速度進(jìn)行相應(yīng)的調(diào)整。
重疊動作就是想象棒球棒如果是橡膠材質(zhì)的，那么揮舞棒球的時候就會有一定程度的彎曲，所以速度越快，材質(zhì)越軟，彎曲程度也會越大。
04 緩動速度曲線
【緩動速度曲線】動效設(shè)計中最離不開的參數(shù)。不同的速度曲線也會給人不一樣的感受，運動曲線較陡會感覺元素的質(zhì)量更重沖擊感更強(qiáng)，比如適用于我們競爭向的場景中。反之較平緩的曲線元素運動則較為輕盈。更適用于我們關(guān)系向的場景。
05 控制時間偏差
【控制時間偏差】運動物體的主要運動和附屬運動不會同時發(fā)生，用時間偏差，會讓動畫更加真實自然。也可避免動效過程出現(xiàn)空檔期，或者一次性出現(xiàn)過多的元素，增加認(rèn)知負(fù)荷。信息離場時則需要快速高效，不需要人為的制造信息偏差。
06 弧形運動軌跡
【弧形運動軌跡】當(dāng)自然運動的物體運動時都會受到引力的影響，簡單解釋就是速度越快弧線越平滑，移動距離越遠(yuǎn)。速度越慢弧線越彎曲，移動距離也越近。
【2】結(jié)合案例應(yīng)用
下面就舉幾個案例，這些原則在具體工作中的應(yīng)用。
01福袋：短觸區(qū)引導(dǎo)動畫
這個是直播間福袋倒計時五秒開獎時播放的動畫，目標(biāo)是為了告訴用戶福袋即將開獎，同時在這五秒內(nèi)拉升福袋的價值感，提高福袋的參與率。
確定好動效的目標(biāo)后，就要圍繞這個目標(biāo)對動畫進(jìn)行拆解。
- 【第一步】是預(yù)備動作，在進(jìn)行主要的動畫之前需要有一個較強(qiáng)的視覺引導(dǎo)，讓用戶提前注意到福袋接下來會會有動作發(fā)生，這里采用的方式是抖動。
- 【第二步】是體現(xiàn)價值感，這里采用的是金色粒子加發(fā)光的效果。
- 【第三步】倒計時結(jié)束福袋準(zhǔn)備離場。
動畫步驟拆解完后就分析每一步動畫需要用到的動畫原則。比如第一步的抖動引起用戶注意的同時下一步就需要噴出粒子，所以在抖動的這一步就要增加一個預(yù)期動作。在這里設(shè)計了兩個預(yù)期動作：一個是粒子向右上角噴出，所以預(yù)期動作設(shè)計成向左下角提前移動收起，同時給下一步的粒子動畫留出足夠的空間出現(xiàn)。第二個是收緊口袋，為下一步的打開做準(zhǔn)備。
然后福袋的繩子也會跟著福袋運動，這里用到了“跟隨與重疊動作”和“附屬運動”，因為繩子材質(zhì)比較軟，所以抖動頻率和幅度設(shè)計的時候都會相應(yīng)的增加一些。
第二步動畫當(dāng)福袋打開時有一個“擠壓和拉伸”的效果，一個是為了表現(xiàn)福袋的材質(zhì)，再一個是為了體現(xiàn)福袋突然打開的速度感。
最后一步就是噴完粒子后的消失動畫，這里加了一個位置移動的‘預(yù)期動作。然后在配合速率較快的緩動曲線最后完成 消失。
可以看一下運用動畫原則之前和之后的對比，這個沒有用動畫原則的案例會有明顯的頓挫感，整體動畫不夠自然，就會顯得動畫呆呆的。嗯。那這個用了動畫原則之后整體動畫會顯得比較流暢，中間也沒有空檔期。這里說一下，基本上每個動畫都會用到前面說的時間偏差控制來調(diào)整節(jié)奏，所以就沒有在案例里單獨列出來。
02. 盲盒：盲盒游戲引導(dǎo)入口動畫
先拆解動畫，再分析需要運用到的動畫原則。這里主要說下不同點，第二步中用到了“弧形運動”的原則！ず袊姵龅牟蕩Ш托切菚小煌摹俣龋俣瓤斓脑剡\動的路徑會比速度慢的更平滑一些。
03. 拼圖：拼圖游戲引導(dǎo)入口動畫
由于拼圖本身造型比較單一，材質(zhì)也相對偏硬。所以不好在拼圖本身上去做動畫。然后這里處理的方式是利用光感帶出一個縮放的效果來進(jìn)行視覺上的引導(dǎo)。這里同樣控制了時間的偏差。先通過光感帶動拼圖禮物放大提供一個拍下去的預(yù)期動作。然后拍下去的同時掃光到邊緣處立刻釋放粒子，達(dá)到視覺上的同步。
04. 段位勛章 降段動畫
這個案例是段位勛章的降段動畫，前幾個例子中動畫的元素材質(zhì)都偏軟。所以這個案例主要是想對比一下材質(zhì)比較硬的表現(xiàn)樣式。
最后就簡單總結(jié)一下動效設(shè)計的方法。一共拆解為四步，首先確定好需求方的目標(biāo)和預(yù)期。然后再進(jìn)行具體的腳本步驟的拆分，然后再聚焦到每一步需要用的的動畫原則。最后再開始動效設(shè)計。設(shè)計前對需求進(jìn)行充分的思考，讓動效在助理業(yè)務(wù)發(fā)展的同時也能夠做到有理有據(jù)。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。