第9章 时间轴

第8章 样式表 内容提要 时间轴的基础知识 时间轴面板 创建时间轴动画 控制时间轴 第9章 时间轴

9.1　时间轴概述 时间轴（Timeline）亦可翻译为时间线，它是一条贯穿时间的线，用来表示网页在显示时间内发生的种种状态，利用时间轴可以实现网页的动态效果。为了更加清楚的理解时间轴的概念，先来理解动画的原理。动画的实现原理就是将画面连起来播放，产生运动的错觉。所以动画的基本单位就是一个画面，也叫做帧。而在动画中有些画面是关键的、可以影响整个动画的，这样的帧叫做关键帧。很多的画面按照时间先后顺序连起来就是动画。时间轴就是用来排列画面的顺序的。时间轴由通道组成，每一个通道里面放一个要运动的物体。关键帧用圆点表示。还有一个播放头，播放头所指的位置就是动画当前所在的帧。 第9章 时间轴

9.2　认识时间轴面板 在Dreamweaver 8中，通过选择“窗口”菜单中的 “时间轴”命令或使用组合键ALT+F9，就可以打开如图所示的时间轴面板。 第9章 时间轴

9.2 认识时间轴面板 下面介绍一下各部分的功能： 9.2　认识时间轴面板 下面介绍一下各部分的功能： 时间轴（Timeline）:用于标识动画帧数和每一帧的位置。其中每一个刻度代表一个帧，其上数字代表帧的序号。 播放头（Playback head）：在时间轴上红色矩形块就是播放头，它所指示的是在网页中显示的是哪一帧，可以通过利用鼠标拖动播放头，来查看文档中动画状态随时间的变化。播放头所在的帧数会在“当前帧”中显示出来。 动画通道（Animation channels）：显示动画层的地方，时间轴面板中有32个动画通道，表示最多可以同时进行32个动画设置。 动画条（Animation bars）：即图中的Layer5，可显示每个对象的持续时间。一行可以包含代表不同对象的多个动画条。 关键帧（Key frames）：动画条中的小圆圈是关键帧，关键帧是影响整个动画的特殊帧，可以通过设置关键帧上动画对象的属性来实现动画。一个动画条当中可以有多个关键帧。 第9章 时间轴

9.2 认识时间轴面板 行为通道（Behavior channel）：在时间轴中执行行为的通道，如有浅蓝色矩形框则表示当前帧中存在行为事件。 9.2　认识时间轴面板 行为通道（Behavior channel）：在时间轴中执行行为的通道，如有浅蓝色矩形框则表示当前帧中存在行为事件。 回放（Rewind）：可将播放头移到时间轴的初始帧。 后退（Back）：将播放头往左移动一帧。 播放（Play）：将播放头往右移动一帧。单击Play按钮并按住鼠标不放，则时间轴向前连续播放。 FPS（Frame Per Second）：每秒播放的帧数，用来计量动画速度的，可以在文本框中设置值，值越大，动画播放速度越快，反之越慢。 自动播放（Auto play）：当网页载入到浏览器时使当前时间轴自动播放。 循环（Loop）：当网页载入到浏览器时使当前时间轴无限循环播放。 时间轴编辑按钮：此按钮用于打开时间轴编辑菜单。 第9章 时间轴

9.3创建时间轴动画 创建一个时间轴动画，需要在动画通道添加对象，时间轴动画是通过层来实现的，通常我们在层当中插入对象，而后在设计编排动画栏上的关键帧，从而实现动画效果，具体的步骤如下： （1）打开“窗口”菜单，选择 “时间轴”命令，或者使用快捷键Alt+F9，打开时间轴面板。 （2）在当前文档中插入一个层，在层中插入并设置动画对象，如一段文字或一张图片，如图所示。 第9章 时间轴

9.3创建时间轴动画 （3）选择该层，将其拖拽到时间轴面板当中的动画通道中，此时，会弹出对话框提示如图9.3所示，单击“确定”按钮，就可以得到默认15帧的动画，动画栏中显示层信息，默认情况下在动画的两端自动加入了两个关键帧，如图9.4所示。 第9章 时间轴

9.3创建时间轴动画 （4）通过编辑动画栏中的关键帧来实现动画效果，例如，单击动画栏中的第一帧关键帧，在文档窗口中选择该层，在属性面板中将层左设置为80，上设置成20。然后单击第15帧关键帧，按照上述方法将层的位置设置成左为400，上为120，就可以在文档中看到层运动的轨迹，如图（所示）。 第9章 时间轴

9.3创建时间轴动画 （5）将时间轴面板中自动播放和循环勾选上，通过浏览器即可看到动画效果。这样一个简单的时间轴动画就做好了。 第9章 时间轴

9.4编辑时间轴 对时间轴的编辑，Dreamweaver中提供了3种方法： (1)通过“时间轴编辑菜单”进行编辑，可以通过9.2节中介绍的时间轴面板右上角的按钮打开，如图所示。 第9章 时间轴

9.4编辑时间轴 (2)通过在时间轴面板中任意位置右键单击，弹出快捷菜单如图9.7所示。 第9章 时间轴

9.4编辑时间轴 (3)通过使用“修改”菜单中 “时间轴”命令如图所示进行编辑。 第9章 时间轴

9.5控制时间轴 1.播放时间轴 通过时间轴面板中播放时间轴动画按钮可以实现在编辑页面当中播放动画，可以通过设置FPS的值来改变动画的播放速度，或者可以通过改变动画栏包含的帧数（拖动首尾两个关键帧或者在中间增加帧即可实现）。选中自动播放时，即在页面加载时自动播放，如需动画循环播放，需将循环选中。 2.转到时间轴帧 在时间轴面板中，当前中填写上所要跳转的帧或是将鼠标直接在时间轴面板上点击帧数标号即可。 第9章 时间轴

9.6时间轴动画实例 1 利用时间轴制作网页动画 利用Dreamweaver中时间轴和层制作一个动画场景，用花朵和文字漂浮开场，两只小狗按照设计的曲线路径进行溜冰，如图9.8所示，制作的具体步骤如下： 第9章 时间轴

9.6时间轴动画实例 （1）创建一个新的站点，在站点中新建一个页面并且命名为index.htm。 （2）在页面中插入一个一行三列的表格用于背景定位，表格的边框参数设为0，在第一行第二列中插入背景图片，且将图片大小调为宽为：1010，高为：320。将此图片作为背景。 （3）插入三个层layer1、layer2、layer3，在层layer1中写下“美丽的童年”，并且利用CSS样式将文字设置为蓝色，大小为24pt。在层layer2、layer3中分别插入事先准备好的素材玫瑰花和滑冰的小狗。并且分别将玫瑰花和小狗设为150*150和250*170，如图所示。 第9章 时间轴

9.6时间轴动画实例 第9章 时间轴

9.6时间轴动画实例 (4)将层layer1拖拽到时间轴的动画通道中，从第一帧开始，此时时间轴显示，如图9.10所示。将光标定位在最后一帧关键帧上且拖拽到50帧的位置。点击第一帧关键帧，在属性面板上将层layer1的左：430、上：20；点击最后一帧关键帧，在属性面板上将层layer1的左：650、上：20。此时文档中将会显示出一条层运动的直线路径。 第9章 时间轴

9.6时间轴动画实例 (5)仿照第4步，将层layer2拖拽到时间轴的第2个动画通道上，动画的长度同样为50帧，将第一关键帧中层的位置设为左：800、上：580,最末一关键帧中层的位置设为左：5、上：230；在动画栏中第25帧的位置单击右键弹出快捷菜单，选择 “增加关键帧”，并且编辑该关键帧，将层的位置设为左：480、上： 300；此时文档上将会显示一个平滑的曲线路径。此时时间轴如图9.11所示。 第9章 时间轴

9.6时间轴动画实例 （6）同样将层layer3拖拽到时间轴的动画栏中，从第5帧开始，将动画栏的长度拖到30帧。编辑首尾关键帧中层的位置分别为：左：1000、上： 270和左：720、上： 500。此时时间轴如图9.12所示。 第9章 时间轴

9.6时间轴动画实例 （7）为了让溜冰更加生动，我们使用 “录制层路径”来设计小狗溜冰的路径。在动画栏3中末尾关键帧上右键单击弹出快捷菜单，选择“录制层路径”命令，然后有鼠标拖动层layer3画一个射线状的路径，如图9.13所示，此时系统将自动生成时间轴上的动画栏如图9.14所示。 第9章 时间轴

9.6时间轴动画实例 （8）选中时间轴面板上的“自动播放”和 “循环”选项。保存文件，按F12即可见到动画效果。 第9章 时间轴

9.6时间轴动画实例 2 .带有行为的网页动画制作实例 利用Dreamweaver 中时间轴，结合行为和层制作一个动画场景，学唱十二生肖歌，十二生肖的剪纸图片在从左到右的滑动，并且按照顺序更换，同时每一张图片会弹出一个消息。如图9.8所示，制作的具体步骤如下： 第9章 时间轴

9.6时间轴动画实例 (1)在站点中创建一个文档页面，在文档中插入表格，并按照图9.16所示录入文字且设置格式。 第9章 时间轴

9.6时间轴动画实例 (2)在文档中插入一个层，在层中首先插入事先准备好的剪纸图案鼠，并且将图片大小设置为100*100，左：16，上：180然后将层拖到时间轴的动画栏中，并且拖动末尾关键帧到480帧。在30帧处增加关键帧，并且设置该层左：116，上：180，以此类推，每增加30帧处设置关键帧，左坐标增加100。即实现了图片整体从左向右移动。 (3)在时间轴面板的行为通道上第15帧处点击右键弹出快捷菜单，选择“添加行为”命令，利用行为面板增加一个弹出信息的行为，在该帧处会出现一个小横线，在第30帧处增加一个交换图片的行为，使之变成牛的剪纸图案，如图9.17所示。 第9章 时间轴

9.6时间轴动画实例 (4)仿照第3步，依次在15帧的倍数上添加弹出信息行为，在30帧倍数上添加交换相应图片行为，即设计完成。 (5)将FPS设置为30来调整动画的速度，将时间轴面板上自动播放和循环勾选上，按F12即可见效果。 第9章 时间轴

Thanks！ 第9章 时间轴