動態BANNER的制作研究

石玉娟

摘 要：本文通過對基礎BANNER動畫的介紹，引申出制作BANNER動畫的軟件、技術參數及運動方式。同時說明了在制作BANNER動畫時，我們應該如何將運動規律引用到元素中，最后完成整個BANNER動畫的制作。

關鍵詞：運動規律;動態BANNER;元素動畫;動態元素

現今社會，電商已經成為了商業銷售的主流模式，電商網頁頁面制作也成為了一個熱門行業。其中BANNER動畫由于其耗時短，見效快，整體效率高等優勢，成為了電商頁面設計中的重要內容。BANNER動畫的一般要求是什么？怎樣來制作BANNER動畫才能使其符合運動規律，并完成良好的視覺動態效果，本文就這些內容進行了一些探討。

一、BANNER動畫的技術參數

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

二、 BANNER動畫的元素運動方式

一般BANNER動畫遵循了最基本的運動規律，即動畫形式為元素從無——有出現的方式。這個出現的方式不是特定的，但是一般來說都是用圖層變換中的屬性來制作的。但是，所有的變換屬性制作出來的基礎動畫都是相當枯燥的。我們以位移動畫為例，所有的運動都是勻速直線運動，沒有任何的運動規律可言，動畫看起來也相當死板。所以我們要用一般動畫的運動規律來給這些變換屬性動畫進行修飾。運動規律最基本的原則就是改變物體的勻速直線運動方式，但是運動規律的內容遠不止這些，最適用于BANNER元素動畫的有3條：擠壓和拉伸、彈性、預備動作。

（一）擠壓和拉伸

運動規律中所有的物體在運動過程中都由于速度而產生擠壓和拉伸。這種擠壓和拉伸對于物體來說，速度越快，變形越大。例如一個球在自由落體的過程中，由于重力和速度的影響，會被拉長，而且這種拉長的變形會隨著速度增加而增加。這里的準則中最重要的一點是體積不變，即物體的長*寬得到的值為恒定值。例如一個物體本身的長和寬的值都為1的情況下，其體積為1*1=1。

（二）彈性

所有的物體在產生運動時不可能瞬間停下，由于慣性和加速度，它可能會在需要停下的位置左右晃動或上下晃動，這種晃動的幅度會越來越小，最終導致物體停下。通常我們會用64333的方式來總結彈性效果。即設置關鍵幀的點一共有五個，分別在第0幀，0+6幀，0+6+4幀，0+6+4+3幀，0+6+4+3+3幀，0+6+4+3+3+3幀。在最后一幀物體會停在你確定的固定位置，而前面的任何一個關鍵幀，物體都沿著其運動軌跡在固定位置前后擺動，且這種擺動幅度是越來越小的。

（三）預備動作

預備動作是一種元素的動態擬人，在元素要開始運動之前，它會先有一個蓄力的過程。比如我們人扔鉛球，會先拿著鉛球往后一些，然后再用力甩出去，這個往后拉的動作就叫預備動作。所以元素如果要往右運動，我們應該讓它先往左走一點來蓄力，然后給它一個加速度讓它沖出去。

（四）應用示例

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

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

三、動畫的節奏控制

我們在做BANNER動畫的時候，就是一個讓所有元素從無——有的過程。但是這個過程的節奏需要進行控制。如果所有元素全部在同一時間出現，整體畫面給人的感覺是亂哄哄的。

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

由于每個元素的整體動態時間大概為20幀——1秒，我們可以根據BANNER中畫面元素的多少，來判斷每2個元素動畫之間的間隔為幾幀，其最終目的是在3秒或5秒內將所有的元素都進入到畫面中。

四、落版規則

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

五、總結：

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

參考文獻：

[1]孫慕梓.高校門戶網站首頁動態Banner的制作研究[J].電腦知識與技術，2016，12（02）：204-206+209.

[2]陳虹宇. 新媒體時代背景下圖形設計的動態化研究[D].山東大學，2017.