石玉娟

摘 要：本文通過(guò)對(duì)基礎(chǔ)BANNER動(dòng)畫(huà)的介紹，引申出制作BANNER動(dòng)畫(huà)的軟件、技術(shù)參數(shù)及運(yùn)動(dòng)方式。同時(shí)說(shuō)明了在制作BANNER動(dòng)畫(huà)時(shí)，我們應(yīng)該如何將運(yùn)動(dòng)規(guī)律引用到元素中，最后完成整個(gè)BANNER動(dòng)畫(huà)的制作。

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

現(xiàn)今社會(huì)，電商已經(jīng)成為了商業(yè)銷(xiāo)售的主流模式，電商網(wǎng)頁(yè)頁(yè)面制作也成為了一個(gè)熱門(mén)行業(yè)。其中BANNER動(dòng)畫(huà)由于其耗時(shí)短，見(jiàn)效快，整體效率高等優(yōu)勢(shì)，成為了電商頁(yè)面設(shè)計(jì)中的重要內(nèi)容。BANNER動(dòng)畫(huà)的一般要求是什么？怎樣來(lái)制作BANNER動(dòng)畫(huà)才能使其符合運(yùn)動(dòng)規(guī)律，并完成良好的視覺(jué)動(dòng)態(tài)效果，本文就這些內(nèi)容進(jìn)行了一些探討。

一、BANNER動(dòng)畫(huà)的技術(shù)參數(shù)

BANNER動(dòng)畫(huà)一般放在網(wǎng)頁(yè)抬頭，按照淘寶/京東等主流電商的要求，其尺寸一般為橫：寬為3：1，網(wǎng)頁(yè)動(dòng)畫(huà)大部分為960*320尺寸。動(dòng)畫(huà)時(shí)間長(zhǎng)度沒(méi)有硬性規(guī)定，但是根據(jù)BANNER動(dòng)畫(huà)的功效來(lái)看，BANNER動(dòng)畫(huà)只是為了頁(yè)面的活躍性，因此動(dòng)畫(huà)不需要做的太長(zhǎng)。一般來(lái)說(shuō)BANNER動(dòng)畫(huà)制作5秒或者7秒都可以。但是在個(gè)時(shí)間里，一定要留出BANNER本身的落版時(shí)間——即BANNER的最終樣式停留時(shí)間。由于人眼的視覺(jué)誤差，我們至少需要2秒的時(shí)間，才能將一副畫(huà)面的主體內(nèi)容完全閱讀，因此，這個(gè)落版時(shí)間至少要有2秒。因此，一般來(lái)說(shuō)BANNER的尺寸為960*320，而整個(gè)BANNER動(dòng)畫(huà)的時(shí)間為5-7秒，但是這其中有2秒為落版。也就是說(shuō)如果你整個(gè)動(dòng)畫(huà)時(shí)間為5秒，那么前3秒制作動(dòng)畫(huà)，后2秒制作落版。

二、 BANNER動(dòng)畫(huà)的元素運(yùn)動(dòng)方式

一般BANNER動(dòng)畫(huà)遵循了最基本的運(yùn)動(dòng)規(guī)律，即動(dòng)畫(huà)形式為元素從無(wú)——有出現(xiàn)的方式。這個(gè)出現(xiàn)的方式不是特定的，但是一般來(lái)說(shuō)都是用圖層變換中的屬性來(lái)制作的。但是，所有的變換屬性制作出來(lái)的基礎(chǔ)動(dòng)畫(huà)都是相當(dāng)枯燥的。我們以位移動(dòng)畫(huà)為例，所有的運(yùn)動(dòng)都是勻速直線運(yùn)動(dòng)，沒(méi)有任何的運(yùn)動(dòng)規(guī)律可言，動(dòng)畫(huà)看起來(lái)也相當(dāng)死板。所以我們要用一般動(dòng)畫(huà)的運(yùn)動(dòng)規(guī)律來(lái)給這些變換屬性動(dòng)畫(huà)進(jìn)行修飾。運(yùn)動(dòng)規(guī)律最基本的原則就是改變物體的勻速直線運(yùn)動(dòng)方式，但是運(yùn)動(dòng)規(guī)律的內(nèi)容遠(yuǎn)不止這些，最適用于BANNER元素動(dòng)畫(huà)的有3條：擠壓和拉伸、彈性、預(yù)備動(dòng)作。

（一）擠壓和拉伸

運(yùn)動(dòng)規(guī)律中所有的物體在運(yùn)動(dòng)過(guò)程中都由于速度而產(chǎn)生擠壓和拉伸。這種擠壓和拉伸對(duì)于物體來(lái)說(shuō)，速度越快，變形越大。例如一個(gè)球在自由落體的過(guò)程中，由于重力和速度的影響，會(huì)被拉長(zhǎng)，而且這種拉長(zhǎng)的變形會(huì)隨著速度增加而增加。這里的準(zhǔn)則中最重要的一點(diǎn)是體積不變，即物體的長(zhǎng)*寬得到的值為恒定值。例如一個(gè)物體本身的長(zhǎng)和寬的值都為1的情況下，其體積為1*1=1。

（二）彈性

所有的物體在產(chǎn)生運(yùn)動(dòng)時(shí)不可能瞬間停下，由于慣性和加速度，它可能會(huì)在需要停下的位置左右晃動(dòng)或上下晃動(dòng)，這種晃動(dòng)的幅度會(huì)越來(lái)越小，最終導(dǎo)致物體停下。通常我們會(huì)用64333的方式來(lái)總結(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幀。在最后一幀物體會(huì)停在你確定的固定位置，而前面的任何一個(gè)關(guān)鍵幀，物體都沿著其運(yùn)動(dòng)軌跡在固定位置前后擺動(dòng)，且這種擺動(dòng)幅度是越來(lái)越小的。

（三）預(yù)備動(dòng)作

預(yù)備動(dòng)作是一種元素的動(dòng)態(tài)擬人，在元素要開(kāi)始運(yùn)動(dòng)之前，它會(huì)先有一個(gè)蓄力的過(guò)程。比如我們?nèi)巳鱼U球，會(huì)先拿著鉛球往后一些，然后再用力甩出去，這個(gè)往后拉的動(dòng)作就叫預(yù)備動(dòng)作。所以元素如果要往右運(yùn)動(dòng)，我們應(yīng)該讓它先往左走一點(diǎn)來(lái)蓄力，然后給它一個(gè)加速度讓它沖出去。

（四）應(yīng)用示例

在BANNER動(dòng)畫(huà)的元素動(dòng)畫(huà)中，我們可以給所有有速度的元素加入這些運(yùn)動(dòng)規(guī)律。比如我們讓一個(gè)字從上方掉到一個(gè)平面上，我們一是要給字一個(gè)自由落體的加速度（位移動(dòng)畫(huà)），二是要讓字在掉落過(guò)程中產(chǎn)生拉伸和擠壓（縮放動(dòng)畫(huà)）。而后由于彈性原理，字會(huì)被平面彈起來(lái)，彈起來(lái)后由于地心引力的影響，字又會(huì)再次掉落下去。這個(gè)彈起和落下的狀態(tài)可能不止一次，但是彈起的高度會(huì)越來(lái)越小，直到字停在平面上。

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

三、動(dòng)畫(huà)的節(jié)奏控制

我們?cè)谧鯞ANNER動(dòng)畫(huà)的時(shí)候，就是一個(gè)讓所有元素從無(wú)——有的過(guò)程。但是這個(gè)過(guò)程的節(jié)奏需要進(jìn)行控制。如果所有元素全部在同一時(shí)間出現(xiàn)，整體畫(huà)面給人的感覺(jué)是亂哄哄的。

所以我們?cè)谧鯞ANNER動(dòng)畫(huà)的元素進(jìn)入動(dòng)效時(shí)，要按照從邊緣——中央，從下層——上層，從次要元素——主要元素的方式，讓其依次進(jìn)入。

由于每個(gè)元素的整體動(dòng)態(tài)時(shí)間大概為20幀——1秒，我們可以根據(jù)BANNER中畫(huà)面元素的多少，來(lái)判斷每2個(gè)元素動(dòng)畫(huà)之間的間隔為幾幀，其最終目的是在3秒或5秒內(nèi)將所有的元素都進(jìn)入到畫(huà)面中。

四、落版規(guī)則

落版的目的是讓觀眾能夠看清這個(gè)BANNER畫(huà)面的內(nèi)容。我們需要主要元素基本靜止（可以有緩慢晃動(dòng)或縮放等），而一些裝飾性的次要元素緩慢移動(dòng)，這樣不至于讓觀者有驟停的錯(cuò)落感，但是又能夠看清BANNER所需要展示的內(nèi)容。

五、總結(jié)：

總體來(lái)看，BANNER動(dòng)畫(huà)的制作方法即為確定制作時(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)畫(huà)動(dòng)態(tài)效果得到提升。

參考文獻(xiàn)：

[1]孫慕梓.高校門(mén)戶網(wǎng)站首頁(yè)動(dòng)態(tài)Banner的制作研究[J].電腦知識(shí)與技術(shù)，2016，12（02）：204-206+209.

[2]陳虹宇. 新媒體時(shí)代背景下圖形設(shè)計(jì)的動(dòng)態(tài)化研究[D].山東大學(xué)，2017.