清华大学-网页设计培训教程-Dreamweaver-9章.pptVIP

第9章 创建网页动画 第9章 创建网页动画 教学提示：本章介绍【时间轴】面板以及使用时间轴的各种方法，让读者了解如何创建时间轴动画、如何为时间轴添加行为、如何应用插件实现时间轴的特殊效果和创建各种不同的层动画效果。 教学目标：通过本章内容的学习，读者可以掌握设计网页的动态效果的一般方法。 第9章 创建网页动画 9.1 网页动画利器——时间轴 9.2 将时间轴与行为结合起来 9.3 用插件实现层动画效果 9.4 精彩的网页过渡效果 9.5 上 机 实 战 9.1 网页动画利器——时间轴 9.1.1 【时间轴】面板 9.1.2 创建时间轴动画 9.1.3 修改时间轴动画 9.1 网页动画利器——时间轴 时间轴也叫等时线，用于表示网页存活时间中发生的各种状态。通过时间轴上不同部位放置的不同内容，就可以实现网页元素的动态效果。利用时间轴构建动态网页最大的好处是，它是通过往文档中添加JavaScript代码来实现网页的动态效果，不需要任何ActiveX控件、任何插件和任何Java小程序，具有极好的兼容性。 利用时间轴，可以创建各种类型的动态效果，例如，可以改变层的位置、大小、可见性、重叠顺序等。利用时间轴，还可以实现在页面载入后进行其他类型的动作，例如可以改变图像源文件，在特定时间上执行相应的行为等。 9.1.1 【时间轴】面板 时间轴主要是通过【时间轴】面板构建的。用户可以选择【窗口】|【时间轴】命令，如图9.1所示，或按Alt+F9组合键，即可以显示如图9.2所示的【时间轴】面板。 从图9.2可以看出，【时间轴】面板主要由时间轴下拉列表框、行为通道、动画通道、动画条、控制按钮和控制选项等部分组成。 下面介绍【时间轴】面板上的主要元素。 【时间轴下拉列表框】主要用于控制哪条时间轴显示在【时间轴】面板上。在下拉列表中，可以选择不同的时间轴，可以在【时间轴】面板上显示不同的时间轴设置。 在【行为通道】上，将显示为时间轴上相应时间中所附加的行为，浅蓝色的方块表示存在行为。 在【帧数】这一行中，显示时间轴上不同时间对应的动画帧。 【回放头】是位于帧数行上的红色方块，它表明当前的动画放映的位置，通过在【时间轴】面板上拖动回放头，可以在文档窗口中看到相应时间上动画放映的状态。同时，当前回放头所在的帧位置会显示在【时间轴】面板上方的前进箭头按钮和后退箭头按钮之间的文本框中。 9.1.1 【时间轴】面板 在【时间轴】面板上有33个【动画通道】，分别从1排列至33，表示可以在同一时间进行33路动画设置。一旦某个动画通道上存在动画，就会显示动画条。 【动画条】表明某个对象在某段时间内的持续状态，动画条是真正的动画实体。其中一些空白圆圈表明关键帧。在一个动画通道上可以包含多个动画条，表示多个不同的对象。不同的动画条在同一帧内不能控制相同的对象。 【关键帧】就是由用户为对象所指定的在某一确定时刻(帧)上的状态。Dreamweaver会自动根据两个关键帧的位置计算对象在其间的动作。例如，要使对象直线运动，只需要定义开始和结束的位置，这两个位置就是关键帧，Dreamweaver会根据直线的开始和结束位置自动计算中间状态。在动画条上，关键帧以一个圆圈的形式表示。 单击【返回】按钮，可以使回放头返回到动画的开始位置。 单击【后退】按钮，可以将动画后退一帧，连续单击后退按钮，可以向后播放 动画。 单击【播放】按钮，可以将动画播放一帧，连续单击播放按钮，可以播放动画。 在Fps(每秒帧数)文本框中，可以设置动画播放的速度。用户可以直接输入每秒帧数的值。 选中【自动播放】复选框，则当网页被载入后自动播放动画。如果取消选中该复选框，则网页载入之后，动画并不播放，用户可以利用为对象附加行为的方法，提供播放动画的命令。 选中【循环】复选框，则动画播放完毕后会自动重新播放，即动画将不断地循环播放，直至用户离开页面。取消选中该复选框，则动画只播放一次。 9.1.1 【时间轴】面板 9.1.1 【时间轴】面板 9.1.2 创建时间轴动画 要创建时间轴动画，简而言之，就是往动画通道上添加对象，构建动画条，然后构建动画条上的关键帧，并从文档窗口中设置对象在关键帧上的位置，从而完成动画的创作。 1. 创建基本动画 利用时间轴，用户可以在网页上创建层的动画效果。 要利用时间轴构建层的基本动画，其具体操作如下。 (1) 将层移动到动画的起始位置，该操作实际上就是指定起始的关键帧。选中要制作动画的层。 (2) 选择【修改】|【时间轴】|【增加对象到时间轴】命令，即可在动画通道中添加一个对应该层的动画条。也可以直接将层拖动到【时间轴】面板上的相应位置来创建动画条。从动画条上，可以看到层名称。 (3) 拖动动画条上最右端的关键帧标记，可