动态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.