焦点轮播图动画的制作

电子商务网页设计与制作Design

and

Creation

of

E-commerce

WebPages焦点轮播图动画的制作主讲人：傅俊THISIS导入：Photoshop动画制作利用图层可见性的动画制作利用过渡帧的动画制作Content利用第三方工具生成轮播图动画4

在网店中为了展现突出网店元素，常通过一些动画效果来加以展现。这些动画效果最为常见的就是通过Gif动画来展现。Gif图像和Jpg、Png等图像一样属于在网页上常用的图像格式之一。相当于其他格式，Gif最大的特点就是支持动画。另外还支持透明度，但Gif支持256色，因此一些详细的图片和写实摄影图像会丢失颜色信息。Gif动画可以通过专门动画制作程序来完成，通过Photoshop也能制作相应的Gif动画。导入-Photoshop动画制作

Photoshop动画制作主要是通过时间轴面板来完成。需要注意的是，要使Gif动画动起来，不能直接通过保存文档来实现，而是要通过“文件”存储为Web所用格式来实现，在弹出的对话框中选择Gif格式存储才能实现动画效果。导入-Photoshop动画制作

除了Gif外，网店或者网站中往往采用脚本代码来实现几张静态Jpg海报的轮播效果。在本例中，我们除了用Photoshop来简单的gif动画轮播图外，也会通过现阶段常见的第三方应用工具来实现脚本代码的轮播图。

除了这种轮播图外，现阶段也用AfterEffects来制作生城各种酷炫，场景应用更广泛的动效，特别是在移动端的应用中。导入-Photoshop动画制作这里通过Photoshop动画制作来完成轮播图的Gif动画，主要是展示Photoshop常用的Gif动画制作方式。利用图层可见性，也就是利用隐藏显示图层，在每一帧中，显示不同的图层。

这里的帧——就是影像动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。一帧就是一副静止的画面，连续的帧就形成动画，如影视图象等。通常说帧数，简单地说，就是在1秒钟时间里传输的图片的帧数，通常用Fps（FramesPerSecond）表示。利用图层可见性的动画制作插入视频011002.mp4利用图层可见性的动画制作

在动画制作中我们将帧可以分为几种，这里我们了解下：

关键帧——任何动画要表现运动或变化，至少前后要给出两个不同的关键状态，而中间状态的变化和衔接电脑可以自动完成，这种表示前后两个关键状态的帧叫做关键帧。

过渡帧——在两个关键帧之间，计算机自动完成过渡画面的帧叫做过渡帧。一般计算机默认可以产生不透明度、位置移动和样式效果的变化。利用过渡帧的动画制作利用过渡帧的动画制作插入视频011003.mp4

前面的操作可以被称为简化的焦点轮播图，主要是为了介绍运用Photoshop来完成Gif动画制作。

在实际网店或者网站应用中更多还是采用脚本特效来加以展示。现阶段有许多第三方工具可以来方便生成各种轮播图动画代码而无需去研究代码编写。这类第三方工具主要是一些网店装修助手，一般普通应用都是免费的。利用第三方工具生成轮播图动画利用第三方工具生成轮播图动画插入视频011004.mp4电子商务网页设计与制作Design