基于運(yùn)動(dòng)規(guī)律的Banner動(dòng)畫制作方式

石玉娟

關(guān)鍵詞：運(yùn)動(dòng)規(guī)律；Banner動(dòng)畫；元素動(dòng)畫；動(dòng)態(tài)元素

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

1 Banner 動(dòng)畫的制作軟件

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

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

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

3 符合運(yùn)動(dòng)規(guī)律的元素運(yùn)動(dòng)方式

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

3.1 擠壓和拉伸

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

3.2 彈性

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

3.3 預(yù)備動(dòng)作

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

3.4 應(yīng)用示例

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

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

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

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

4 元素動(dòng)態(tài)的常見錯(cuò)誤

在制作一個(gè)元素的入場(chǎng)動(dòng)畫時(shí)，要充分考慮其本身樣式及內(nèi)容適合的入場(chǎng)動(dòng)畫。其中初學(xué)者最容易犯的幾個(gè)錯(cuò)誤為以下三種。

4.1 出現(xiàn)橫截面

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

4.2 進(jìn)入的角度和元素本身的角度有偏差

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

4.3 忽略其本身的運(yùn)動(dòng)規(guī)律

如果Banner中有一個(gè)元素是飛機(jī)，在設(shè)計(jì)其進(jìn)入方式時(shí)，就要考慮飛機(jī)本身是能飛的，要讓飛機(jī)的進(jìn)入方式和其本身的飛行方向一致。如果在制作動(dòng)畫時(shí)讓飛機(jī)直接從上方落下，這種入場(chǎng)動(dòng)畫就不適宜，會(huì)給人一種飛機(jī)墜機(jī)的錯(cuò)覺。

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

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

所以在做Banner動(dòng)畫的元素進(jìn)入動(dòng)效時(shí)，要按照從邊緣——中央，從下層——上層，從次要元素——主要元素的方式，讓元素按照順序依次進(jìn)入。

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

其動(dòng)畫關(guān)鍵幀的間隔設(shè)置如圖4所示。在本案例中，每一個(gè)圖層元素的起始運(yùn)動(dòng)時(shí)間都不完全相同，大致間隔時(shí)間為10～15幀。

這種關(guān)鍵幀的設(shè)置方法，是為了保證在同一時(shí)間內(nèi)，Banner動(dòng)畫的畫面中有不止一個(gè)物體在運(yùn)動(dòng)，但是可能一個(gè)元素的運(yùn)動(dòng)已經(jīng)接近尾聲，而另一個(gè)元素的運(yùn)動(dòng)才剛剛開始。這樣就會(huì)給人一種所有元素都有序進(jìn)入的感覺。

6 落版的規(guī)則

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

7 總結(jié)

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