前言

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

 

目錄

 

這次分享分為三個(gè)內(nèi)容，第一個(gè)是介紹一下動(dòng)畫設(shè)計(jì)的“十二大原則”是什么？；第二部分是結(jié)合幾個(gè)案例說明如何將這些原則運(yùn)用到具體的項(xiàng)目中去的。最后就是動(dòng)效設(shè)計(jì)流程的一個(gè)總結(jié)。

 

【1】動(dòng)畫設(shè)計(jì)技巧

如上圖；動(dòng)畫的十二大原則又可以拆分為兩類，動(dòng)畫設(shè)計(jì)技巧和動(dòng)畫表現(xiàn)技巧。

第一部分設(shè)計(jì)技巧是增添動(dòng)畫細(xì)節(jié)的方法，可以用這些原則讓動(dòng)畫更有細(xì)節(jié)更生動(dòng)。

第二部分表現(xiàn)技巧是提升整個(gè)動(dòng)畫在畫面中全局表現(xiàn)力的，這個(gè)主要是多用在動(dòng)畫里。

在產(chǎn)品動(dòng)效設(shè)計(jì)中還是常用到設(shè)計(jì)技巧，所以這次著重分享設(shè)計(jì)技巧這一部分。

 

 01 擠壓和拉伸

【擠壓和拉伸】是動(dòng)效設(shè)計(jì)中最常用到的設(shè)計(jì)技巧。使用擠壓和拉伸來強(qiáng)調(diào)物體的質(zhì)感、重量、速度。我們可以根據(jù)物體的質(zhì)感去決定擠壓伸展的具體幅度?？梢院芎玫谋磉_(dá)出不同物體的不同質(zhì)感。這里需要注意的是，物體擠壓拉伸的面積盡可能保持視覺統(tǒng)一。以免動(dòng)畫前后造成不協(xié)調(diào)。

 

02 預(yù)期動(dòng)作

【預(yù)期動(dòng)作】可讓用戶感知到該物體即將發(fā)生運(yùn)動(dòng)，以及具體運(yùn)動(dòng)的方式和方向。讓用戶對(duì)動(dòng)畫效果有一個(gè)提前的預(yù)判不會(huì)太突兀。也可以根據(jù)預(yù)期動(dòng)作去引導(dǎo)用戶的視線。比如起跳時(shí)雙腿先要彎曲，踢球向前射門時(shí)腿要向后擺動(dòng)。所以在動(dòng)效設(shè)計(jì)中我們運(yùn)用好預(yù)期動(dòng)作會(huì)讓用戶做好心理準(zhǔn)備，讓這個(gè)動(dòng)畫更加真實(shí)。

 

03 跟隨與重疊動(dòng)作

【跟隨與重疊動(dòng)作】這個(gè)技巧也是表達(dá)運(yùn)動(dòng)速度和物體質(zhì)感的重要技巧之一。

跟隨簡單說舉個(gè)例子就是揮棒球棒，棒球棒是手帶動(dòng)棒球棒轉(zhuǎn)動(dòng)，當(dāng)手停止發(fā)力時(shí)，棒球棒不會(huì)立刻停止，會(huì)隨著發(fā)力的方向擺動(dòng)減幅，直到完全停止。擺動(dòng)的幅度和持續(xù)時(shí)間會(huì)根據(jù)不同的力量及速度進(jìn)行相應(yīng)的調(diào)整。

重疊動(dòng)作就是想象棒球棒如果是橡膠材質(zhì)的，那么揮舞棒球的時(shí)候就會(huì)有一定程度的彎曲，所以速度越快，材質(zhì)越軟，彎曲程度也會(huì)越大。

 

04 緩動(dòng)速度曲線

【緩動(dòng)速度曲線】動(dòng)效設(shè)計(jì)中最離不開的參數(shù)。不同的速度曲線也會(huì)給人不一樣的感受，運(yùn)動(dòng)曲線較陡會(huì)感覺元素的質(zhì)量更重沖擊感更強(qiáng)，比如適用于我們競爭向的場(chǎng)景中。反之較平緩的曲線元素運(yùn)動(dòng)則較為輕盈。更適用于我們關(guān)系向的場(chǎng)景。

 

05 控制時(shí)間偏差

【控制時(shí)間偏差】運(yùn)動(dòng)物體的主要運(yùn)動(dòng)和附屬運(yùn)動(dòng)不會(huì)同時(shí)發(fā)生，用時(shí)間偏差，會(huì)讓動(dòng)畫更加真實(shí)自然。也可避免動(dòng)效過程出現(xiàn)空檔期，或者一次性出現(xiàn)過多的元素，增加認(rèn)知負(fù)荷。信息離場(chǎng)時(shí)則需要快速高效，不需要人為的制造信息偏差。

 

06 弧形運(yùn)動(dòng)軌跡

【弧形運(yùn)動(dòng)軌跡】當(dāng)自然運(yùn)動(dòng)的物體運(yùn)動(dòng)時(shí)都會(huì)受到引力的影響，簡單解釋就是速度越快弧線越平滑，移動(dòng)距離越遠(yuǎn)。速度越慢弧線越彎曲，移動(dòng)距離也越近。

 

【2】結(jié)合案例應(yīng)用

下面就舉幾個(gè)案例，這些原則在具體工作中的應(yīng)用。

 

01福袋：短觸區(qū)引導(dǎo)動(dòng)畫 

 

這個(gè)是直播間福袋倒計(jì)時(shí)五秒開獎(jiǎng)時(shí)播放的動(dòng)畫，目標(biāo)是為了告訴用戶福袋即將開獎(jiǎng)，同時(shí)在這五秒內(nèi)拉升福袋的價(jià)值感，提高福袋的參與率。

 

確定好動(dòng)效的目標(biāo)后，就要圍繞這個(gè)目標(biāo)對(duì)動(dòng)畫進(jìn)行拆解。

• 【第一步】是預(yù)備動(dòng)作，在進(jìn)行主要的動(dòng)畫之前需要有一個(gè)較強(qiáng)的視覺引導(dǎo)，讓用戶提前注意到福袋接下來會(huì)會(huì)有動(dòng)作發(fā)生，這里采用的方式是抖動(dòng)。
• 【第二步】是體現(xiàn)價(jià)值感，這里采用的是金色粒子加發(fā)光的效果。
• 【第三步】倒計(jì)時(shí)結(jié)束福袋準(zhǔn)備離場(chǎng)。

 

動(dòng)畫步驟拆解完后就分析每一步動(dòng)畫需要用到的動(dòng)畫原則。比如第一步的抖動(dòng)引起用戶注意的同時(shí)下一步就需要噴出粒子，所以在抖動(dòng)的這一步就要增加一個(gè)預(yù)期動(dòng)作。在這里設(shè)計(jì)了兩個(gè)預(yù)期動(dòng)作：一個(gè)是粒子向右上角噴出，所以預(yù)期動(dòng)作設(shè)計(jì)成向左下角提前移動(dòng)收起，同時(shí)給下一步的粒子動(dòng)畫留出足夠的空間出現(xiàn)。第二個(gè)是收緊口袋，為下一步的打開做準(zhǔn)備。

然后福袋的繩子也會(huì)跟著福袋運(yùn)動(dòng)，這里用到了“跟隨與重疊動(dòng)作”和“附屬運(yùn)動(dòng)”，因?yàn)槔K子材質(zhì)比較軟，所以抖動(dòng)頻率和幅度設(shè)計(jì)的時(shí)候都會(huì)相應(yīng)的增加一些。

第二步動(dòng)畫當(dāng)福袋打開時(shí)有一個(gè)“擠壓和拉伸”的效果，一個(gè)是為了表現(xiàn)福袋的材質(zhì)，再一個(gè)是為了體現(xiàn)福袋突然打開的速度感。

最后一步就是噴完粒子后的消失動(dòng)畫，這里加了一個(gè)位置移動(dòng)的‘預(yù)期動(dòng)作。然后在配合速率較快的緩動(dòng)曲線最后完成  消失。

可以看一下運(yùn)用動(dòng)畫原則之前和之后的對(duì)比，這個(gè)沒有用動(dòng)畫原則的案例會(huì)有明顯的頓挫感，整體動(dòng)畫不夠自然，就會(huì)顯得動(dòng)畫呆呆的。嗯。那這個(gè)用了動(dòng)畫原則之后整體動(dòng)畫會(huì)顯得比較流暢，中間也沒有空檔期。這里說一下，基本上每個(gè)動(dòng)畫都會(huì)用到前面說的時(shí)間偏差控制來調(diào)整節(jié)奏，所以就沒有在案例里單獨(dú)列出來。

 

02. 盲盒：盲盒游戲引導(dǎo)入口動(dòng)畫

 

先拆解動(dòng)畫，再分析需要運(yùn)用到的動(dòng)畫原則。這里主要說下不同點(diǎn)，第二步中用到了“弧形運(yùn)動(dòng)”的原則?！ず袊姵龅牟蕩Ш托切菚?huì)有‘不同的’速度，速度快的元素運(yùn)動(dòng)的路徑會(huì)比速度慢的更平滑一些。

 

03. 拼圖：拼圖游戲引導(dǎo)入口動(dòng)畫

 

由于拼圖本身造型比較單一，材質(zhì)也相對(duì)偏硬。所以不好在拼圖本身上去做動(dòng)畫。然后這里處理的方式是利用光感帶出一個(gè)縮放的效果來進(jìn)行視覺上的引導(dǎo)。這里同樣控制了時(shí)間的偏差。先通過光感帶動(dòng)拼圖禮物放大提供一個(gè)拍下去的預(yù)期動(dòng)作。然后拍下去的同時(shí)掃光到邊緣處立刻釋放粒子，達(dá)到視覺上的同步。

 

04. 段位勛章 降段動(dòng)畫

 

這個(gè)案例是段位勛章的降段動(dòng)畫，前幾個(gè)例子中動(dòng)畫的元素材質(zhì)都偏軟。所以這個(gè)案例主要是想對(duì)比一下材質(zhì)比較硬的表現(xiàn)樣式。

 

最后就簡單總結(jié)一下動(dòng)效設(shè)計(jì)的方法。一共拆解為四步，首先確定好需求方的目標(biāo)和預(yù)期。然后再進(jìn)行具體的腳本步驟的拆分，然后再聚焦到每一步需要用的的動(dòng)畫原則。最后再開始動(dòng)效設(shè)計(jì)。設(shè)計(jì)前對(duì)需求進(jìn)行充分的思考，讓動(dòng)效在助理業(yè)務(wù)發(fā)展的同時(shí)也能夠做到有理有據(jù)。

 

原文地址：站酷 

作者：HEBBEN軒