《Dreamweaver 8中文版网页制作 机房上课版 教学课件 PPT 作者 王正成 第14讲时间轴》由会员分享，可在线阅读，更多相关《Dreamweaver 8中文版网页制作 机房上课版 教学课件 PPT 作者 王正成 第14讲时间轴（16页珍藏版）》请在金锄头文库上搜索。
1、第十四讲 时间轴 1、认识时间轴 2、创建时间轴动画,1、认识时间轴,1基本概念 2显示时间轴 3时间轴面板 4播放选项 5添加对象到时间轴,1.1. 基本概念,动画的实现原理就是将不同的画面或者是不同位置的同一个画面串连起来播放，让人产生运动的错觉。时间轴就是利用这个原理来实现页面中层的动画效果的的，它的基本单位就是一个画面，或者叫做帧。在这些画面中有些画面起着非常关键的作用，可以影响整个动画的，这样的帧叫做关键帧。 时间轴也称为时间线，它是一条贯穿时间的横轴，是时间抽象概念的实体化。时间轴用于表示网页显示期间发生的状态变化，用户将需要运动的网页对象放入到时间轴的通道里，然后通过对时间轴的的
2、控制来实现网页的动画效果。 时间轴的工作过程就是先把多个画面按顺序串联起来，然后再按照时间先后顺序串起来播放形成动画。,1.2显示时间轴,默认情况下，时间轴是不显示出来的，使用前先将其显示出来 ，执行【窗口】/【时间轴】命令，这样在属性面板的下面就打开了【时间轴】面板，如图所示 。,1.3时间轴面板,时间轴由通道组成。每一个通道里面放一个要运动的物体，其中的关键帧用圆点表示，在时间轴上显示为方块状的为播放栏，播放栏所指的位置就是动画当前所在的帧，如下图所示。,【时间轴】选项框：指定当前在【时间轴】面板中显示文档的哪个时间轴。 播放栏：显示当前在“文档”窗口中显示时间轴的哪一帧。 帧编号：指示帧
3、的序号。在后退按钮和播放按钮之间的数字是当前帧编号。 “行为”通道：是应该在时间轴中特定帧处执行的行为的通道。 动画条：显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧中的同一对象。 关键帧：是动画条中已经为对象指定属性（如位置）的帧。Dreamweaver 8会计算关键帧之间帧的中间值，小圆标记表示关键帧。 “动画”通道：显示用于制作层和图像动画的条。,1.4播放选项,：后退至起点将播放栏移至时间轴中的第一帧。 ：后退将播放栏向左移动一帧。单击“后退”并按住鼠标按钮可向后播放时间轴。 ：播放将播放栏向右移动一帧。单击“播放”并按住鼠标按钮可向前播放时间
4、轴。 【自动播放】复选框：使时间轴于当前页在浏览器中加载时自动开始播放。“自动播放”将一个行为附加到页的 body 标签，该行为在页加载时执行“播放时间轴”操作。 【循环】复选框：循环使当前时间轴于页在浏览器中打开时无限地循环。“循环”在动画的最后一帧之后将“转到时间轴帧”行为插入到“行为”通道中。在“行为”通道中双击该行为的标记可编辑此行为的参数并更改循环的次数。 Fps：每秒运动的帧数，用户可以通过设置帧的总数和每秒帧数 (fps) 来控制动画的持续时间。每秒 15 帧这一默认设置是比较适当的平均速率，可用于在通常的 Windows 系统上运行的大多数浏览器。,1.5添加对象到时间轴,时间
5、轴的操作对象一般来说都是层，先创建一个层，按Alt+ F9组合键展开【时间轴】面板 ，然后选中层，单击鼠标右键，在右键菜单中选择【添加到时间轴】命令 即可将该层添加到时间轴。,2、 创建时间轴动画,2.1 基本操作 2.2 创建动画方法 2.3 关键帧方法帧 2.3 录制路径方法,2.1基本操作,一、插入关键帧 插入关键帧方法：将鼠标光标移到时间轴，按住Ctrl键，鼠标光标变成小圆圈状，左键单击需要插入关键帧的地方，此时在该位置出现一个小圆圈，表示插入了一个关键帧。并且编辑窗口中的层也自动移到与当前帧相对应的轨迹位置上。然后在编辑窗口中将层拖动适当距离后，放开鼠标，即可改变层的运动路径。 如果
6、要移动关键帧，可以直接左键单击选中关键帧，然后向左右拖动。 二、添加/删除帧 如要在时间轴上添加或者删除帧，则执行【修改】/【时间轴】/【添加帧】命令或者执行【修改】/【时间轴】/【删除帧】命令。,三、选中动画条 动画条显示每个对象的动画的持续时间，在时间轴中单击相应的动画条，即可选中一个动画条。按住Shift键再单击不同的动画条，可以同时选中它们。 四、改变动画时间 左右拖动动画条最右端的关键帧标记，可以改变动画的播放时间。拖动整个动画条在时间轴中移动可以改变动画播放的起止时间。 五、改变动画的播放速率 动画的默认播放速率是每秒15帧，这是大多数浏览器的平均速率。用户可以在【Fps】文本框中
7、输入数值来改变播放速率。数字越大播放越快，但并不是速率越快越好，有的浏览器达不到很高的速率时，就将高出的速率忽略。 六、删除动画 选中动画条，按Delete键即可将该动画删除。 七、自动播放和循环 若要让浏览器能够自动播放动画，则要选中【自动播放】复选框。一般来说都将这一项选中。将【循环】复选框选中，就可以实现动画的循环播放了。,2.2创建动画方法,时间轴的操作对象主要是层，若要实现对其他网页对象的动画设置，必须先将对象放入一个层中，然后才能进行动画操作 。 创建时间轴动画，就是往时间通道上添加层，构建动画条，创建关键帧，指定层在文档中处于关键帧时的位置，再串联播放，从而实现动画。 利用时间轴和层创建动画有两种方法：关键帧方法和录制层路径方法 。,2.3关键帧方法,操作：将层添加到时间轴上 拖动右侧关键帧延长时间 单击第二个关键帧后在编辑窗口拖动层 在时间轴插入一关键帧 在窗口的关键帧处拖拉层形成曲线轨迹。,2.4录制路径法,操作：将层添加到时间轴上选中层在右键快捷菜单中单击【记录路径】命令项 在编辑窗口中按住鼠标左键拖动层录制路径录制完成,讲课结束 下课休息,
