石玉娟

關鍵詞：運動規(guī)律；Banner動畫；元素動畫；動態(tài)元素

現(xiàn)今社會，電商已經成了商業(yè)銷售的主流模式，電商頁面設計制作也成了一個熱門行業(yè)。電商頁面設計中的一個重要內容就是Banner廣告條動畫制作，它的特點是耗時短、見效快、整體效率高等。想要達到理想的廣告效果，關鍵在于Banner廣告條的設計制作能否準確地傳達信息[1]。Banner動畫的一般要求是什么？一般使用什么軟件來制作它？怎樣來制作Banner動畫才能使其符合運動規(guī)律，并完成良好的視覺動態(tài)效果？目前為止，大多數(shù)相關論文都是對Ban?ner設計內容的研究。有從策劃、設計、制作與發(fā)布四個角度來探討的論文[2]；有從其藝術審美價值及設計原則來探討MG動畫的原則與規(guī)范的[3]。但是在動畫的制作方式上，并沒有文章進行系統(tǒng)性闡述，因此本文就Banner動畫的制作方式進行了一些探討。

1 Banner 動畫的制作軟件

如今公認的主流Banner動畫制作軟件為Adobe 公司的After Effects軟件。AE軟件也是藝術設計類學生應掌握的基礎圖形視頻處理軟件之一[4]。該軟件特點為入門門檻低，制作方式簡便易懂、輸出格式多樣且效果質量好。AE軟件有很多版本，版本的更新迭代非常快。目前數(shù)字媒體相關從業(yè)人員從After Ef?fects CS6到CC 2022都有使用。在筆者看來，目前使用起來最穩(wěn)定且高效的版本為After Effects CC 2017。After Effects CS6為較早期的版本，其主要劣勢為經常出現(xiàn)素材的丟失，需要我們手動選擇每一個素材的位置；CC 2022為最新版本，其功能為最齊全的，但是它的劣勢是對于電腦的要求很高。做Banner動畫使用2022版本，需要Inter I7十代以上的CPU和32G的內存才能保障其使用流暢，否則可能在制作過程中出現(xiàn)長達1秒的卡頓，無法完成實時渲染，非常影響制作效率。綜合而言，筆者個人認為After Effects CC 2017為最適合個人創(chuàng)作Banner動畫的軟件版本。

2 Banner 動畫的技術參數(shù)

Banner動畫一般放在網頁抬頭，按照淘寶、京東等主流電商的要求，其尺寸一般為橫：寬為3：1，網頁動畫完整版本為960×320像素。動畫時間長度沒有硬性規(guī)定，但是根據Banner動畫的功效來看，Banner 動畫只是為了提升頁面的活躍性，因此動畫不需要做的太長，一般來說Banner動畫制作5秒或者7秒都可以。但是在這個時間里，一定要留出Banner的落版時間——即Banner的最終樣式停留時間。由于人眼的視覺誤差，至少需要2秒的時間，才能將一幅畫面的主體內容完全閱讀，因此，Banner動畫的落版時間至少要有2秒。如果其落版時間低于2秒，那么Banner的畫面內容就無法被完全閱讀，這個Banner也就失去了意義。因此，一般來說Banner的尺寸為960×320，而整個Banner動畫的時間為5～7秒，但是其中有2秒為落版。也就是說如果整個動畫時長為5秒，那么前3秒制作動畫，后2秒制作落版；如果整個動畫時長為7 秒，那么前5秒制作動畫，后2秒制作落版。

3 符合運動規(guī)律的元素運動方式

Banner動畫的一般制作方法是制作元素從無到有的出場動畫。這個出場的方式不是特定的，但是一般來說都是用圖層變換中的屬性來制作動畫的。元素可以用位移的方式從上往下飛出（或從左往右），可以用不透明度的方式逐漸浮現(xiàn)，也可以用縮放的方式從小放大。但是，如果僅僅只是這樣來制作基礎動畫，那么這個動畫看起來是相當枯燥的。筆者以位移動畫為例，所有的基礎動畫都是勻速直線運動，沒有任何的運動規(guī)律可言，動畫看起來相當死板。所以要用一般動畫的運動規(guī)律來給這些基礎動畫進行修飾。運動規(guī)律最基本的原則就是改變物體的勻速直線運動方式，即設置關鍵幀的“緩入”“緩出”[5]，但是運動規(guī)律的內容遠不止這些。在美國傳奇動畫師FrankThomas 和Ollie Johnston 提出的12 條經典動畫準則中，最適合Banner元素動畫的準則有3條：擠壓和拉伸、彈性、預備動作。

3.1 擠壓和拉伸

擠壓和拉伸是指所有的物體在運動過程中都會由于速度而產生變形。對于一個運動物體來說，速度越快，變形越大。例如一個球在自由落體的過程中，由于重力和速度的影響，這個球會被拉長，而且這種拉長的變形會隨著速度增加而增加。擠壓和拉伸中最重要的一點是保持物體的體積不變，即物體長*寬得到的值為恒定值。例如一個物體本身的長和寬的值都為1的情況下，其體積為1×1=1。如果讓其產生拉伸效果，物體本身的長度變?yōu)榱?.5，這時不能簡單地將其寬改為0.5，而是要用體積除以其長度（1/1.5=0.67） 得到的數(shù)值來作為其寬度，這樣才能保證物體的體積不變。

3.2 彈性

所有的物體在運動時都不可能瞬間停下，由于慣性和加速度，它可能會在需要停下的位置左右晃動或上下晃動，這種晃動的幅度會越來越小，直到物體停止運動。通常會用64333的方式來總結彈性效果。即設置關鍵幀的點一共有五個，分別在第0幀，0+6幀，0+6+4 幀，0+6+4+3 幀，0+6+4+3+3 幀，0+6+4+3+3+3 幀。最后一幀時，物體會停在你確定的位置，而前面的任何一個關鍵幀，物體都沿著其運動軌跡在確定位置的前后擺動，且這種擺動幅度是越來越小的。以Y 軸的豎向運動為例，這種擺動幅度隨時間變化的規(guī)律，可參照圖1。

3.3 預備動作

預備動作是一種元素的動態(tài)擬人，在元素要開始運動之前，它會先有一個蓄力的過程。預備動作亦是應用于角色在做某個動作之前的預告與準備過程，通常表現(xiàn)為做一個反方向的動作作為鋪墊[6]。比如扔鉛球，會先拿著鉛球往后一些，然后再用力甩出去，這個往后拉的動作就叫預備動作。所以元素如果要往右運動，應該讓它先往左走一點來蓄力，然后再給它一個加速度讓它向右沖出去。

3.4 應用示例

在Banner動畫的元素動畫中，可以給所有的元素加入這些運動規(guī)律。比如讓一個字從上方掉到一個平面上，一是要給字一個自由落體的加速度（位移動畫），二是要讓字在掉落過程中產生拉伸和擠壓（縮放動畫）。例如字本身的縮放參數(shù)為100%，100%，在下落過程中速度最大時，它被拉長到66.6%，150%；在落地的一瞬間又被擠壓到130%，76.9%。整個過程中需要保持字的體積不變100%*100%=66.6%*150%=130%*76.9%。而后由于運動規(guī)律的彈性原理，字會被平面反彈起來。在反彈起來后由于地心引力的影響，字又會再次掉落下去。這個彈起和落下的狀態(tài)可能不止重復一次，但是彈起的高度會越來越小，直到字停在平面上。

如果這個字接下來要往右移動，需要讓這個字先往左挪動一小段距離，然后給它一個較大的加速度讓它往右邊加速運動，在超過移動距離一半以后，又需要給它一個較大的減速度，讓其逐漸停止下來。這種速度的變化必須通過調整物體位移運動曲線來完成，筆者調整其X軸位移的值曲線（Value Graph） 圖如圖2所示。

圖2中的黃色點為X軸位移的關鍵幀點。可以看到，左邊的第一個黃色點為初始位置點，中間的黃色點為預備動作效果做出的回拉點，即字小幅后退，后退以后字開始往右移動并加速，可以看到在這段時間（第10～20幀）曲線的弧度急速向上，這代表其運動速度大致在20幀時達到了最高值。此后為了讓其停止，要給它一個減速度，讓其速度逐漸降低，減速部分在20幀到第一秒（30幀）之間，可以看到，在這段時間曲線逐漸平緩，并在第一秒時物體停止運動。

所有的運動規(guī)律都不是單一出現(xiàn)的，在每一個元素的動態(tài)效果里面可能都同時存在1～3種類型的動態(tài)效果，他們之間相互獨立，但又共同組成了最終的元素動態(tài)效果。

4 元素動態(tài)的常見錯誤

在制作一個元素的入場動畫時，要充分考慮其本身樣式及內容適合的入場動畫。其中初學者最容易犯的幾個錯誤為以下三種。

4.1 出現(xiàn)橫截面

Banner中的元素由于有上下層級關系，有些元素由于上方物體的遮擋關系，可能只能看到其內容的一部分，但是這個元素應該是一個完整的。Banner的平面設計師在設計Banner版式時只考慮到觀眾需要看到的部分，因此一些元素是有一部分橫截面的。這種橫截面在靜態(tài)時并不會受到影響（其橫截面被其他圖形元素遮住了），但是在制作動畫時，如果不考慮到橫截面的問題，就會在某一幀看到該元素的不完整效果，其效果如圖3所示，這種情況是應該盡量避免的。

4.2 進入的角度和元素本身的角度有偏差

有些元素或文字，它本身的靜態(tài)Banner狀態(tài)就不是水平的，可能有一個傾斜的角度，這個角度不一定很大（5°～20°） ，但是會讓人感覺到它是傾斜的。這種情況下，如果讓這個傾斜的元素直線橫向進入，這種運動是非常尖銳的，會給人強烈的不適感。這種有角度的元素，在進入時要考慮它的傾斜角度，盡量讓其進入的路徑和其本身的傾斜角度方向一致。

4.3 忽略其本身的運動規(guī)律

如果Banner中有一個元素是飛機，在設計其進入方式時，就要考慮飛機本身是能飛的，要讓飛機的進入方式和其本身的飛行方向一致。如果在制作動畫時讓飛機直接從上方落下，這種入場動畫就不適宜，會給人一種飛機墜機的錯覺。

5 動畫的節(jié)奏控制

Banner動畫的基本制作方式，是一個讓所有元素從無到有的入場動畫，但是這個動畫的節(jié)奏是需要進行控制的。如果所有元素全部在同一時間出現(xiàn)，又各自有不同的運動方式，這樣呈現(xiàn)的整體動畫效果是不好的，給人的感覺是整個動畫亂七八糟。

所以在做Banner動畫的元素進入動效時，要按照從邊緣——中央，從下層——上層，從次要元素——主要元素的方式，讓元素按照順序依次進入。

由于每個元素的整體動態(tài)時間大概為20幀～1 秒，可以根據Banner中畫面元素的多少，判斷每2個元素動畫之間的間隔時間為幾幀，其最終目的是在3 秒或5秒內將所有的元素動畫制作完成。

其動畫關鍵幀的間隔設置如圖4所示。在本案例中，每一個圖層元素的起始運動時間都不完全相同，大致間隔時間為10～15幀。

這種關鍵幀的設置方法，是為了保證在同一時間內，Banner動畫的畫面中有不止一個物體在運動，但是可能一個元素的運動已經接近尾聲，而另一個元素的運動才剛剛開始。這樣就會給人一種所有元素都有序進入的感覺。

6 落版的規(guī)則

因為人眼對畫面的接受具有延遲性，所以落版的目的是讓觀眾能夠看清這個Banner畫面的內容。如果在做完入場動畫后Banner動畫馬上結束，按照網頁動畫的播放規(guī)則，該動畫在網頁中將會立刻從第0幀開始重新播放，也就是說觀眾根本沒有辦法看清Ban?ner畫面中的所有內容，這和Banner動畫的目的就沖突了。為了達到廣告宣傳的效果，落版的2秒停留時間必不可少。但是這個時間內畫面并不是完全靜止的。如果在動畫完成后，畫面突然靜止，觀者的心理感受會陡然剎車，這種觀感是不符合觀眾心理需求的。我們需要的落版是主要元素基本靜止（可以有緩慢晃動或縮放等），而一些裝飾性的次要元素緩慢移動。這種落版方式不至于讓觀者有驟停的錯落感，但是又能夠看清Banner所需要展示的內容。

7 總結

總體來說，Banner動畫的制作方法即為確定制作時長，確定元素分層分解，制作每個元素的動態(tài)效果，調整元素動態(tài)之間的先后順序，確定落版。其中元素的動態(tài)效果是重點，一定要讓元素的運動方式符合運動規(guī)律，才能讓你的Banner動畫整體效果得到提升。