動畫技巧大全 Animation Tips & Tricks 

篇原在 AnimApp 部落格的翻譯計畫平台分享,並徵求熱心的翻譯者。但因本計畫規劃未臻完善,流程過於複雜,所以再度嘗試以 Google Doc 的方式公開作為實驗

感謝蕭狼(tom780720)已經首先發難開了個頭!接下來我們也會找時間一起同步共譯,也同時作校正。

前翻譯計畫就以此方式( Google Doc)執行,先前的平台就先放棄,如果有任何建議請寄 E-mail 給我們,或是在部落格的文章裡留言。感謝!

AnimApp E-mailanimation.app@gmail.com


Animation Tips & Tricks:來源網頁

Original Article by Suzanne Martin.

floobynooby 是個資源非常多的部落格!這篇內容相當多!都是滿不錯的重點學習與提醒!


於文章很長,原文排版的段落區分不明顯,故希望中文版本能有清楚的分別,所以希望共編者能盡量依循既有的排版與格式,字型與配色。

文翻譯請放置於「」下面一行。如有人先翻,欲放上自己版本者,以不更動原譯者內容為原則,在原譯文下面多一個新段落。也可以試試框選文字後按右鍵增加註解(Comment),之後可以至編輯頁右上角的「討論」看所有討論。

翻譯者在自己翻譯的段落最後括弧註明自己身份。

求效率,AnimApp 有直接更動權,並有最終翻譯版本的決定權。

末請翻譯者提供~本文章發佈時,自己希望公開的資訊(請至少留下可讓我們聯絡的到的 E-mail )。不管翻譯哪一部分、或多少、或有無採用,一律都為本文共同翻譯者,將不特別於不同段落作註記。

果不小心刪到原文,麻煩自行至原文網頁拷貝內容。再不行的話請寄 E-mail 跟我們聯絡。

AnimApp 感謝各位參與者!


目錄

Design Tricks

Attraction tricks

Blinking、Anticipation and Overshoot、The See-saw effect、Parallel action、Tension and Release、Hesitation

Distraction tricks 

Timing tricks

Speed adjustment 、Logarithmic zooms、When to double/single frame、Overlapping action

Motion enhancement.

Falling bodies、Rolling Ball、The spinning top、、、、

Implementation Tricks

Top down design、Blocking、Fine tuning、Changing connectivity、Squash and stretch、

Economization Tricks

Soft Objects、Scaling and Fading、3D Sparkles、Temporal Anti-Aliasing

Production Tricks

Start at frame 1000、Skip identical frames、Binary search rendering order、Multiple machine parallelism

Tricks to Animating Characters

 *此項目即為部落格已分享的文章【John Lasseter - 電腦角色動畫技巧】

Keyframes、2-D vs. 3-D、Weight & Size、The Thinking Character、Moving Holds、Emotion、Readability of Actions、A Story Trick、Ask Why

References


原文前言

Animation can be thought of as a "trick". The good tricks are the ones that are not noticed unless they are pointed out. This write-up will describe four types of tricks: design, implementation, economization, and production [BLIN94] as well as tricks to animating characters [LASS94].

動畫可以當做一個"絕活",好的絕活是一種沒有被注意除非他人指出,這樣的評論將描述四種類型的絕活:設計,履行,節約,製作令人注目的腳色(production as well as tricks to animating characters),參照[in brackets]以及那些來源放置在文章最後。通常是用於3D動畫,但大部分都應用於傳統動畫為好,特別是廣泛的意見。 (tom)

可以把動畫比做一個 "小技巧", 好的技巧是不會被注意到的, 除非被人指出.   這裡會講四種類型的技巧: 設計,執行,節約,製作; 也會教調角色動作的技巧. (jojo)

動畫可以說是一門"要領"。好的要領,若無人指點,恐怕難知一二。這篇文章會介紹四大要領,分別是設計,實現、省略和製作,之後也會提及角色動畫化的要領。(wey)


設計技巧 Design Tricks

The basic intent of animation is to communicate something. There are four types of design tricks: attraction tricks, distraction tricks, timing tricks, and motion enhancement.

動畫的基本意圖是傳遞某些訊息,這裡有四種類型的設計絕活:吸引絕活,娛樂絕活,節奏絕活,和動作增加 (tom)

動畫的意圖是要傳遞訊息, 有四種類型的設計技巧: 吸引, 分散, 節奏, 和動作加強. (jojo)

動畫的用意是要傳達某些信息。這裡有四則要領,包括吸引、分散、節奏掌握、動作強化(wey)

吸引技巧 Attraction Tricks 如何吸引觀眾

 

The direction of the viewer's attention to what the designer considers the important parts of the image is one of the most important aspects of designing either still or moving images. This is particularly important for moving images, as they are not on the screen for a long time; the viewer does not have the choice to study it for an extended length of time. One must get the viewer looking at the place where the new action will occur before it is all over. The following are ways of achieving this:

設計者思考觀賞者注意力的方向是重要一部分環節設計無論是動態或靜的圖像(The direction of the viewer's attention to what the designer considers the important parts of the image is one of the most important aspects of designing either still or moving images)。尤其是對動態影像很重要,因為他們沒有在螢幕上很長一段時間,觀賞者沒有選擇去研究一部時間延長時間長度(the viewer does not have the choice to study it for an extended length of time)一個一定要給觀眾看之後新活動到處會發生的地方(One must get the viewer looking at the place where the new action will occur before it is all over),遵守達到目的的方法: (tom)

導引觀眾眼睛到設計者覺得重要的地方, 是不管設計靜態或動態畫面非常重要的點.  特別是動態畫面, 因為它停在螢幕上的時間不長, 觀眾無多餘的時間著墨, 設計者必需在新動作演完前, 把觀眾眼睛導引過去, 以下是幾個方法 (jojo)

不管畫面是靜態或動態,重要的是給觀眾注意到你想表達的地方。尤其螢幕上的動態稍縱即逝,很難有時間著墨。觀眾得在下個動作開始前看向那裡。以下有幾個方式:

(wey)

出現和消失 Appearing and Disappearing

Changes on the screen will get the eyes attention. Something changing from existence to non-existence, or vice versa, is pretty dramatic.

改變螢幕將會得的眼睛的注意。某相東西改變從存在到不存在,或者反過來也一樣,那是非常引人注目的。(tom)

幕上的變化會得到眼睛的注意.  東西從無到有, 或有到無, 是很戲劇化的 (jojo)

畫面有所改變,能引人注意。某物件從無到有,或從有到無,都非常生動。(wey)

閃爍 Blinking

Have something blink before it moves will get the viewer's attention.

某些東西在移動後閃爍將會獲得觀眾的注意力 (tom)

物件移動前先閃ㄧ下, 會得到注意. (jojo)

物件移動前閃爍一下,能吸引觀眾(wey)

預備動作與超射 Anticipation and Overshoot 預備動作和超出

Anticipate actions by having the objects backup a bit before moving in a desired direction.

預測活動經由目標輩分一小段活動之後朝著可望的方向發展。 (tom)

為了要讓觀眾有預期心, 物體前進前, 先後退 (jojo)

物件移動到預定位置前,必須先有預備動作(wey)

(e.g.人跳躍前,膝蓋微彎,半蹲)

蹺蹺板效應 The See-saw effect(拉鋸)效應

Lead the viewer into some such transformation by "rubbing the transformation back and forth" a bit

帶領觀眾一些經由"摩擦轉變前後"的轉變 (tom)

帶領觀眾進入轉折處, 可在轉折處搖擺ㄧ會兒 (jojo: 我不太了解這個意思, 有無實例?)

變化前後波折,令觀眾感受一些轉變(wey)

wey:像小朋友玩蹺蹺板,蹺蹺板會先上下擺盪,才慢慢穩定下來(最後蹺蹺板兩端可能一高一低,或持平)

並行活動 Parallel action

To point up the connection between two things on different parts of the screen, attract attention to them by shaking them both up and down at the same time.

為了將兩面情況之間的點顯示在螢幕上的不同部分,經由相同時間點上上下搖動螢幕吸引他的注意。 (tom)

為了強調畫面上兩個物件的差異,可同時上下搖晃它們來吸引觀眾(wey)

張力與釋放 Tension and Release緊繃和放鬆狀態

Tension is created by making shapes seem unbalanced, nearly tipping over. Release comes from objects being firmly placed.

緊張被創造出精神不穩的狀況,接近臨界點。放鬆來自於目標妥善。(tom)

讓物件看起來不平衡可以製造張力, 釋放感來自於物件的平衡 (jojo)

令物件傾斜臨界點(看似要打翻),再將它穩固平放。(wey)

 

躊躇 Hesitation 停頓片刻

Make object(s) pause a little before moving them to their final positions. This builds up anticipation.

創造物件移動之後暫停一點直到到達最終位置,這會積聚預測。

物件到定點前先停頓一下. 會提高觀眾的預期心

物件移動到某定點的過程中,先稍微停住。可提高觀眾的預期心態(wey)

分散技巧 Distraction Tricks

Sometimes it is necessary to distract the viewer from something on the screen. This could be a glitch in animation rendering or it might be a short-cut the animator is using to avoid some lengthy or complicated computations. One example is the old switcheroo; sometimes different models are needed for the same object at different points in the animation.

有時候它需要牽引觀眾在螢幕上的某些事物,這可能是一個小故障在動畫渲染或它可能縮短,動畫製作者利用這樣行為去避免過長或者複雜運算。一個例子是存在突如其來的變化,有時候不同的模組被需要於相同的物體在不同的動畫中。

控制時間的技巧 Timing Tricks

These tricks apply to how long you make actions take to occur.

那些技巧應用於您多久讓事情發生。

速度的調整 Speed adjustment

If a physical action happens too quickly to see, simply slow down the time scale. This is similar to scaling an object to fit on the screen.

一個物理活動用看是很快發生,簡單放慢時間刻度。這相似於整齊排列一個物件去適合一個物理活動畫面

對數放大 Logarithmic zooms

When flying in to objects that vary greatly in scale, it is useful to animate the logarithm of the distance rather than the distance directly.

在飛入一個非常不同規模的物件,它是利用動畫對數距離而非市直接距離。

何時需使用單/雙畫面 When to double/single frame

Double framing is the process of rendering every other frame and recording each rendered frame twice. This makes a motion seem to move faster and is sometimes used to add liveliness to the scene. Single framing is preferable to double framing except it takes longer to render.

雙畫面是運算每一個其他畫面以及紀錄其他運算畫面的雙倍流程,這可以製造一個快速移動的動作以及有時候利用活潑的畫

面,單畫面較適合雙畫面,除了它需要更長時間來表現之外。

重疊的動作 Overlapping action

Having various actions overlap in time makes an animation seem more alive.

在一個時間內有各種不同的行動部份重疊,創造動畫有許多生命力

動作加強 Motion Enhancement

It is difficult to convey some motions without exaggerating them in some way. For example:

它是難以傳達的一些動作在沒有誇大他們已以某種方式。

落體 Falling bodies

To give the impression of something falling continuously, put some texture in the background that scrolls as the object is tracked. Another technique is adding some random fluctuation to the position on the screen. This gives the impression of a falling object being tracked by a human cameraman.

給予某些東西持續掉落的效果,當物件被追蹤把一些紋理放在滾動背景中。其他技術是增加一些亂數波動在畫面位置上。給予一個物件掉落映像藉由人體攝影去被追蹤。(tom)

滾動中球 Rolling Ball

To show a ball rolling down an inclined plane, add a simple line to the ball. This represents a highlight. When the ball is rolled down the plane, the highlight rotates with it looking just like a mark on the surface of the ball.

顯示一顆球滾落一張傾斜的平面,增加一條簡單的線在那顆球,這代表一條高光,當球被滾落平面,高光旋轉就看起來像印在球的表面。

陀螺 The spinning top

This is a problem of spinning a symmetric object. Placing a pair of black marks near the apex of the top (in a "+" shape) gives the asymmetry needed to follow the rotation. Another trick is the use of Gouraud shaded highlights. The number of polygons is small so the irregularities in the image, especially in the highlights, gives a nice impression of motion.

這是一個旋轉在整齊的物件的問題,放置一雙黑色標記在頂點的前(in a"+"shape)給出不對稱的旋轉所需要遵循的。另一個技法是利用高洛德著色亮點。多邊形的數目是很小,所以在圖像中是不規則的,特別是在高光,給於一個不錯運動效果。


實施訣竅 Implementation Tricks

Many animation systems are based on some sort of keyframing system applied to a nested transformation scheme. The animator must design the transformation structure and then specify the values for the transformation (i.e. values for translation, scale and rotation) and the keyframe numbers for them to have those values. The following are ways to generate the control files:

大多數動畫系統是基於關鍵影格湊合的系統應用於嵌套的改造計畫,動畫師必須設計結構的轉型以及他們詳列轉變的值[ie:轉變,改變大小以及旋轉的值]以及關鍵影格數目代表他們有多少個值。遵循這樣方法來產生控制檔。

由上而下設計 Top down design

There are two ways to achieve this. The first way is to animate each keyframe completely and then proceed to the next keyframe. The second way is to animate the root level of the transformation tree for all keyframes and then animate the next highest level for all keyframes, etc. This second method is the easier to implement. That is, the top level motions of the centers of the objects are animated first using linear interpolation between the frames.

那裡有兩個方法完成這件事,第一方法是動畫每個關鍵影格完全地以及接而做下個關鍵影格。第二個方法是把根層次的樹所有關鍵影格作動畫,然後把下一層級的關鍵影格製作動畫。ETC,第二方法是比較簡單實施。最重要運動物件的控制中心製作動畫首次用於線性插入在影格之間。

妨礙 Blocking

The entire sequence of events is first layed out with no thought given to how much time it takes for each event to occur. Once the sequence is set the keyframe numbers are spread apart to specify timing.

整個序列的事件首次佈局雖然沒有想過給予多少時間花費每個事件的發生,曾經一組鏡頭設置關鍵影格號碼流傳除了詳述特定時間。

細調 Fine tuning

Once the top level motions and time durations are set, the detailed motion of sub-objects, i.e. the limbs of the character, are added. Then add anticipation and overshoot to the linear interpolation used for the first approximation.

曾經最好的動畫以及時間持續性設置詳細的子物建議案,i.e角色的臂是被增加的。然後增加期望以及超過線性插入用於起初類似的事物。

改變連線 Changing connectivity

A common problem is the need to change the structure of the transformation tree dynamically during animation. A common solution is to have the object appear in the transformation tree at both positions, and utilize some trick to make only one copy visible at any time. For example: John gives an apple to Mary. The apple is at the end of the transformation tree of John's arm. When Mary holds the apple, the apple should be at the end of Mary's arm in Mary's transformation tree.

一個最普通的問題是需要不斷地更改改變樹的架構在動畫這期間。一個普通的解決方法是在兩個位置上讓物件呈現於改變樹狀結構,以及運用一些技巧來隨時複製只有一個可見的改變樹。例如:約翰給瑪莉一台apple,這台apple的改變樹最後在約翰分部。當瑪莉拿到這台apple,這台apple應該最後是瑪莉分部的瑪莉改變樹。

擠壓與拉長 Squash and stretch

This is commonly used to give life to inanimate objects. The problem with this is that objects are usually modeled centered on their center of mass. Any squashing requires a scale factor about this center. This makes it difficult, for example, to keep the bottom of an object on the table before it jumps off. A better way is to provide positional handles on each side of the object. It is more intuitive to animate these two locations separately, typically with similar motions but just displaced in time and position.

這通常是給無生命的物件,這問題是事物通常是被複製、集中於它的質量重心,任何擠壓需要程度係數,這種產生很困難,例如:保持一個物件的底面在跳下桌子後。這最好方法是提供位置處理再位置每一方向,它是更直覺的把那兩個地區分別地作成動畫,典型地簡單運動但就只是取代時間與位置。


節約技巧 Economization Tricks 

Some ways to produce scenes cheaply where a full simulation of the situation would be too hard or too slow:

一些方法產生便宜地完整的模擬情況場景想必是困難或太慢:

軟性物件 Soft Objects

Translucent or cloudy objects are hard to animate. To get around this the following can be used: 

清澈或不清澈物件是費力的動畫,解決這問題可以用以下:

縮放和衰弱 Scaling and Fading

Animate the object getting larger while making it progressively more transparent. 

把製作動畫對象越弄越大,使它逐漸地透明。

3D火花 3D Sparkles

This effect can be made by using a 3D model of lines radiating randomly from a center. Then make the transparency of each line interpolate from opaque at the center to transparent at the endpoints. The resultant shape is then given a large rotation velocity around a couple of axes This will result in a spray of lines from the origin that is radically different from the one frame to the next. 

這效益可以由線性3D模組製作任意散發從一個中心點,然後把每條線製作透明插入於不透明中心點到透明端點,因而產生的圖像是當時給迅速地旋轉在兩軸的四周,這會導致線性水花從原本架構到下一個完全地不同架構。

抗鋸齒 Temporal Anti-Aliasing

Motion blur must be done to properly portray motion with film or video. This can be difficult since the rendering system needs to know, the position of each object in scene as well as the speed, and maybe the acceleration. One way of achieving this is using speed lines and streaks. Motion can be enhanced by explicitly drawing lines trailing a moving object. 

在影片或錄影動作模糊一定需做確切地的姿態,這可能困難因為算圖系統中需要知道每一個物件位置以及速度,和可能的加速度。一個完成的方法是利用速度流線與條紋。運動可以提高畫線明確地追蹤一個移動的物體。


生產技巧 Production Tricks 

"Production" refers to the process of rendering the frames and recording them to tape or film. The following are methods to actually produce the animation. They are mainly bookkeeping techniques to keep production from getting out of hand.

「生產」提到鏡頭算圖的過程與紀錄到磁帶或膠片。以下的方法是以實際產生的動畫,它們主要以簿記技術在失控中保持量產。

開始於1000畫面 Start at frame 1000

Start at frame 1000 instead of 0. It makes it easier to add frames at the beginning if needed. Since the frame number is part of the file name, trying to insert a frame before 0, i.e. using negative numbers make invalid file names. A four digit frame number allows getting a sorted list of frame files and having them come out in order. It avoids frame 10 coming before frame 2. 

開始畫面以1000代替0,在剛開始很容易讓被它增加如果它是被需要的話,檔案名字一部分從畫面數字,嘗試在0之後插入一 個畫面,也就是利用自然號碼製造檔案名稱。一份四位數的檔案總是獲得排序有序的檔案列。它避免第10畫面來到第2一連串的運動鏡頭散佈於中斷間,這是荒唐的重複呈現圖形在一個停頓間是完全相同的,創造一個自動機制有關於審查控制檔與發現算圖參數是完全相同的畫面 。

略過完全相同的畫面 Skip identical frames

If motion sequences are interspersed with pauses, it is silly to re-render frames that are identical during a pause. Create an automatic mechanism that scans the animation control file and detects frames for which all rendering parameters are identical. 

一連串的運動鏡頭散佈於中斷間,這是荒唐的重複呈現圖形在一個停頓間是完全相同的,創造一個自動機制有關於審查控制檔與發現算圖參數是完全相同的畫面 。

二進位搜尋算圖程序 Binary search rendering order

To debug the rendering scene, it is often useful to render several frames scattered through it. If these are ok, render the rest. It is a shame to re-do frames that have already been done. One solution is to render for example every 32 frames. Then render every 32 frames halfway between these, then every 16 frames halfway between these, then every 8 frames between these, etc. An advantage is getting a quadruple framed version done which is important during any time critical operations. If time permits, a double framed version can be made by rendering the between frames. 

在除錯的算圖畫面,它是往往有益渲染一些畫面經由它分散,如果那是ok的,那算圖將會休息。它是侮辱重做已完成的影片,一個解決算圖是,例如在每32畫面,然後算圖在所有的32影格的一半,然後在所有的16影格的一半,然後在所有的每8影格的一半等,一個優勢是獲得四個的畫面版本去做很重要的關鍵操作在任何時間期間。如果時間許可,一個雙倍影格版本可由算圖影格之間。多工並行這是基本上的標準算圖方法,特別當計算機連線到網路。

多工並行 Multiple machine parallelism

This is basically the standard way to render, especially when machines are connected on a network. 

這是基本上的標準算圖方法,特別當計算機連線到網路。(tom)


角色動畫技巧Tricks to Animating Characters 

*此項目即為部落格已分享的文章【John Lasseter - 電腦角色動畫技巧】

References

[BLIN94] Blinn, J., "Animation Tricks", SIGGRAPH 94 course notes and video: Animation Tricks, July 1994.

[LASS94] Lasseter, J., "Tricks to Animating Characters with a Computer", SIGGRAPH 94 course notes: Animation Tricks, July 1994.

[PIXA86] PIXAR, "Luxo Jr.", 1986.

[PIXA87] PIXAR, "Red's Dream", 1987.


翻譯者資訊

Ex.

*AnimApp   animation.app@gmail.com