第28讲 网页制作之时间轴.pptVIP

时间轴动画是通过【时间轴】面板来制作完成的。 将一系列的静态画面连续播放时就产生动画效果，每一幅画面就叫一帧。 时间轴只能移动层，若要使图像或文本移动，必须将要移动的对象放在层中。 创建动画的基本方法： 1）选中要制作动画的层，将层移动到动画的起始位置 2）右击绘制的层，选择“添加到时间轴”选项，或直接将层拖动到时间轴面板的动画通道，即可添加一个动画条 3）拖动动画条右端的关键帧，可以改变动画条的长度 4）单击动画条右端的关键帧，然后在文档窗口中将层移到动画结束的位置，构建结束位置的关键帧 5）如希望在动画条的中间位置添加关键帧，可以按住Ctrl键，然后在动画条上单击。选中关键帧，在文档窗口中拖动层确定动画轨迹 6）使用时间轴面板上的前进后退按钮可以预览动画效果 提示：在动画制作过程中，并不需要画出每一帧动画，而仅画出动作的几个关键性画面，中间的画面由软件自动添加完成，这几个关键性画面叫关键帧。 一条时间轴可以控制32路动画通道。当时间轴面板上有多路动画时显得繁琐复杂，可以利用多条时间轴控制页面上不同区域的动画。 操作：菜单“修改时间轴添加时间轴” * 课堂案例——卡通动画网 使用“时间轴”面板制作层动画效果。 效果图 “时间轴”面板 使用时间轴移动层 录制层路径 如果想制作沿任意轨迹运动的动画，可以使用“录制层路径”命令。 （1）在文档中插入一个层，并在层中插入一张图片。将层移动至它在动画开始时应处于的位置。 （2）选择“修改 时间轴 录制AP元素路径”命令。在文档中拖曳该层，拖曳的轨迹为层运动的路径。 （3）在动画停止的地方释放鼠标，“时间轴”面板中将自动添加对象，并且较为合理地创建了一定数目的关键帧。 （4）按住“时间轴”面板中的“播放”按钮 不放，在页面中预览动画。 控制动画播放 修改动画在网页中的播放时间，具体的操作步骤如下。 （1）打开一个动画的“时间轴”面板。 （2）在“时间轴”面板中拖曳第一帧或者最后一个关键帧，可以改变整个动画的播放时间。当选中最后一个关键帧时，向右拖曳是增加播放时间，向左拖曳是缩短播放时间。 修改关键帧 在“时间轴”面板中单击关键帧，然后将其右移或者左移，这样可以改变关键帧的发生时间。 要移动整个动画路径的位置，首先应选择整个动画条，然后在页面上拖动对象。 添加、删除帧 添加帧 打开“时间轴”面板，将播放头移到要添加帧的位置，选择“修改 时间轴 添加帧”命令，在播放头右侧加入一帧。 移除帧 打开“时间轴”面板，将播放头移到要删除帧的位置，选择“修改 时间轴 移除帧”命令，在播放头右侧删除一帧。 增加关键帧 选择整个动画条，选择“修改 时间轴 增加关键帧”命令，在当前的播放头位置加入关键帧。 移除关键帧 选中要删除的关键帧，选择“修改 时间轴 移除关键帧”命令，将当前选中的关键帧删除。 使用多个时间轴 课堂练习——茶艺人生网页 使用“时间轴”面板和“添加关键帧”命令制作叶子下落效果。 效果图 课堂案例——精品家居网 使用“绘制 AP Div”、“时间轴”面板制作忽隐忽现的动画效果。使用“CSS样式”面板设置多变的鼠标指针效果。 效果图 用时间轴改变图像与层的属性 时间轴也可以更改层和图像的其他属性，从而实现特殊的动态效果。一般情况下，可修改层的可见性、大小、层叠顺序或图像的源文件属性选项来实现幻灯片和逐渐显示的效果。 使用时，直接删除本页！ 精品课件，你值得拥有！ 精品课件，你值得拥有！ 使用时，直接删除本页！ 精品课件，你值得拥有！ 精品课件，你值得拥有！ 使用时，直接删除本页！ 精品课件，你值得拥有！ 精品课件，你值得拥有！ 课堂练习——时尚礼品屋 使用“绘制作AP Div”按钮绘制层。使用“时间轴”面板和“关键帧”命令制作自动更换图像效果。 效果图 *