制作层动画

　　利用时间轴，可以更改层的位置、大小、可见性和层叠顺序。对于要在页加载后执行的其他操作，时间轴也非常有用。例如：时间轴可以民更改图像标签的源文件。因此一段时间内有不同的图像出现在页面上，从而利用时间轴制作层动画。

一、时间轴面板

　　“时间轴”面板显示层和图像属性在一段时间内如何更改。执行“窗口”->“时间轴”命令，打开“时间轴”面板。也可以通过快捷键“Alt+F9”打开或关闭“时间轴”面板。

• 时间轴弹出式菜单：指定当前在“时间轴”面板中显示文档的时间轴。
• 播放栏：显示当前在文档窗口中显示时间轴的帧。
• 帧编号：指示帧的编号。后退和播放按钮之间的数字是当前帧编号。可以通过设置帧的总数和每秒帧数(fps)来控制动画的持续时间。
• 注意：过快的速率可能不会提高性能。浏览器始终会播放动画的每一帧，即使它们无法达到指定的帧速率。如果帧速率超过浏览器可以支持的速率，则将被忽略。

二、播放选项

• 倒带：将播放栏移至时间轴的第一帧。
• 后退：每单击一次，播放栏向左移动一帧。
• 播放：每单击一次，播放栏向右移动一帧。
• 自动播放：Dreamweaver在页面的文档中自动添加动画行为，使页面在浏览器中被显示出来时开始播放动画。
• 循环：设置动画是否循环播放。

三、图像移动动画

　　（1）利用时间制作简单的图像或文字移动的动画，操作方法如下：

• 新建一个文档，单击插入栏“常用”选项卡的“描绘层”按钮，在文档的“设计”视图中通过拖动鼠标的方法来绘制层，并在层中插入一张图片。
• 打开时间轴面板，选中层并拖拽层的选择手柄到时间轴中，这时在时间轴面板中出现一条时间轴。
• 选中时间轴的最后一帧，拖拽图层到任意位置，这时已经完成了动画。
• 在播放选项中勾选“自动播放”复选框，就可以浏览动画效果了。

　　动画效果演示1

　　（2）如果觉得动画太简单，可以在时间轴的中间添加关键帧，改变动画的运动路径。

　　动画效果演示2

四、路径动画实例

• 新建一个文档，在文档中画一个800*600像素的表格，且让表格居中，将海洋图片bg.jpg作为表格背景。
• 绘制一个层，层中插入动画文件yu.gif。并将该层放在背景图的右下角。
• 打开“时间轴”面板，选中层，在“时间轴”面板右击，在弹出的快捷键中选择“录制层路径”命令。
• 在文档窗口中选中层，以任意路径拖动层。
• 在“时间轴”面板中选中“自动播放”和“循环”复选框。
• 注意：对于动画运行的速度，可以通过改变fps的值对其进行调整，值越小，运行速度越慢。

　　动画效果演示3

五、多层路径动画

　　在多层时间轴上建立路径动画，产生多图不同的运动效果。

　　动画效果演示4

返回主页