创建简单的直线时间线动画

2021-01-20 51wsq.com 西维官网

时光线经由过程在分歧的时光转变层的地位、年夜小、可见性和叠放次序等来创立动画。时光线不克不及直接掌握页面中的对象,它掌握的是放置这些对象的层,假如要使图像、文本等对象发生动画后果,必需将其置于层中。

下面我们创立一个最简略的时光线动画,以对时光线有一个最根本的懂得。

1.设计目的

树立一个做直线活动的时光线动画。

2.素材预备

网页中须要用到当地站点image文件夹下的两个图像文件:ing8_1.jpg,img8-2gif.ILLI!解释

为网页添加配景图像的办法如下:按Ctrl+J键,在弹出的"PageProperties"对话框中,单击"BackgroundImage"栏旁的"Browse"按钮,从弹出的"SelectIrmageSource"对话框中,选择image目次下的img8-1jpg文件,单击"Select'按钮,回到"PageProperties"对话框后,单击"OK"按钮。

3.实现步调

(1)在页面中添加一个新层,在层中插入图像ing8-2,gif,然后将层移动到动画的肇端地位。

(2)在菜单栏中选择"Window"→"Timelines"敕令打开时光线面板(假如时光线面板已打开这一步可省略)。

(3)选摘要创立动画的层。

(4)单击时光线面板中的弹出菜单按钮上,在弹出的菜单中选择"AddObject(添加对象)"或用鼠标拖动图层到时光线的第一帧处。

(5)当第一次在时光线中添加对象时,会弹出提醒框,告知你可以转变该层的年夜小、地位、层次序以及可见性。单击“OK"按钮,这时在时光线通道中将涌现一个紫色动画条,动画条中显示了层的名称,如图所示。


(6)单击动画条尾部的症结帧地位(留意播放头也跟着移动到该处),将动画层移动到动画停止的地位,这时从动画肇端地位到停止地位有一条线显示,这就是层的活动轨迹,如图所示。

(7)按播放按钮,可直接在网页中预览时光线动画。

(8)假如想在阅读器中预览动画后果,则应进行以下设置:

①选中"Autoplay"复选框,不然阅读器中的动画是不会主动播放的;
② 逃选中"Loop"复选框,不然动画在阅读器中只播放一次;
③预览网页,网页保留到网站扶植当地站点的example文件夹下,文件名为ex8-1.htm。



13570385405

工作日 9:00-12:00 13:30-18:00
周六及部分节假日提供值班服务