当前位置:文档之家› 《实验6-2 HTML5动画制作-预置动画、进度动画、变形动画和序列帧动画》

《实验6-2 HTML5动画制作-预置动画、进度动画、变形动画和序列帧动画》

实验二预置动画、进度动画、变形动画和序列帧动画
一、预置动画
预置动画可以实现一秒钟制作动画。

预置动画分为进入动画、强调动画、退出动画。

在舞台中选中某对象,点击其旁边的预置动画按钮,可以分别设置其进入动画、强调动画、退出动画的效果。

并可以在右侧属性面板中设置其“循环播放”等效果。

二、进度动画
进度动画是按照图形或文字的绘制或编辑的顺序来实现动态效果的,因此在绘制的过程中,应根据自己想要的动态效果控制绘制顺序。

例:自动绘制的手机
(1)绘制手机
(2)添加图形进度动画
(3)添加文字进度动画
三、变形动画
注:变形动画只支持用mugeda绘制的动画,不支持由外界导入的图片。

1、图形转变
(1)绘制图形。

使用椭圆工具在舞台上画一个圆形,为了方便观察,将圆形的线条设置为红色。

(2)在时间轴第30帧位置单击鼠标右键,选择“插入变形动画”。

(3)在第30帧,选择“节点”工具,将圆形任意变形,也可以重新设置填充色。

(4)预览动画
(5)添加运动类型:选中时间线第一个关键帧,在属性面板里设置“运动”
的类型,例如“碰撞退出”。

(6)预览动画
2、文字变形动画
(1)绘制文字。

使用文字工具在舞台上输入文字,为了方便观察,在属性面板将文字设置为纯色--红色、加粗字体。

(2)在时间轴第30帧位置单击鼠标右键,选择“插入变形动画”。

(3)在第30帧,选择“节点”工具,在属性面板将文字的字体、字号、填充色、字间距、透明度、滤镜等属性重新设置,
(4)预览动画
(5)点击“添加新页面”按钮,创建第2页。

重复上述步骤(1)-(4),但是将步骤(2)的“插入变形动画”改为“插入关键帧动画”,观察两者有何不同。

不同:插入关键帧动画时,利用工具箱的变形工具只能修改文字的大小、位置,旋转等属性,而文字本身的填充色等属性,面板中不出现,即无法修改。

四、序列帧动画
制作比较复杂的特效效果时,需要借助一些后期特效或视频编辑软件,通过它们将一些比较酷的动画或者特效导成序列帧的形式,导入到我们的作品中。

(1)点击工具箱的“素材库”,点击“共享组”下的“手机序列帧”。

(2)在右侧出现的图片中,按住ctrl键的同时选中多张图片。

(3)选中右下角的复选框,该步骤很关键。

(4)点击“添加”按钮。

(5)预览动画。

相关主题