第14讲时间轴

《第14讲时间轴》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Dreamweaver8中文版网页制作基础主讲人第十四讲时间轴1、认识时间轴2、创建时间轴动画1、认识时间轴1．基本概念2．显示时间轴3．时间轴面板4．播放选项5．添加对象到时间轴1.1.基本概念动画的实现原理就是将不同的画面或者是不同位置的同一个画面串连起来播放，让人产生运动的错觉。时间轴就是利用这个原理来实现页面中层的动画效果的的，它的基本单位就是一个画面，或者叫做帧。在这些画面中有些画面起着非常关键的作用，可以影响整个动画的，这样的帧叫做关键帧。时间轴也称为时间线，它是一条贯穿时间的横轴，是时间抽象概念的实体化。时间轴用于表示网页显

2、示期间发生的状态变化，用户将需要运动的网页对象放入到时间轴的通道里，然后通过对时间轴的的控制来实现网页的动画效果。时间轴的工作过程就是先把多个画面按顺序串联起来，然后再按照时间先后顺序串起来播放形成动画。1.2．显示时间轴默认情况下，时间轴是不显示出来的，使用前先将其显示出来，执行【窗口】/【时间轴】命令，这样在属性面板的下面就打开了【时间轴】面板，如图所示。1.3．时间轴面板时间轴由通道组成。每一个通道里面放一个要运动的物体，其中的关键帧用圆点表示，在时间轴上显示为方块状的为播放栏，播放栏所指的位置就是动画当前所在的帧，如下图所示。【时

3、间轴】选项框：指定当前在【时间轴】面板中显示文档的哪个时间轴。播放栏：显示当前在“文档”窗口中显示时间轴的哪一帧。帧编号：指示帧的序号。在后退按钮和播放按钮之间的数字是当前帧编号。“行为”通道：是应该在时间轴中特定帧处执行的行为的通道。动画条：显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧中的同一对象。关键帧：是动画条中已经为对象指定属性（如位置）的帧。Dreamweaver8会计算关键帧之间帧的中间值，小圆标记表示关键帧。“动画”通道：显示用于制作层和图像动画的条。1.4．播放选项：后退至起点将

4、播放栏移至时间轴中的第一帧。：后退将播放栏向左移动一帧。单击“后退”并按住鼠标按钮可向后播放时间轴。：播放将播放栏向右移动一帧。单击“播放”并按住鼠标按钮可向前播放时间轴。【自动播放】复选框：使时间轴于当前页在浏览器中加载时自动开始播放。“自动播放”将一个行为附加到页的body标签，该行为在页加载时执行“播放时间轴”操作。【循环】复选框：循环使当前时间轴于页在浏览器中打开时无限地循环。“循环”在动画的最后一帧之后将“转到时间轴帧”行为插入到“行为”通道中。在“行为”通道中双击该行为的标记可编辑此行为的参数并更改循环的次数。Fps：每秒运动

5、的帧数，用户可以通过设置帧的总数和每秒帧数(fps)来控制动画的持续时间。每秒15帧这一默认设置是比较适当的平均速率，可用于在通常的Windows系统上运行的大多数浏览器。1.5．添加对象到时间轴时间轴的操作对象一般来说都是层，先创建一个层，按Alt+F9组合键展开【时间轴】面板，然后选中层，单击鼠标右键，在右键菜单中选择【添加到时间轴】命令即可将该层添加到时间轴。2、创建时间轴动画2.1基本操作2.2创建动画方法2.3关键帧方法帧2.3录制路径方法2.1．基本操作一、插入关键帧插入关键帧方法：将鼠标光标移到时间轴，按住Ctrl键，鼠标光

6、标变成小圆圈状，左键单击需要插入关键帧的地方，此时在该位置出现一个小圆圈，表示插入了一个关键帧。并且编辑窗口中的层也自动移到与当前帧相对应的轨迹位置上。然后在编辑窗口中将层拖动适当距离后，放开鼠标，即可改变层的运动路径。如果要移动关键帧，可以直接左键单击选中关键帧，然后向左右拖动。二、添加/删除帧如要在时间轴上添加或者删除帧，则执行【修改】/【时间轴】/【添加帧】命令或者执行【修改】/【时间轴】/【删除帧】命令。三、选中动画条动画条显示每个对象的动画的持续时间，在时间轴中单击相应的动画条，即可选中一个动画条。按住Shift键再单击不同的动

7、画条，可以同时选中它们。四、改变动画时间左右拖动动画条最右端的关键帧标记，可以改变动画的播放时间。拖动整个动画条在时间轴中移动可以改变动画播放的起止时间。五、改变动画的播放速率动画的默认播放速率是每秒15帧，这是大多数浏览器的平均速率。用户可以在【Fps】文本框中输入数值来改变播放速率。数字越大播放越快，但并不是速率越快越好，有的浏览器达不到很高的速率时，就将高出的速率忽略。六、删除动画选中动画条，按Delete键即可将该动画删除。七、自动播放和循环若要让浏览器能够自动播放动画，则要选中【自动播放】复选框。一般来说都将这一项选中。将【循环

8、】复选框选中，就可以实现动画的循环播放了。2.2．创建动画方法时间轴的操作对象主要是层，若要实现对其他网页对象的动画设置，必须先将对象放入一个层中，然后才能进行动画操作。创建时间轴动画，就是往