前言

前人已經(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è)計技巧是增添動畫細節(jié)的方法，可以用這些原則讓動畫更有細節(jié)更生動。

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

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

 

 01 擠壓和拉伸

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

 

02 預(yù)期動作

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

 

03 跟隨與重疊動作

【跟隨與重疊動作】這個技巧也是表達運動速度和物體質(zhì)感的重要技巧之一。

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

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

 

04 緩動速度曲線

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

 

05 控制時間偏差

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

 

06 弧形運動軌跡

【弧形運動軌跡】當自然運動的物體運動時都會受到引力的影響，簡單解釋就是速度越快弧線越平滑，移動距離越遠。速度越慢弧線越彎曲，移動距離也越近。

 

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

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

 

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

 

這個是直播間福袋倒計時五秒開獎時播放的動畫，目標是為了告訴用戶福袋即將開獎，同時在這五秒內(nèi)拉升福袋的價值感，提高福袋的參與率。

 

確定好動效的目標后，就要圍繞這個目標對動畫進行拆解。

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

 

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

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

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

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

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

 

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

 

先拆解動畫，再分析需要運用到的動畫原則。這里主要說下不同點，第二步中用到了“弧形運動”的原則?！ず袊姵龅牟蕩Ш托切菚小煌摹俣?，速度快的元素運動的路徑會比速度慢的更平滑一些。

 

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

 

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

 

04. 段位勛章 降段動畫

 

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

 

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

 

原文地址：站酷 

作者：HEBBEN軒