第九章 利用时间轴制作动画

2020/1/251/17第9章利用时间轴制作动画主讲：栾庆磊第9章利用时间轴制作动画2/17学习目标了解时间轴面板的使用方法。熟练使用图层和时间轴创建时间轴动画。熟练掌握在时间轴面板中添加关键帧的方法。了解利用时间轴面板控制动画速度的方法。了解利用时间轴面板改变图像和图层属性的方法。第9章利用时间轴制作动画3/17目录创建时间轴动画实例使用时间轴改变图像和层属性实例本章小结配套实训练习题第9章利用时间轴制作动画4/17创建时间轴动画实例设计目标页面分析实训引导制作步骤第9章利用时间轴制作动画5/17设计目标创建时间轴动画，使飞行器图像在页面上自由飞行，浏览效果如图所示。返回第9章利用时间轴制作动画6/17页面分析本页面效果需要通过时间轴来实现。在时间轴中，通过时间的变化使层的位置、大小、可见性和叠放顺序等进行相应改变，从而产生动画效果。时间轴不能直接控制页面中的对象，它控制的是放置这些对象的图层。如果要使图像、文本等对象产生动画效果，必须将其置于图层中。返回第9章利用时间轴制作动画7/17实训引导1．本实例在第5章制作的ex5_city.html网页的基础上添加时间轴动画。2．本页面用到的图像文件由配套光盘webcourse\chapter09\images文件夹提供，在制作页面之前，先将用到的图像文件复制到本地站点future\images文件夹中。3．页面效果请参见配套光盘webcourse\chapter09\result文件夹下的ex9_3.html文件。返回第9章利用时间轴制作动画8/17制作步骤1．制作一个简单的直线运动的时间轴动画。2．制作一个曲线运动的时间轴动画。3．创建复杂路径的时间轴动画实例。返回第9章利用时间轴制作动画9/17一个简单直线运动的时间轴动画实例建立一个做直线运动的时间轴动画，操作步骤见教程P183。第9章利用时间轴制作动画10/17一个曲线运动的时间轴动画实例将做直线运动的时间轴动画，改为做曲线运动，操作步骤见教程P186。第9章利用时间轴制作动画11/17创建复杂路径的时间轴动画实例创建复杂路径的时间轴动画，使动画的运行路线完全由用户设定，操作步骤见教程P187。第9章利用时间轴制作动画12/17使用时间轴改变图像和层属性实现幻灯片效果实现图像的渐推式显示效果第9章利用时间轴制作动画13/17实现幻灯片效果实现幻灯片的循环播放效果，使一组图像不停地循环显示，操作步骤见教程P188。第9章利用时间轴制作动画14/17实现图像的渐推式显示效果使一幅图像从左向右逐渐推出显示，象卷轴一样展开，操作步骤见教程P189。第9章利用时间轴制作动画15/17本章小结本章主要介绍了创建时间轴动画的几种方法。通过改变图层在各关键帧上的位置可以创建简单的直线或曲线动画。通过录制层路径可以创建复杂的动画。通过改变图像或层的属性可以创建各种动画效果。时间轴结合行为的使用可以创建出各种较为复杂的动态网页效果。第9章利用时间轴制作动画16/17配套实训参见教材第191～192页，利用提供的素材文件，按要求制作网页。第9章利用时间轴制作动画17/17练习题参见教材第193页，完成相应的练习题：填空题单选题思考题