动态BANNER的制作研究

1、    动态banner的制作研究    石玉娟摘 要：本文通过对基础banner动画的介绍，引申出制作banner动画的软件、技术参数及运动方式。同时说明了在制作banner动画时，我们应该如何将运动规律引用到元素中，最后完成整个banner动画的制作。关键词：运动规律;动态banner;元素动画;动态元素现今社会，电商已经成为了商业销售的主流模式，电商网页页面制作也成为了一个热门行业。其中banner动画由于其耗时短，见效快，整体效率高等优势，成为了电商页面设计中的重要内容。banner动画的一般要求是什么？怎样来制作banner动画才能使其符合运动

2、规律，并完成良好的视觉动态效果，本文就这些内容进行了一些探讨。一、banner动画的技术参数banner动画一般放在网页抬头，按照淘宝/京东等主流电商的要求，其尺寸一般为横：宽为3：1，网页动画大部分为960*320尺寸。动画时间长度没有硬性规定，但是根据banner动画的功效来看，banner动画只是为了页面的活跃性，因此动画不需要做的太长。一般来说banner动画制作5秒或者7秒都可以。但是在个时间里，一定要留出banner本身的落版时间即banner的最终样式停留时间。由于人眼的视觉误差，我们至少需要2秒的时间，才能将一副画面的主体内容完全阅读，因此，这个落版时间至少要有2秒。因此，一般

3、来说banner的尺寸为960*320，而整个banner动画的时间为5-7秒，但是这其中有2秒为落版。也就是说如果你整个动画时间为5秒，那么前3秒制作动画，后2秒制作落版。二、 banner动画的元素运动方式一般banner动画遵循了最基本的运动规律，即动画形式为元素从无有出现的方式。这个出现的方式不是特定的，但是一般来说都是用图层变换中的属性来制作的。但是，所有的变换属性制作出来的基础动画都是相当枯燥的。我们以位移动画为例，所有的运动都是匀速直线运动，没有任何的运动规律可言，动画看起来也相当死板。所以我们要用一般动画的运动规律来给这些变换属性动画进行修饰。运动规律最基本的原则就是改变物体的

4、匀速直线运动方式，但是运动规律的内容远不止这些，最适用于banner元素动画的有3条：挤压和拉伸、弹性、预备动作。（一）挤压和拉伸运动规律中所有的物体在运动过程中都由于速度而产生挤压和拉伸。这种挤压和拉伸对于物体来说，速度越快，变形越大。例如一个球在自由落体的过程中，由于重力和速度的影响，会被拉长，而且这种拉长的变形会随着速度增加而增加。这里的准则中最重要的一点是体积不变，即物体的长*宽得到的值为恒定值。例如一个物体本身的长和宽的值都为1的情况下，其体积为1*1=1。（二）弹性所有的物体在产生运动时不可能瞬间停下，由于惯性和加速度，它可能会在需要停下的位置左右晃动或上下晃动，这种晃动的幅度会越

5、来越小，最终导致物体停下。通常我们会用64333的方式来总结弹性效果。即设置关键帧的点一共有五个，分别在第0帧，0+6帧，0+6+4帧，0+6+4+3帧，0+6+4+3+3帧，0+6+4+3+3+3帧。在最后一帧物体会停在你确定的固定位置，而前面的任何一个关键帧，物体都沿着其运动轨迹在固定位置前后摆動，且这种摆动幅度是越来越小的。（三）预备动作预备动作是一种元素的动态拟人，在元素要开始运动之前，它会先有一个蓄力的过程。比如我们人扔铅球，会先拿着铅球往后一些，然后再用力甩出去，这个往后拉的动作就叫预备动作。所以元素如果要往右运动，我们应该让它先往左走一点来蓄力，然后给它一个加速度让它冲出去。（四

6、）应用示例在banner动画的元素动画中，我们可以给所有有速度的元素加入这些运动规律。比如我们让一个字从上方掉到一个平面上，我们一是要给字一个自由落体的加速度（位移动画），二是要让字在掉落过程中产生拉伸和挤压（缩放动画）。而后由于弹性原理，字会被平面弹起来，弹起来后由于地心引力的影响，字又会再次掉落下去。这个弹起和落下的状态可能不止一次，但是弹起的高度会越来越小，直到字停在平面上。所有的运动规律都不是单一出现的，在每一个元素的动态效果里面可能都存在1-3种类型的动态效果，他们之间相互独立，但又共同组成了最终的元素动态效果。三、动画的节奏控制我们在做banner动画的时候，就是一个让所有元素从无

7、有的过程。但是这个过程的节奏需要进行控制。如果所有元素全部在同一时间出现，整体画面给人的感觉是乱哄哄的。所以我们在做banner动画的元素进入动效时，要按照从边缘中央，从下层上层，从次要元素主要元素的方式，让其依次进入。由于每个元素的整体动态时间大概为20帧1秒，我们可以根据banner中画面元素的多少，来判断每2个元素动画之间的间隔为几帧，其最终目的是在3秒或5秒内将所有的元素都进入到画面中。四、落版规则落版的目的是让观众能够看清这个banner画面的内容。我们需要主要元素基本静止（可以有缓慢晃动或缩放等），而一些装饰性的次要元素缓慢移动，这样不至于让观者有骤停的错落感，但是又能够看清banner所需要展示的内容。五、总结：总体来看，banner动画的制作方法即为确定制作时长，确定元素分层分解，制作每个元素的动态效果，调整元素动态之间的先后顺序，确定落版。其中元素的动态效果是重点，一定要让元素的运动方式符合运动规律，才能让你的banner动画动态效果得到提升。参考文献：1孙慕梓.高校门户网站首页动态banner的制作研究j.电脑知识与技术，2016，12（02）：204-206+209.2陈虹宇. 新媒体时代背景下图形设计的动态化研究d.山东大学，2017.科学与财富2021年4期