第9章时间轴剖析.ppt

第9章 时间轴 第8章 样式表 内容提要 时间轴的基础知识 时间轴面板 创建时间轴动画 控制时间轴 9.1　时间轴概述 时间轴（Timeline）亦可翻译为时间线，它是一条贯穿时间的线，用来表示网页在显示时间内发生的种种状态，利用时间轴可以实现网页的动态效果。为了更加清楚的理解时间轴的概念，先来理解动画的原理。动画的实现原理就是将画面连起来播放，产生运动的错觉。所以动画的基本单位就是一个画面，也叫做帧。而在动画中有些画面是关键的、可以影响整个动画的，这样的帧叫做关键帧。很多的画面按照时间先后顺序连起来就是动画。时间轴就是用来排列画面的顺序的。时间轴由通道组成，每一个通道里面放一个要运动的物体。关键帧用圆点表示。还有一个播放头，播放头所指的位置就是动画当前所在的帧。 9.2　认识时间轴面板 在Dreamweaver 8中，通过选择“窗口”菜单中的 “时间轴”命令或使用组合键ALT+F9，就可以打开如图所示的时间轴面板。 9.2　认识时间轴面板 下面介绍一下各部分的功能： 时间轴（Timeline）:用于标识动画帧数和每一帧的位置。其中每一个刻度代表一个帧，其上数字代表帧的序号。 播放头（Playback head）：在时间轴上红色矩形块就是播放头，它所指示的是在网页中显示的是哪一帧，可以通过利用鼠标拖动播放头，来查看文档中动画状态随时间的变化。播放头所在的帧数会在“当前帧”中显示出来。 动画通道（Animation channels）：显示动画层的地方，时间轴面板中有32个动画通道，表示最多可以同时进行32个动画设置。 动画条（Animation bars）：即图中的Layer5，可显示每个对象的持续时间。一行可以包含代表不同对象的多个动画条。 关键帧（Key frames）：动画条中的小圆圈是关键帧，关键帧是影响整个动画的特殊帧，可以通过设置关键帧上动画对象的属性来实现动画。一个动画条当中可以有多个关键帧。 9.2　认识时间轴面板 行为通道（Behavior channel）：在时间轴中执行行为的通道，如有浅蓝色矩形框则表示当前帧中存在行为事件。 回放（Rewind）：可将播放头移到时间轴的初始帧。 后退（Back）：将播放头往左移动一帧。 播放（Play）：将播放头往右移动一帧。单击Play按钮并按住鼠标不放，则时间轴向前连续播放。 FPS（Frame Per Second）：每秒播放的帧数，用来计量动画速度的，可以在文本框中设置值，值越大，动画播放速度越快，反之越慢。 自动播放（Auto play）：当网页载入到浏览器时使当前时间轴自动播放。 循环（Loop）：当网页载入到浏览器时使当前时间轴无限循环播放。 时间轴编辑按钮：此按钮用于打开时间轴编辑菜单。 9.3创建时间轴动画 创建一个时间轴动画，需要在动画通道添加对象，时间轴动画是通过层来实现的，通常我们在层当中插入对象，而后在设计编排动画栏上的关键帧，从而实现动画效果，具体的步骤如下： （1）打开“窗口”菜单，选择 “时间轴”命令，或者使用快捷键Alt+F9，打开时间轴面板。 （2）在当前文档中插入一个层，在层中插入并设置动画对象，如一段文字或一张图片，如图所示。 9.3创建时间轴动画 （3）选择该层，将其拖拽到时间轴面板当中的动画通道中，此时，会弹出对话框提示如图9.3所示，单击“确定”按钮，就可以得到默认15帧的动画，动画栏中显示层信息，默认情况下在动画的两端自动加入了两个关键帧，如图9.4所示。 9.3创建时间轴动画 （4）通过编辑动画栏中的关键帧来实现动画效果，例如，单击动画栏中的第一帧关键帧，在文档窗口中选择该层，在属性面板中将层左设置为80，上设置成20。然后单击第15帧关键帧，按照上述方法将层的位置设置成左为400，上为120，就可以在文档中看到层运动的轨迹，如图（所示）。 9.3创建时间轴动画 （5）将时间轴面板中自动播放和循环勾选上，通过浏览器即可看到动画效果。这样一个简单的时间轴动画就做好了。 9.4编辑时间轴 对时间轴的编辑，Dreamweaver中提供了3种方法： (1)通过“时间轴编辑菜单”进行编辑，可以通过9.2节中介绍的时间轴面板右上角的按钮打开，如图所示。 9.4编辑时间轴 (2)通过在时间轴面板中任意位置右键单击，弹出快捷菜单如图9.7所示。 9.4编辑时间轴 (3)通过使用“修改”菜单中 “时间轴”命令如图所示进行编辑。 9.5控制时间轴 1.播放时间轴 通过时间轴面板中播放时间轴动画按钮可以实现在编辑页面当中播放动画，可以通过设置FPS的值来改变动画的播放速度，或者可以通过改变动画栏包含的帧数（拖动首尾两个关键帧或者在中间增加帧即可实现）。选中自动播放时，即在页面加载时自动播放，如需动画循环播放，需将循环选中。 2.转