网页设计(CS5)-第8讲-时间线动画

1、Dreamweaver CS5第第8 8讲讲时间线动画时间线动画1 认识时间轴2 创建时间轴动画第第8讲讲时间线动画时间线动画Dreamweaver CS5认识时间轴认识时间轴1网页设计网页设计第第8 8讲讲1基本概念2显示时间轴3时间轴面板4播放选项5添加对象到时间轴基本概念（1）动画 动画的实现原理就是将不同的画面或者是不同位置的同一个画面串连起来播放，让人产生运动的错觉。时间轴就是利用这个原理来实现页面中层的动画效果的的，它的基本单位就是一个画面，或者叫做帧。在这些画面中有些画面起着非常关键的作用，可以影响整个动画的，这样的帧叫做关键帧。认识时间轴认识时间轴1网页设计网页设计第第8 8讲

2、讲基本概念（2）时间轴 时间轴也称为时间线，它是一条贯穿时间的横轴，是时间抽象概念的实体化。时间轴用于表示网页显示期间发生的状态变化，用户将需要运动的网页对象放入到时间轴的通道里，然后通过对时间轴的的控制来实现网页的动画效果。 时间轴的工作过程就是先把多个画面按顺序串联起来，然后再按照时间先后顺序串起来播放形成动画。认识时间轴认识时间轴1网页设计网页设计第第8 8讲讲显示时间轴默认情况下，时间轴是不显示出来的，使用前先将其显示出来 ，执行【窗口】/【时间轴】命令，这样在属性面板的下面就打开了【时间轴】面板，如图所示 。认识时间轴认识时间轴1网页设计网页设计第第8 8讲讲时间轴面板时间轴由通道组

3、成。每一个通道里面放一个要运动的物体，其中的关键帧用圆点表示，在时间轴上显示为方块状的为播放栏，播放栏所指的位置就是动画当前所在的帧，如下图所示。认识时间轴认识时间轴1网页设计网页设计第第8 8讲讲时间轴面板认识时间轴认识时间轴1网页设计网页设计第第8 8讲讲【时间轴】选项框：指定当前在【时间轴】面板中显示文档的哪个时间轴。【播放栏】显示当前在“文档”窗口中显示时间轴的哪一帧。【帧编号】指示帧的序号。在后退按钮和播放按钮之间的数字是当前帧编号。【行为通道】 是应该在时间轴中特定帧处执行的行为的通道。时间轴面板认识时间轴认识时间轴1网页设计网页设计第第8 8讲讲【动画条】显示每个对象的动画的持续

4、时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧中的同一对象。【关键帧】是动画条中已经为对象指定属性（如位置）的帧。Dreamweaver 会计算关键帧之间帧的中间值，小圆标记表示关键帧。【动画通道】显示用于制作层和图像动画的条。播放选项认识时间轴认识时间轴1网页设计网页设计第第8 8讲讲 ：后退至起点将播放栏移至时间轴中的第一帧。 ：后退将播放栏向左移动一帧。单击“后退”并按住鼠标按钮可向后播放时间轴。 ：播放将播放栏向右移动一帧。单击“播放”并按住鼠标按钮可向前播放时间轴。【自动播放】复选框：使时间轴于当前页在浏览器中加载时自动开始播放。“自动播放”将一个行为附加到页的 b

5、ody 标签，该行为在页加载时执行“播放时间轴”操作。播放选项认识时间轴认识时间轴1网页设计网页设计第第8 8讲讲Fps：每秒运动的帧数，用户可以通过设置帧的总数和每秒帧数 (fps) 来控制动画的持续时间。每秒 15 帧这一默认设置是比较适当的平均速率，可用于在通常的 Windows 系统上运行的大多数浏览器。添加对象到时间轴认识时间轴认识时间轴1网页设计网页设计第第8 8讲讲 时间轴的操作对象一般来说都是层，先创建一个层，按Alt+ F9组合键展开【时间轴】面板 ，然后选中层，单击鼠标右键，在右键菜单中选择【添加到时间轴】命令 即可将该层添加到时间轴。创建时间轴动画创建时间轴动画2网页设计

6、网页设计第第8 8讲讲1 基本操作2 创建动画方法3 关键帧方法帧4 录制路径方法创建时间轴动画创建时间轴动画2网页设计网页设计第第8 8讲讲基本操作一、插入关键帧 插入关键帧方法：将鼠标光标移到时间轴，按住Ctrl键，鼠标光标变成小圆圈状，左键单击需要插入关键帧的地方，此时在该位置出现一个小圆圈，表示插入了一个关键帧。并且编辑窗口中的层也自动移到与当前帧相对应的轨迹位置上。然后在编辑窗口中将层拖动适当距离后，放开鼠标，即可改变层的运动路径。如果要移动关键帧，可以直接左键单击选中关键帧，然后向左右拖动。二、添加/删除帧 如要在时间轴上添加或者删除帧，则执行【修改】/【时间轴】/【添加帧】命令或

7、者执行【修改】/【时间轴】/【删除帧】命令创建时间轴动画创建时间轴动画2网页设计网页设计第第8 8讲讲三、选中动画条 动画条显示每个对象的动画的持续时间，在时间轴中单击相应的动画条，即可选中一个动画条。按住Shift键再单击不同的动画条，可以同时选中它们。四、改变动画时间 左右拖动动画条最右端的关键帧标记，可以改变动画的播放时间。拖动整个动画条在时间轴中移动可以改变动画播放的起止时间。五、改变动画的播放速率 动画的默认播放速率是每秒15帧，这是大多数浏览器的平均速率。用户可以在【Fps】文本框中输入数值来改变播放速率。数字越大播放越快，但并不是速率越快越好，有的浏览器达不到很高的速率时，就将高

8、出的速率忽略。创建时间轴动画创建时间轴动画2网页设计网页设计第第8 8讲讲六、删除动画 选中动画条，按Delete键即可将该动画删除。七、自动播放和循环 若要让浏览器能够自动播放动画，则要选中【自动播放】复选框。一般来说都将这一项选中。将【循环】复选框选中，就可以实现动画的循环播放了。创建时间轴动画创建时间轴动画2网页设计网页设计第第8 8讲讲创建动画方法 时间轴的操作对象主要是层，若要实现对其他网页对象的动画设置，必须先将对象放入一个层中，然后才能进行动画操作 。 创建时间轴动画，就是往时间通道上添加层，构建动画条，创建关键帧，指定层在文档中处于关键帧时的位置，再串联播放，从而实现动画。 利用时间轴和层创建动画有两种方法：关键帧方法和录制层路径方法 。 创建时间轴动画创建时间轴动画2网页设计网页设计第第8 8讲讲关键帧方法操作：（1）将层添加到时间轴上（2）拖动右侧关键帧延长时间（3）单击第二个关键帧后在编辑窗口拖动层（4）在时间轴插入一关键帧（5）