第十三章 时间轴

13.1　时间轴

　　时间轴描述了层和图像的属性随时间变化的情况。选择Window>Timelines（窗口>时间轴）打开时间轴控制器，如图1所示。

图1 时间轴控制器

　　在时间轴控制器中：

　　播放头（Playback head） 指示在网页中显示的是哪一帧。

　　动画通道（Animation channels）　显示动画层的地方。

　　动画条（Animation bars）即图中的Layer1，可显示每个对象的持续时间。一行可以包含代表不同对象的多个动画条。

　　关键帧（Keyframes）动画条中的小圆圈是关键帧。

　　行为通道（Behavior channel）在时间轴中执行行为的通道。

　　回放（Rewind）可将播放头移到时间轴的初始帧。

　　后退（Back）将播放头往左移动一帧。

　　播放（Play）将播放头往右移动一帧。单击Play按钮并按住鼠标不放，则时间轴向前连续播放。

　　自动播放（Autoplay）当网页载入到浏览器时使当前时间轴自动播放。

　　循环（Loop）当网页载入到浏览器时使当前时间轴无限循环播放。

13.2　创建时间轴动画

　　由于时间轴只能移动层，因此如果要移动图像或文本，则要创建一个层，然后在该层中插入图像、文本或其它类型的内容。

　　要创建时间轴动画：

　　1、在对象面板上选择 Draw layers ，在画面增加一个层（Layer1）。

　　2、在Layer1中插入GIF动画，如图2所示。

图2在层中插入小天使

　　3、直接将选中的层拖动到时间轴检查器或选择Modify>Timeline>Add Object to Timeline。此时在时间轴的第一个通道中将出现一动画条，如图1所示。

　　4、在Timeline选中 Layer1，将最后一帧拖长至30帧，点鼠标右键，在第15帧的位置插入关键帧。

　　5、选中第15帧，然后分别在显示区选中层，使鼠标变成，将层（包括图）拖向右上角，然后再在Timeline选中最后一帧，将层拖回起点位置，如图所示。

图3设置运动路径

　　6、如果希望有更复杂的动画路径，可多定义一些关键帧及在画面中的位置，按住Play（播放）按钮不放即可预览网页中的动画。

　　7、给时间轴加入互交：首先在Timeline 上选中动画条Layer1，然后在状态栏点打开行为控制器，从中选Timeline>Stop Timeline,再点将onClick改成onMouseOver，就是我们用鼠标触到小天使后就停飞，如果我们希望点他一下重新飞起来，那么再从行为控制器中选Timeline>Play Timeline，如图4所示。

图4 加入行为

按 F12预览动态效果并测试交互。

13.3　通过拖动途径创建动画

　　要通过拖动途径创建时间轴：先在页面选中一层，然后选择Modify>Timeline>Record Path of Layer（修改>时间轴>记录层的路径），在网页中拖动层以创建路径。此时，时间轴上添加了相应的动画条。

13.4　修改时间轴

　　定义时间轴的基本组件后，你就可以对其做一些诸如添加和移动帧、改变动画开始时间等等的有效改变。

　　要修改时间轴，请执行以下任何一个动作：

　　在网页中用一个时间轴控制所有动作不如用多个时间轴分别控制网页的不同部分简单。要管理多个时间轴，请使用以下选项：