利用时间线制作动画

1、利用时间线制作动画第1页，共35页，2022年，5月20日，13点54分，星期一时间线，大家一定不会陌生，许多动画软件（如directro、flash等）都有它的踪影。Timeline(时间线)是DW的技术精华之一，运用时间线可以轻松创建动画，不用任何插件。第2页，共35页，2022年，5月20日，13点54分，星期一8.1认识时间线时间线是一种用来控制网页中的层在每一秒的位置的工具。对DW来说，时间线是真正体现网页魅力的手段。用时间线可以实现动画。动画的实现原理是将画面连起来播放，产生运动的效果，所以动画的基本单位就是一个画面，也叫做帧。在动画中有些画面是关键的，可以影响整个动画，这样的帧叫

2、做关键帧。第3页，共35页，2022年，5月20日，13点54分，星期一8.2创建时间线动画时间线通过不同的时间改变层的位置、大小、可见性和叠放顺序等来创建动画。时间线不能直接控制页面中的对象，它控制的是放置这些对象的层，如果要使图像、文本等对象产生动画效果，必须将其置于层中。下面我们创建一个最简单的时间线动画，以对时间线有一个最基本的了解。第4页，共35页，2022年，5月20日，13点54分，星期一一个简单的直线运动的时间线动画1.设计目标：建立一个做直线运动的时间线动画。2、素材准备：将网页中需要用到的图片放置到本地站点内。说明：为网页添加背景图像的方法如下：按ctrl+j键，在弹出的“

3、页面属性”对话框中，单击“背景图片”进行设置。第5页，共35页，2022年，5月20日，13点54分，星期一3.实现步骤：（1）在页面中添加一个新层，在层中插入图像，然后将层移动到动画的起始位置。（2）在菜单栏中选择“窗口”“时间线”命令打开时间线面板。（3）选择要创建动画的层。（4）单击时间线面板中的弹出菜单按钮，在弹出的菜单中选择“添加对象”或用鼠标拖动图层到时间线的第一帧处。第6页，共35页，2022年，5月20日，13点54分，星期一（5）当第一次在时间线中添加对象时，会弹出提示框，告诉你可以改变该层的大小、位置、层顺序以及可见性。单击“确定”按钮，这时在时间线通道中将出现一个紫色动画

4、条，动画条中显示了层的名称。第7页，共35页，2022年，5月20日，13点54分，星期一（6）单击动画条尾部的关键帧位置（注意播放头也跟着移动到该处），将动画层移动到动画结束的位置，这时从动画起始位置到结束位置有一条线显示，这就是层的运动轨迹。（7）按播放按钮，可直接在网页中预览时间线动画。层的运动轨迹第8页，共35页，2022年，5月20日，13点54分，星期一（8）如果想在浏览器中预览动画效果，应该进行以下设置：A、选中“自动播放”复选框，否则浏览器中的动画是不会自动播放的。B、选中“循环”复选框，否则动画只在浏览器中播放一次。C、预览网页，网页保存到本地站点内。第9页，共35页，202

5、2年，5月20日，13点54分，星期一认识时间线面板“timeline(时间线)”面板描绘了层和图像随时间变化的属性。在菜单栏中选择“窗口”“其它”“时间轴”命令打开时间线面板。时间线面板所包含的控件如下：时间线下拉菜单返回首帧后退一帧播放头所在帧播放每称帧数行为通道帧数动画通道行为通道播放头动画条第10页，共35页，2022年，5月20日，13点54分，星期一时间线下拉菜单：指定当前文档的哪个时间线显示在时间线面板上。行为通道：显示时间线中某个特定帧应执行的行为，浅蓝色方块表示行为的存在。播放头：表示当前动画播放的位置，用红色方块表示。动画通道：共支持32个通道，一旦某个通道上有动画，就会显

6、示动画条，一个通道上可以包含多个代表不同对象的动画条。第11页，共35页，2022年，5月20日，13点54分，星期一动画条：显示每个对象持续的时间，不同动画条在同一帧内不能控制相同对象。关键帧：指为某个对象指定属性的帧，两个关键帧之间的过渡帧由DW自动生成，有小圆圈标记的是关键帧。返回首帧：将播放头移到时间线的第一帧后退一帧：将播放头向左移一帧，单击并按住鼠标不放可连续反向播放时间线第12页，共35页，2022年，5月20日，13点54分，星期一播放头所在帧：显示播放头当前所在帧的位置播放：将播放头向右移动一帧，单击并按住鼠标不放可以连续播放时间线每秒帧数：Fps是动画播放的速度，默认设置是

7、每秒15帧。Fps的值越大，相同帧数的动画显示的速度越快。通过设置总帧数和每秒帧数，可以控制动画的持续时间自动播放：选择该复选框，则页面在载入浏览器后自动播放动画循环：选择该复选框，则页面动画播放完毕后自动重新播放。第13页，共35页，2022年，5月20日，13点54分，星期一一个曲线运动的时间线动画之前我们制作的动画是最简单的只有起点与终点的直线运动的动画。如果仅仅这样看起来很生硬，下面我们来制作曲线运动的时间线实例，让小鸟运动的路径变成弯曲的。1.设计目标：把做直线运动的时间线动画，改为做曲线运动。第14页，共35页，2022年，5月20日，13点54分，星期一2.实现步骤（1）打开制作

8、鸟的动画保存的网页（2）打开时间线面板，在时间线面板中，取消“循环”复选框。（3）用鼠标拖拽动画条右端关键帧标记，将第15帧拖拽到第45帧处，改变动画长度，并选择第45帧（我们对帧长进行扩充，如果在15帧内完成显得太仓促了，45帧长度相对适中）。第15页，共35页，2022年，5月20日，13点54分，星期一（4）选择动画条的第15帧，单击鼠标右键（或鼠标左键单击时间线面板中的弹出菜单按钮），从弹出的快捷菜单中选择“增加关键帧”，添加一个关键帧。（5）移动层使运动轨迹呈现曲线状。（6）按ctrl键，单击动画条的第30帧，再添加一个关键帧。（7）移动层使运动轨迹呈现曲线状。第16页，共35页，2

9、022年，5月20日，13点54分，星期一移动层使运动轨迹呈曲线状态第17页，共35页，2022年，5月20日，13点54分，星期一（8）选中“循环”复选框，预览动画效果。（9）通过预览动画，发现小鸟的飞行速度太快，可以将“Fps”中的每秒帧数从15改为8，这样可以降低小鸟的飞行速度。（10）保存网页文件。对于初学者来说，在建立时间线动画时有时会遇到这样的问题：明明是按照书上的步骤做的，但就是无法显示出层的运动轨迹，这样就无法使层动起来，原因有：第18页，共35页，2022年，5月20日，13点54分，星期一（1）在选择创建动画时，选中的不是层，而是把层中的对象（如图像等）选中，这样加到时间线

10、中的对象就不是层，而是层中的对象，这时再移动层自然不会出现层的运动轨迹。正确的方法是一定要选中层，选择图像和选择层的区别如图：第19页，共35页，2022年，5月20日，13点54分，星期一（2）选中的不是动画条尾部的关键帧，而是动画条尾部的普通帧。对于普通帧来说，其位置的特性与它前面的关键帧相同，所以这时移动层也不会出现层的运动轨迹。从这个例子中知道，要使动画做曲线运动，首选必须在适当的位置加入关键帧，然后对应的关键帧处移动动画层。当曲线运动的轨迹较简单时，这种方法简单有效；但要创建复杂轨迹的动画时，这种方法就显得比较麻烦了。下面介绍一种拖动层记录路径的方法，可以很方便地创建复杂轨迹的动画。

11、第20页，共35页，2022年，5月20日，13点54分，星期一创建复杂路径的时间线动画实例1.设计目标：创建具有复杂路径的时间线动画，使动画的运行路线完全由用户设定。2.页面分析：创建具有复杂路径的时间线动画，如果仅仅只是添加关键帧，则制作过程将会相当麻烦，并且不容易控制。在这种情况下，使用拖动时记录层的路径的方法将会更方便，可以创建任意复杂路径的动画。第21页，共35页，2022年，5月20日，13点54分，星期一3.实现步骤（1）新建一个图层，并在图层中插入图像。移动该层到动画的起始位置。（2）在菜单中选择“修改”“时间轴”“录制层路径”命令;或单击弹出菜单按钮，从弹出的快捷菜单中选择“

12、录制层路径”（3）在页面上按自己的意愿拖动图层以创建路径。第22页，共35页，2022年，5月20日，13点54分，星期一拖动层记录移动路径（生成不规则的运动轨迹）（4）在动画的结束位置处释放鼠标，DW会自动在时间线中添加一个动画条，并添加适当数量的关键帧。第23页，共35页，2022年，5月20日，13点54分，星期一（5）选中“自动播放”和“循环”复选框。（6）预览动画，将网页保存到本地站点中。系统自动生成适当数量的关键帧第24页，共35页，2022年，5月20日，13点54分，星期一8.3使用时间线改变图像和层属性除了可利用时间线移动层之外，还可以用时间线在不同的关键帧改变图像的源文件、

13、层的大小、可见性和叠放顺序，从页增强动画效果。下面通过两个实例，分别介绍利用时间线改变图像的源文件实现幻灯片效果和通过改变层的大小实现图像的渐推式显示效果。第25页，共35页，2022年，5月20日，13点54分，星期一实现幻灯片效果（不用层）幻灯片用flash制作非常容易，效果也非常好，可是它需要插件的支持。用java制作，则影响网页的浏览速度。使用DW也可以实现，它的效果虽不及flash和java，但是它有着制作简单、浏览速度快、无需插件支持等优越性。用DW实现幻灯片的效果有两种，一种是利用时间线和显示隐藏图层的方法实现；第26页，共35页，2022年，5月20日，13点54分，星期一另一

14、种则是利用image的方式实现。前者要做几张幻灯片就需要几个隐含层，并要利用behaviors（行为）事件进行显示-隐藏层的操作，实现起来比较麻烦；后者则是利用时间线可以改变图像的src属性，并在不同的时间显示不同的图像的特点，使用image动画条，要做几张幻灯片就设置几个关键帧，通过在关键帧处改变图像来源文件的方法来实现，简单易行。下面介绍第二种方法：第27页，共35页，2022年，5月20日，13点54分，星期一1.设计目标：实现幻灯片的轮流播放效果，使一组图像不停地轮换显示。2.素材准备：先准备3张大小相同的图像，否则会有变形的情况发生。3.实现步骤（1）在对象面板中单击图片按钮，插入第

15、一张图像。（2）确认时间线面板已打开，选取刚插入的图像，将其拖拽到时间线面板中。第28页，共35页，2022年，5月20日，13点54分，星期一（3）当出现提示框时，单击“确定”按钮，这时在时间线通道中将出现一个紫色动画条，动画条中显示了图像的名称。（4）用鼠标拖拽动画条右端关键帧标记，将第15帧拖拽到第30帧处，改变动画长度（5）打开属性面板，在菜单栏中选择“窗口”“属性”（6）按ctrl键，单击动画条的第10帧，添加一个关键帧。第29页，共35页，2022年，5月20日，13点54分，星期一（7）在属性面板的“源文件”栏输入该关键帧显示的第二张图象的路径及文件名，或单击“源文件”栏右边的浏

16、览按钮，在弹出的“选择图像源”对话框中选择源文件。（8）重复步骤（6）、（7），在动画的第20帧处添加关键帧，并插入第三张图像。（9）选中“自动播放”和“循环”复选框。（10）保存预览动画。小技巧：可以将图像插入层中，在时间线面板中再增加一个层动画条，并按前面所介绍的方法，让层运动起来，这样页面上就有一个一边运动一边译制内容的“幻灯片”第30页，共35页，2022年，5月20日，13点54分，星期一实现图像的渐推式显示效果时间线可以包含图层和图像对象。在时间线中除了可以移动层之外，还可以改变图像的源文件，改变图层的可见性、大小、层叠顺序。下面将给大家介绍通过改变图层的大小属性，从而实现从左向右

17、逐渐推出图像的动画效果。1.设计目标：一幅图像从左向右逐渐推出显示，像卷轴一样展开。第31页，共35页，2022年，5月20日，13点54分，星期一2.素材准备：本网页中用到图片一张3.实现步骤（1）在页面中添加一个新层，并选中层（2）在属性面板中，将层的“宽度”属性设置为1px(像素)；在“背景图片”中导入一张准备好的图片做背景。（3）用鼠标拖拽所选择的层到时间线面板的第一帧处。（4）单击动画条尾部的关键帧标记，然后拖动层的调整柄，使层的宽度与背景图像的宽度相等，以便显示全部背景图像。第32页，共35页，2022年，5月20日，13点54分，星期一（5）选中“自动播放”和“循环”复选框。（6）预览网页动画，可发现随着层由窄变宽，背景图像也象卷轴一样展开。（7）将网页保存。第33页，共35页，2022年，5月20日，13点54分，星期一本章小结本章主要介