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

Dreamweaver CS5 第8讲·时间线动画 1 认识时间轴 2 创建时间轴动画 第8讲·时间线动画 Dreamweaver CS5 认识时间轴 1 网页设计·第8讲 1．基本概念 2．显示时间轴 3．时间轴面板 4．播放选项 5．添加对象到时间轴 基本概念 （1）动画 动画的实现原理就是将不同的画面或者是不同位置的同一个画面串连起来播放，让人产生运动的错觉。时间轴就是利用这个原理来实现页面中层的动画效果的的，它的基本单位就是一个画面，或者叫做帧。在这些画面中有些画面起着非常关键的作用，可以影响整个动画的，这样的帧叫做关键帧。 认识时间轴 1 网页设计·第8讲 基本概念 （2）时间轴 时间轴也称为时间线，它是一条贯穿时间的横轴，是时间抽象概念的实体化。时间轴用于表示网页显示期间发生的状态变化，用户将需要运动的网页对象放入到时间轴的通道里，然后通过对时间轴的的控制来实现网页的动画效果。 时间轴的工作过程就是先把多个画面按顺序串联起来，然后再按照时间先后顺序串起来播放形成动画。 认识时间轴 1 网页设计·第8讲 显示时间轴 默认情况下，时间轴是不显示出来的，使用前先将其显示出来 ，执行【窗口】/【时间轴】命令，这样在属性面板的下面就打开了【时间轴】面板，如图所示 。 认识时间轴 1 网页设计·第8讲 时间轴面板 时间轴由通道组成。每一个通道里面放一个要运动的物体，其中的关键帧用圆点表示，在时间轴上显示为方块状的为播放栏，播放栏所指的位置就是动画当前所在的帧，如下图所示。 认识时间轴 1 网页设计·第8讲 时间轴面板 认识时间轴 1 网页设计·第8讲 【时间轴】选项框：指定当前在【时间轴】面板中显示文档的哪个时间轴。 【播放栏】显示当前在“文档”窗口中显示时间轴的哪一帧。 【帧编号】指示帧的序号。在后退按钮和播放按钮之间的数字是当前帧编号。 【行为通道】 是应该在时间轴中特定帧处执行的行为的通道。 时间轴面板 认识时间轴 1 网页设计·第8讲 【动画条】显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧中的同一对象。 【关键帧】是动画条中已经为对象指定属性（如位置）的帧。Dreamweaver 会计算关键帧之间帧的中间值，小圆标记表示关键帧。 【动画通道】显示用于制作层和图像动画的条。 播放选项 认识时间轴 1 网页设计·第8讲 ：后退至起点将播放栏移至时间轴中的第一帧。 ：后退将播放栏向左移动一帧。单击“后退”并按住鼠标按钮可向后播放时间轴。 ：播放将播放栏向右移动一帧。单击“播放”并按住鼠标按钮可向前播放时间轴。 【自动播放】复选框：使时间轴于当前页在浏览器中加载时自动开始播放。“自动播放”将一个行为附加到页的 body 标签，该行为在页加载时执行“播放时间轴”操作。 播放选项 认识时间轴 1 网页设计·第8讲 Fps：每秒运动的帧数，用户可以通过设置帧的总数和每秒帧数 (fps) 来控制动画的持续时间。每秒 15 帧这一默认设置是比较适当的平均速率，可用于在通常的 Windows 系统上运行的大多数浏览器。 添加对象到时间轴 认识时间轴 1 网页设计·第8讲 时间轴的操作对象一般来说都是层，先创建一个层，按Alt+ F9组合键展开【时间轴】面板 ，然后选中层，单击鼠标右键，在右键菜单中选择【添加到时间轴】命令 即可将该层添加到时间轴。 创建时间轴动画 2 网页设计·第8讲 1 基本操作 2 创建动画方法 3 关键帧方法帧 4 录制路径方法 创建时间轴动画 2 网页设计·第8讲 基本操作 一、插入关键帧 插入关键帧方法：将鼠标光标移到时间轴，按住Ctrl键，鼠标光标变成小圆圈状，左键单击需要插入关键帧的地方，此时在该位置出现一个小圆圈，表示插入了一个关键帧。并且编辑窗口中的层也自动移到与当前帧相对应的轨迹位置上。然后在编辑窗口中将层拖动适当距离后，放开鼠标，即可改变层的运动路径。如果要移动关键帧，可以直接左键单击选中关键帧，然后向左右拖动。 二、添加/删除帧 如要在时间轴上添加或者删除帧，则执行【修改】/【时间轴】/【添加帧】命令或者执行【修改】/【时间轴】/【删除帧】命令 创建时间轴动画 2 网页设计·第8讲 三、选中动画条 动画条显示每个对象的动画的持续时间，在时间轴中单击相应的动画条，即可选中一个动画条。按住Shift键再单击不同的动画