iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
2
Modern Web

網頁阿尼尛,到底是在幹尛?系列 第 2

第一章、想成為網頁動畫創世神?那麼你不可不知的動畫12法則!

前言

當你打開一變空白的網頁,心想「天啊我要從哪邊開始呢?」,這樣的狀況簡直就跟生存模式不小心切換到 困難 一樣。想勇闖地下城,就讓我們先來了解最基礎的 動畫 12 法則 吧!

在動畫產業界人人都知道動畫有 12 法則,但這 12 個法則又是從哪裡出來的呢?
它是源自於 迪士尼動畫師 奧立·強司頓弗蘭克·托馬斯 所撰寫的 《Animation: The Illusion of Life》書中,而到了現代,仍有許多的動畫師將其視為動畫圭臬。

而下面會來一一介紹這 12 法則的原理


擠壓與伸展(Squash and stretch)

以球體舉例,在球體加速度時稍微伸展一下球體,且在接觸到地面的瞬間擠壓球體,整底動畫看起來就會十分「動感」

預期動作(Anticipation)

動畫家 比爾・泰拉說過「動畫只有三大要點:『1. 預期性 / 2. 動作 / 3. 反應』,這些要點暗示剩餘部分。好好掌握這些重點,就能製作出好動畫。」

運用大量預期性

預期性傳達了即將發的事情,觀眾看到不久後將發生什麼事 -- 就能與畫面中角色一同預期,跟著劇情安排走。

所以預期性是動作的準備。預期性幾乎在所有動作都佔有相當地位。

而在 30 以及 40 年代的動畫上,則會在預期以及動作上做 強調

在上圖中,我們在預期動作前面加入了稍微向上的預期動作,來 延長預期動作

像這樣的畫面效果就會顯得非常有生命力,也會在畫面上看起來有更多的變化。

演出方式(Staging)

每個角色都會有他獨一無二的背景設定,為了更加貼近現實,角色的上一個動作和下一個一個動作之間都需要相當的構想,使整個動畫更加完整。

當然,動作不僅和外貌性別有關,也與角色心境感受有關,比如:

難過的、孤獨的、快樂的、喝醉的、蒼老的、自信的、充滿希望的、害羞的

甚至我們還可以向下細分:

害羞的醉漢、好色的醉漢、失控的強壯醉漢、初次喝醉的醉漢、自制的社會已婚婦女

接續動作與關鍵動作(Straight ahead action and pose to pose)

接續動作是依照連續的動作從第一格畫到最後一格的方式。
通常我們會先決定好動作最初開始的樣子以及結束後的樣子,這兩者被稱作 極端(extremes),而極端與極端之間的話稱為 中間畫(inbetweens)

在日系動畫中 極端通常稱之為 原畫,而中間畫通常稱之為 補間

妥善掌握中間位置對動畫師也是一個巨大挑戰

上圖為例,由於動畫師沒有掌握好角色眼睛部分的形狀,動畫串接起來時,眼睛的部分出現詭異的閃爍效果。

跟隨動作與重疊動作(Follow through and overlapping action)

意指動作的分別位移並不是同時間發生的。
物體會因為慣性關係,動作中的物體要突然停止是不可能的,因此我們必須在動畫上加入跟隨動作。
當然我們也可以為了強調動作的注目性,適時的加入跟隨動作。

即便只是單純地轉身動作,也會因為有跟隨動作,而讓畫面豐富許多

由於大部分的身體動作皆是由臀部開始,所以我們在畫面加入了一些臀部的動作,讓角色看起來更貼近現實。

漸快與漸慢(Slow in and slow out)

物體從開始到結束移動並不會是等速度運動。

下圖我們繪製一個鐘擺運動:

右邊的繪製方法是錯誤的,因為當物體運動起來會像是鐘擺向上縮了一下在長回來原本的定位點

我們在 1到3、1到5中間加入中間位置,讓鐘擺運動平滑的開始與結束。

右邊為動作率表

此種技法也可以稱為「緩衝(cushioning)」

弧形(Arcs)

大部分的動作都屬於弧形動作,一般來說都是採用圓弧移動或八字型。只有在少數狀況會是角度或垂直動作。

手臂的擺動

圓弧動作也可以讓重量感更加明顯,已緊急煞車為例

在停止動作後加入背脊向下的姿勢,讓整體的動作更加流暢,也能展現出因物品緊急停止時的平衡感與重量感。

如果不是圓弧動作,動畫就不會流暢。想要流暢的動畫,就要採用圓弧動作(除非你需要的是有力量的直線動作)

附屬動作(Secondary action)

前面我們有提到 「跟隨與重疊」,為了讓動畫凸顯重點,我們會加上一些跟隨的附屬動作。

以前面的轉身為例,當我們轉身的時候,會先由頭部帶動,接著踏出一腳做出預期動作,在帶動到胸腰臀等部位轉動,最終才會動作就定位。

這些附加的動作能夠讓整個轉身的過程更加有趣。

時間控制(Timing)

各位檳友...動畫...時間...與...間距...就是一切...

以球體為例,當球拍擊到地板的每一個瞬間(發出「波基 波基」聲音時),就是 動作時刻

而球體在減速時,會因為作用力的減弱,位移的間距會越來越短。
間距之於動畫是簡單但非常重要的,間距是最微妙難以捉摸的部分。

所以好的動畫動作裡我們可以看到,好的間距與時間:

誇張(Exaggeration)

誇張不僅僅只是在作畫上運用大量的技巧讓動作大幅度變化,也包含了角色表演與如何傳達情緒。
如何去拿捏誇張的氛圍便是能夠讓觀眾與角色連結的重點之一

加入了大量的擠壓伸展,我們也可以感受到角色有多麽吃驚。

純熟的手繪技巧(Solid drawing)

當然,繪圖能力絕對是成為動畫師的首要條件。即便我們在本系列談論的是網頁動畫,也建議大家不妨試試在紙上畫出動畫的動作,體驗一下動畫的動作原理。

吸引力(Appeal)

任何的創作作品都要具備的元素,動畫最吸引人的地方就是他能夠呈現現實生活中所做不到的事情,精彩的劇情,妥善分配的角色,震撼人心的音樂都是不可或缺的成功要素。

最後,試著相信自己的作品。知名日本導演 黑澤明 有個十分過人的特質,那便是他十分相信自己的作品,相信自己能做得好,便足以說服大家來欣賞你的作品。


以上這 12 法則經過時代的演變,也延伸出了許多門派,一些關鍵字如「動畫設計 10 法則」、「基礎動畫 12 法則 + 4」。而每種門派都有他們的優勢,若是有興趣都可以去查查看,本篇文章就不再贅述。

呼,終於將初級攻略手冊閱讀完畢啦!相信有扎實的打好根基,便能蓬勃地向上發展呦~
那麼我們下篇文章見


參考資料


上一篇
序、關於我轉職研究網頁動畫的那件事
下一篇
第二章、網頁動畫到底在幹尛?才不告訴逆咧~咧、咧~
系列文
網頁阿尼尛,到底是在幹尛?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
tsuifei
iT邦新手 4 級 ‧ 2020-09-17 20:26:00

超完整的動畫法則,我家隔壁有家很有名的動畫學校 Gobelins
無論是電影、電玩、網站的動畫,都偏離不了這12法則對嗎?

CathyShen iT邦新手 4 級 ‧ 2020-09-18 10:46:56 檢舉

是的,在製作動畫相關技術時,都會使用這12法則來做變化~
哇,Gobelins 在之前有過耳聞,真希望未來能有機會去參訪一下順便去參加安古蘭漫畫節呀~~

tsuifei iT邦新手 4 級 ‧ 2020-09-18 14:24:02 檢舉

安古蘭漫畫節 今年因疫情取消了,我也很想有機會去朝聖一下,哈~

我要留言

立即登入留言