在您的下一個網頁設計項目中使用迪士尼的 12 條動畫原則

在我打字的那一刻，我辦公室的牆壁和架子上有 17 個迪士尼的東西。 十七。 連我都感到驚訝。 儘管我喜歡所有的東西——迪士尼，但當我看他們的一部電影時，通過動畫的 12 條原則創造的魔力甚至讓我無法理解。

這就是重點。 動畫的 12 條原則是微妙的。 他們在觀眾沒有意識到的情況下給觀眾留下了印象。 它們讓我們歡笑、哭泣、同情和夢想，有時是在同一個場景中。 他們創造的角色和物體看起來和移動得如此逼真，你想要伸手去觸摸它們。 （你見過可可嗎？我休息一下。）

這 12 條動畫原則現在為所有動畫作品、迪士尼等提供了基礎。 它們也與動畫以外的領域相關，例如網頁設計。

動畫 12 條原則簡史

動畫的 12 條原則是由奧利約翰斯頓和弗蘭克托馬斯介紹的，他們是迪士尼九老漢中的兩個，他們是 1920 年代和 30 年代加入的核心動畫師群體。 約翰斯頓和托馬斯在 1981 年寫了生命的幻覺：迪士尼動畫，它仍然是動畫的“聖經”。 這本書仔細研究了迪士尼頂級動畫師提取 12 條原則的方法。 雖然這些原則最初是為手繪動畫設計的，但它們在技術變革中倖存下來，現在被計算機動畫師（如皮克斯）和網頁設計師使用。

動畫的 12 條原則以及它們如何影響網頁設計

這些原則經得起時間的考驗是有原因的。 有時，基礎仍然是最好的。

1. 壁球和拉伸

資料來源：Chris Gannon 通過 Giphy

“Squash and Stretch”是最重要的動畫原則。 它賦予動畫靈活性、重力、重量和質量。 當一個物體在運動時，它不會保持相同的形狀。

不過，音量必須保持一致。 拉伸需要使物體更薄和更長; 擠壓使它更短和更寬。 如果你只是把它做得更薄或更短，它就不會保持相同的體積。

在網頁設計中，當對象需要引人注目時，使用“Squash and Stretch”。 如果有一個物體需要看起來像它有物理質量，這個原理可以解決問題。

2. 預期

資料來源：CentoLodigiani 通過 Giphy

預期讓觀眾為即將發生的事情做好準備，它可以使最終的動作更加逼真。 你不會不先彎曲膝蓋就坐下，或者不伸出手臂就抓住什麼，對吧？ 預期讓角色或物體通過一兩個逼真的動作來提示觀眾即將發生的事情。

在網頁設計中，預期用於過渡。 例如，如果訪問者正在填寫信息框並遺漏了所需信息，則該框可能會彈跳一下以引起他們的注意並傳達“嘿，出了點問題”。 另一種使用預期的方法是稍微縮小項目，然後在懸停時使它們變大。

3. 分期

舞台引導觀眾的眼睛，這樣他們就會看你想讓他們看的地方（攝影中的“引導線”）。 淡化場景的其餘部分，以便觀眾專注於您希望他們關注的內容。 舞台的另一個組成部分是角色的每一個動作背後都有一個意圖。 如果您隔離動畫的每一幀，您將能夠說出姿勢背後的意圖。

分期是適用於網站上使用的網頁設計和視覺效果的更簡單的原則之一。 這就是在網頁上出現彈出窗口時發生的情況——彈出窗口的運動使您專注於它，而頁面的其餘部分則變得模糊、變暗或被覆蓋。 您象徵性地照亮了“舞台”中最重要的部分，而將其他一切都保留在背景中。 光影也可以用於此目的，或者網頁設計師可以簡單地通過去除不必要的細節來應用這一原則。

4. 直奔並擺出姿勢

“直線前進”和“擺姿勢”是兩種不同的動畫製作方式。 通過“直線前進”，幀從頭到尾按順序創建。 這為動畫提供了動態、流暢的運動。 使用“姿勢到姿勢”，創建第一幀和最後一幀，然後添加必要的中間姿勢。

資料來源：Vincenzo Lodigiani，動作藝術家

今天，計算機動畫使用“pose topose”，因為計算機可以自動填充缺失的幀。 查看 Chekhov 上的動畫——您可以看出它們實際上並不流暢（而且它們不應該如此）。 如果你想在你的網站上創建一個“直線前進”的動畫，你可以使用 steps() 計時函數，它允許你定義多個幀並按順序顯示它們。

5. 跟進和重疊行動

“跟隨和重疊動作”原則說，當一個角色或物體在運動然後停止時，主體的部分將以不同的速度移動和停止。 這模仿了現實生活中的物理定律。

• 重疊動作：對象的不同部分以不同的速度移動。
• 跟隨：對象的鬆散連接部分在主要對象停止移動後繼續移動幾秒鐘。 這些部分將移出停止點，然後向後拉回物體。

在下面的示例中，Rapunzel 的手臂和腿以與頭部不同的速度移動 - 這是重疊動作。 當她停止旋轉時，她的頭髮繼續擺動一秒鐘——這就是後續。

“拖動”是一種相關的技術，它發生相反的情況——物體的一部分移動，然後其餘部分追上。 所有這些技術都表現出逼真的動作或可以誇大動作以獲得滑稽效果。

“移動保持”也與此有關。 剩下的角色仍然有輕微的移動，這樣動畫就不會停滯不前。

在移動和網頁設計中，“跟進”和“重疊動作”向觀眾展示了一個動作是故意停止的。 否則，您可能會認為它只是停止工作了。 例如，看看我 iPhone 上的奇妙清單應用程序如何顯示我正在移動一個列表項。 當我移動它時，該項目會變成不同的顏色並變大，然後在我完成後恢復到原始顏色和大小。 這就是我知道動作完成的方式。

你也可以在你的 iPhone 上看到這個原則。 當您在主屏幕上切換視圖或移動圖標時，元素的移動速度略有不同。 這就是你的 iPhone 傳達的信息，“事情正在發生變化。”

6. 慢進慢出

“慢進慢出”原理指出，物體開始緩慢移動，獲得動量並加速，然後在停止時再次減速。 基本上，運動必須加速和減速才能自然。 為了達到這種效果，在動作的開始和結束處都有額外的幀來強調運動的逐漸增加和減少。

來源：Tumblr 上的生命幻覺

對於網頁設計，CSS 有兩個與此原則相關的計時功能：ease-in 和ease-out。 你可以在你的計劃，你的星球網站上看到一個例子（首先點擊“讓我們開始”）。

7. 弧形

與動畫的其他 12 條原則中的許多原則一樣，“弧線”是基於物理學的。 由於重力，物體在移動時通常會遵循某種類型的弧線。 如果它們保持筆直，運動將是機械的，而不是現實的。

這也適用於所有類型的運動，而不僅僅是低到高到低的弧線：

在網頁設計中，“弧形”原則可以通過創建弧形動畫來使用，當然，也可以通過讓元素旋轉，比如在加載期間。

8. 次要動作

次要動作強調主要動作而不會分散注意力。 它還賦予角色和對象更多維度，並為場景注入活力。 分期原則發揮作用，因為主要行動仍然是重點。

次要動作不必落在主要對象之外。 可以是角色在走路時吹口哨或通過揚起眉毛來表達情感。

在移動和網頁設計中，當元素移開為新元素騰出空間時，就會看到“次要操作”原則，例如當您重新排列 iPhone 上的應用程序時。 這可能與強調這些行動的“跟進和重疊行動”相輔相成。

9. 時機

時間安排非常簡單，它與“慢進慢出”有關。 該原則說元素應該以自然的方式始終如一地移動，就像它們在現實世界中一樣。 為了強調，他們可以故意加快或減慢。 使用的幀數將建立時間——幀數越多，動作越慢，幀數越少，動作越快。

在這個例子中，Daffy Duck 的第一個動作有自然的時機，然後最後一個動作，當他靠近觀眾時，故意快速強調。

計時還可以幫助觀看者了解物體相互之間的重量。 在這個例子中，角色緩慢地舉起重物並迅速放下它們，表明它們對他來說很重：

資料來源：Giphy 上的 @scottthigpen

在網頁設計中，時間用於使元素停留更長時間或快速消失，尤其是在響應用戶交互時。 例如，如果用戶想要關閉菜單，您可以設置時間，使其停留 300 毫秒。 如果他們點擊導航欄中的元素，您會希望操作快速發生（100 毫秒）。

10.誇張

儘管動畫的 12 條原則中有很多都是以現實為中心的，但動畫的美妙之處在於它不是真實的。 “誇張”原則說太多的現實主義會削弱動畫最擅長的東西：娛樂性。 誇張是用來使人物和物體更有趣。 它需要現實並將其提高一個檔次，足以使場景仍然可信。 誇張需要克制，這樣場景就不會變得抽像或超現實。

在網頁設計中，對像被放大或縮小以吸引或分散注意力。 當用戶在網站的某個部分（如表單）上處於活動狀態時，它會增長而其他元素會縮小。 這類似於“暫存”原則，尤其是當您想到彈出表單時。

11.實體圖

來源：Tumblr 上的生命幻覺

儘管動畫在技術上是 2D 的，但它必須在 3D 中真實地呈現。 “立體繪圖”原則也可以稱為“透視”，因為它是關於具有繪製和理解基礎知識的能力，例如：

• 解剖學
• 平衡
• 一致性
• 光與影
• 體積
• 重量

對於網頁設計師來說，向元素添加深度向用戶表明他們可以與之交互。 您可以在我們的網站上看到這一點。 當我向下滾動時，觀察“加入下載”按鈕如何變成粉紅色：

12. 上訴

可能是動畫 12 條原則中最難掌握的，“吸引力”表示你的角色、物體和他們的世界必須吸引觀眾。 他們應該以某種方式有吸引力和迷人，無論是身體上還是其他方面。 沒有辦法做到這一點，但紮實的角色發展和講故事是關鍵因素。

在動畫中，每個角色都不會吸引人——反派是迪士尼電影的基石。 但是，它們的呈現方式應該仍然具有魅力並引起觀眾的興趣。

在網頁設計中，“吸引力”是指整個網站引人入勝、令人愉悅且易於使用。

包起來

迪士尼的 12 條原則可以幫助製作簡單的動畫，就像您在網站上創建互動遊戲一樣，但它們也可以幫助設計各種網頁。 大多數消費者在談到迪士尼電影時都和我一樣：我知道我喜歡某樣東西，我的大腦會處理這些暗示，但我無法弄清楚為什麼我會有這些反應。 網頁設計師的工作是預測訪問者的想法和行為，然後巧妙地引導他們採取正確的行動。

正在尋找更多與觀眾建立聯繫的方式？ 閱讀我們關於使用色彩情感的博客文章。