導(dǎo)讀：迪士尼動畫經(jīng)久不衰妄辩，動效設(shè)計作為一個年輕的設(shè)計門類可以從中吸取到哪些經(jīng)驗？本文將對迪士尼動畫設(shè)計的原則進(jìn)行解讀山上，總結(jié)歸納其中的規(guī)律眼耀，從全新的角度來看待動效設(shè)計這件事。

生命的幻象

動畫具有神奇的力量佩憾，它通過營造一個虛擬世界哮伟，讓觀眾沉溺其中，與卡通人物產(chǎn)生情感共鳴妄帘。動畫跨越了語言的障礙澈吨，可與任何地域的人們進(jìn)行交流，直抵人心寄摆。這其中有什么奧秘?我們可以通過迪士尼動畫一探究竟。

偉大的藝術(shù)都是由人創(chuàng)造的修赞。動畫設(shè)計師是卡通人物的塑造者婶恼，他們賦予了卡通人物生命力，讓角色自身具有思想柏副，并讓夢幻變成現(xiàn)實勾邦。在迪斯尼早期有9位重要的動畫委員會成員，史稱「迪士尼九老」（Disney's Nine Old Men）割择。作為核心創(chuàng)作人員他們影響著迪士尼動畫的發(fā)展趨勢以及娛樂風(fēng)格眷篇，他們經(jīng)驗豐富，技法精湛荔泳，讓「移動的畫面變成了令人感動的畫面」蕉饼。

9位元老把原始的動畫理論進(jìn)行了提煉虐杯、完善和延伸，并由弗蘭克·托馬斯（Frank Thomas）和奧利·瓊斯頓（Ollie Johnston）將這些寶貴的經(jīng)驗集結(jié)成了《生命的幻象》一書昧港，由于其崇高的地位擎椰，這本書被稱為「動畫藝術(shù)的圣經(jīng)」。書中提出了12條動畫設(shè)計師在創(chuàng)作時需要遵循的基本原理创肥，指出動畫要提供必要的視覺線索达舒，讓觀眾了解某個動作的前因后果；在動畫中要進(jìn)行真實但不尋常的形變叹侄，動畫要足夠的有吸引力并引發(fā)共鳴巩搏，這就是著名的迪士尼動畫十二原則。

迪士尼動畫十二原則

1. 擠壓與拉伸 Squash and Stretch

當(dāng)力作用于物體時趾代，它們將產(chǎn)生一定的變形贯底。擠壓表現(xiàn)為物體形狀的壓縮，拉伸變現(xiàn)為物體形狀的延長稽坤。擠壓與拉伸可用于表現(xiàn)物體的速度丈甸、動量、重量與體積尿褪，使得物體本身看起來有彈性睦擂、有質(zhì)量、富有生命力杖玲。在運用此條原則時要注意保持物體體積的一致性顿仇，物體可能被拉長或壓縮，但是物體的體積保持不變摆马。當(dāng)用于表現(xiàn)卡通人物的表情時臼闻，可以使其更加生動。

例：在UI設(shè)計中擠壓和拉伸用來描述目標(biāo)對象的剛性和質(zhì)量囤采，定義對象的物理屬性述呐。特定元素的形態(tài)變化會帶給人更加生動的感受。例如蕉毯，Path首頁下拉時乓搬，小水滴發(fā)生的擠壓與拉伸變化成為了Path重要的品牌元素。

2代虾、預(yù)備動作 Anticipation

預(yù)備動作是指為即將發(fā)生的動作提供線索和信息进肯，讓觀眾知道什么即將發(fā)生，從而更好的融入到劇情之中棉磨。例如一個人在起跳時會通過下蹲來積蓄能量江掩，這時下蹲就成了起跳的預(yù)備動作。沒有預(yù)兆的動作會讓觀眾不知所措，充滿疑惑环形。沒有預(yù)備動作鋪墊的任何動作都會失去活力策泣。

例：在UI設(shè)計中可以對一些要動的對象以及編排場景的部件提供引導(dǎo)與暗示。最有代表性的案例就是iPhone相機(jī)打開時的對焦動畫：

1.對焦框由外向內(nèi)出現(xiàn)斟赚，表明相機(jī)正在努力聚焦中? 2.?聚焦框閃爍着降，表明鎖定聚焦和曝光? 3.聚焦框消失，提示用戶可以拍攝? 這個預(yù)備動作提醒用戶相機(jī)做了什么拗军，以及用戶什么時候可以進(jìn)行拍照任洞。

在DU Battery Saver的頁面設(shè)計中，也融入了此設(shè)計原則发侵。在手機(jī)出現(xiàn)問題時交掏，通過背景變色，展示問題項的方式將問題暴露刃鳄，同時主動提供解決方案盅弛，簡單易懂易于操作。

3叔锐、演出布局 Staging

布局是指以一種觀眾容易理解的方式展示動作或?qū)ο笈才簟赢嬛械拿恳粋€鏡頭的構(gòu)圖、運鏡愉烙、動作讨盒、走位都需要仔細(xì)的設(shè)計與安排，讓動作簡單明了的表現(xiàn)出來步责。

在進(jìn)行布局設(shè)計時需要避免兩種常見的錯誤：

1.出場順序錯亂

▲?正確的出場順序

2.干擾元素過多

▲ 去除干擾元素

例：在進(jìn)行UI設(shè)計時返顺，需要將有層次、有順序的展示設(shè)計元素蔓肯，通過過渡動效將用戶的注意力引導(dǎo)到正確的位置（重要的內(nèi)容或交互重點）遂鹊，避免偏離主線。

4.順畫法與定點畫法 Straight Ahead Action and Pose to Pose

在動畫設(shè)計中蔗包，有兩種重要的設(shè)計方法：順畫法和定點畫法秉扑。

順畫法是將動作從第一張開始，依照順序畫到最后一張调限，通常是制作較簡易的動態(tài)邻储。順畫法的優(yōu)點可以充分發(fā)揮動畫設(shè)計師的想象力，缺點是具有很大的不確定性旧噪，只有完成最后一個動作后才能了解最終效果如何，通常用于符合物理脓匿、運動規(guī)律的場景表現(xiàn)淘钟。

?▲ 缺點是具有很大的不確定性，只有完成最后一個動作后才能了解最終效果如何??

▲?優(yōu)點可以充分發(fā)揮動畫設(shè)計師的想象力（通常用于符合物理陪毡、運動規(guī)律的場景表現(xiàn)）

定點畫法是將動作拆解成一些重要的定格動作米母，然后補上中間的間補動畫勾扭，產(chǎn)生動態(tài)的效果，通常用于表現(xiàn)較復(fù)雜的動作铁瞒，適用場景更加廣泛妙色。

在UI設(shè)計中，大部分的移動端動效都可以用戶定點畫法繪制慧耍，少數(shù)復(fù)雜且不常規(guī)的運動動效可以選擇順畫法進(jìn)行表現(xiàn)身辨，例如Siri的使用動畫。

5.跟隨動作與重疊動作 Follow Through and Overlapping Action

沒有任何一個物體會突然停止芍碧，物體的運動是一個部分連著一個部分的煌珊。運動的動作大致可分為跟隨動作和重疊動作兩類。

跟隨動作是指物體因為慣性泌豆，在突然停止時會圍繞質(zhì)心呈現(xiàn)出不同幅度的振動定庵，例如《貓和老鼠》中Tom踩到拖把被擊中時的振顫。跟隨動作可以讓物體運動更真實踪危。

UI設(shè)計中跟隨動作可以使動畫保持一致并在可控范圍內(nèi)協(xié)調(diào)運動蔬浙。

重疊動作是指身體的關(guān)節(jié)按照不同的速率運動，產(chǎn)生分離重疊的時間差與夸張的造型贞远。例如畴博，卡通人物高速運動時，身體其他部分的「拖動」效果兴革。重疊動作可以讓物體運動輕松有趣绎晃。

重疊動作可以體現(xiàn)UI控件之間的層級關(guān)系，并為動畫設(shè)置優(yōu)先級杂曲。

在喚出DU Battery Saver的側(cè)邊欄時庶艾，運用跟隨和重疊的效果，使頁面切換更加真實擎勘、柔和咱揍。

6.緩入與緩出 Slow In and Slow Out

物體從靜止到移動是漸進(jìn)加速，移動到靜止則是漸進(jìn)減速棚饵。若以等速度方式開始或者結(jié)束動作煤裙，會給人一種機(jī)械感，缺乏活力噪漾，例如機(jī)器人總是以勻速運動硼砰。在動畫中遵循物理規(guī)律可以讓用戶更加舒適。

由于不斷減速的物體會吸引人們的注意力欣硼，不斷加速的對象會讓人失去注意力题翰，因此UI設(shè)計中進(jìn)入動畫要先快后慢，離開動畫要先慢后快。??

7.弧形軌跡 Arc

具有生命的物體會以自然的弧形方式呈現(xiàn)運動豹障，機(jī)械式的物體則會呈現(xiàn)出僵硬的直線運動冯事。給卡通人物的動作增加弧度，可以讓整個動作更加流暢自然血公。

在UI設(shè)計中除了X軸昵仅，Y軸方向的弧形軌跡，Z軸上的弧線運動有助于不同層級的區(qū)分累魔，例如翻頁效果摔笤。

DU Battery Saver 手機(jī)降溫動畫中雪花的降落方式，也應(yīng)用了Y軸方向的弧形運動薛夜，通過模擬雪花隨風(fēng)飄落的效果籍茧，讓整個降溫動畫更加生動形象。

8.次要動作 Secondary Action

次要動作是依附在主要動作之下的細(xì)微動作梯澜，可以使角色更加生動真實寞冯，具有生命力。次要動作是強化主要動作的關(guān)鍵晚伙，具有畫龍點睛的效果吮龄。

例如，如果想表現(xiàn)食物的美味咆疗，除了在吃這個主要動作漓帚，我們還可以增加舔嘴唇，閉上眼睛慢慢品味這些次要動作午磁，通過更加形象的動作來表現(xiàn)主題尝抖。

在UI設(shè)計中，要選擇對用戶理解最重要的動畫優(yōu)先展示迅皇，并用輔助動畫進(jìn)行潤色昧辽，需要注意的是不要讓輔助動畫蓋過主要動畫。

DU Battery Saver的手機(jī)充電動畫登颓，為了形象的表現(xiàn)出整個充電過程搅荞，添加了很多的細(xì)節(jié)，比如水波紋運動時濺起的小水滴框咙，讓整個充電動畫充滿活力咕痛。

9.時間節(jié)奏 Timing

時間節(jié)奏是指完成一個動作的速度，是動畫的靈魂喇嘱。同一動作的速度變化會呈現(xiàn)出不同的效果茉贡。

例如用兩個鏡頭來表現(xiàn)擺頭這個動作，如果無中間幀者铜，動畫效果為動畫角色的頭部瞬間切換腔丧，似乎受到了巨大的沖擊构蹬；??

如果有五個中間幀，動畫效果動畫角色輕搖一下頭悔据，似乎在說，「快俗壹！」

如果有十個中間幀科汗，動畫效果為動畫角色緩緩地?fù)u頭，似乎睡覺落枕绷雏，脖子酸痛头滔。

在UI設(shè)計中，時間節(jié)奏的控制主要是速度曲線涎显，不同的速度曲線會賦予元素完全不同的效果坤检。

10.夸張 Exaggeration

夸張是指用具有想象力的形式來展示真實的內(nèi)容，通過真實但不尋常的幅度變化期吓，可以加強角色的動作早歇、姿勢和表情的視覺效果。

在動畫中可通過延長時間和增大幅度的方式進(jìn)行夸張讨勤，例如通過增大擊球的幅度和延長擊球的時間可以讓整個擊球動作表現(xiàn)得更有張力箭跳。

在UI設(shè)計中，夸張可以讓動畫表現(xiàn)得活潑有趣潭千。例如macOS的窗口最小化動畫谱姓，夸張且生動地表現(xiàn)了整個形變過程。

11. 實體繪圖 Solid Drawing

實體繪圖是指通過體積感刨晴、重量屉来、平衡、光影等手段創(chuàng)造一個具有三維感覺的動畫角色狈癞，并使其具有個性魅力茄靠。體積，重量和平衡是立體三維設(shè)計的基本所在亿驾。動畫設(shè)計中通常通過360°繪制嘹黔、透視畫法、增加細(xì)節(jié)和增加不對稱性的方法來塑造飽滿生動的造型莫瞬。

實體繪圖這一原則在UI設(shè)計領(lǐng)域的絕佳體現(xiàn)就是Material Design儡蔓。Material Design通過光影效果來表現(xiàn)三維空間的層級關(guān)系，引導(dǎo)用戶建立起對數(shù)字產(chǎn)品的使用邏輯疼邀。

DU Battery Saver作為一個工具類產(chǎn)品喂江，有很多抽象功能，為了便于用戶理解旁振，設(shè)計師把這些抽象概念轉(zhuǎn)換為用戶常見的具體形象获询，運用實體繪圖這一原則涨岁，拉近和用戶之間的距離，降低了理解成本吉嚣。

12.吸引力 Appeal

吸引力是指通過表現(xiàn)出角色的個性梢薪，讓用戶產(chǎn)生心靈上的愉悅。具有吸引力的角色總能夠吸引觀眾的眼球尝哆，在其和觀眾之間建立某種聯(lián)系秉撇。有吸引力的角色不一定是好看的，但一定是有趣的秋泄。

在動畫設(shè)計中有三種方法可以角色形象更加鮮明琐馆，提升吸引力：

1.讓形狀更鮮明

2.讓比例更突出

3.讓形象更簡潔

吸引力是一個綜合性的概念，需要從多方面進(jìn)行滿足恒序。在UI設(shè)計中則可以通過有趣瘦麸、有愛的形象或者動效來調(diào)用用戶情緒，通過鮮明的品牌元素或情感故事給用戶留下深刻印象歧胁。

DU Battery Saver桌面快捷清理功能的設(shè)計滋饲，通過飛舞的綠色小葉子，給人一種清新与帆、潔凈的感覺了赌，引人注目。

以上就是迪士尼動畫十二原則：

1.擠壓與拉伸

2.預(yù)備動作

3.演出布局

4.順畫法與定點畫法

5.跟隨動作與重疊動作

6.緩入與緩出

7.弧形軌跡

8.次要動作

9.時間節(jié)奏

10.夸張

11.實體繪圖

12.吸引力