参考学习资料 工业技术 《二维动画设计》讲义.pdf

《二维动画设计》讲义

合肥工业大学工业设计系

1

《网页动画设计》-合肥工业大学出版社

第三章网页动画的形式

学习目标与要求：通过本章学习，了解网页动画常用的动画形式，理解这些形式动画运动的

原理，掌握实现这些动画形式的操作方法和步骤。

学习重点：通过实例，掌握网页常用动画形式的操作方法和步骤。

学习难点：理解创建动画的条件，掌握运动引导、遮罩动画的实现以及Flash动画常用的脚

本语句。

网页上的动画形式多种多样，从设计原理上概括起来有四种类型：一种是基于关键帧的

动画，其动画形式为逐帧动画；一种是基于时间轴的动画，其动画形式有形状补间、运动补

间、运动引导和遮罩动画；一种是基于程序语言的动画，其动画是用ActionScript脚本语

言开发的脚本动画；还有一种是用Flash第三方辅助设计软件开发的插件动画。进行网页动

画设计，必须要先了解这些动画形式，并在设计过程中灵活使用。

3.1逐帧动画

1．概念

逐帧动画是网页动画中最基本的动画形式，是指每一帧都是关键帧的动画，在每一关键

帧中放置不同的内容，然后通过连续播放而形成动作，其制作原理同传统动画一样，都是在

连续的关键帧中分解动作。

逐帧动画可以制作不规则的动作，适合于表现细腻、复杂的动画，如制作面部表情、人

物走路和动物奔跑等具有细微变化的动画。

2．创建逐帧动画的方法

创建逐帧动画的方法有很多，主要有以下几种：

①将静态图片或序列图像连续导入生成逐帧动画；

②用鼠标或压感笔逐帧绘制矢量图形生成逐帧动画；

③在关键帧上添加动作脚本语句生成指令逐帧动画。

3．在时间轴上的显示

逐帧动画创建成功以后，时间轴上帧的颜色是灰色的，如图3.1所示。

图3.1逐帧动画在时间轴上的显示

4．逐帧动画的运动原理

逐帧动画中的每一帧都是关键帧，每一关键帧中都放置不同的动作，通过连续播放这些

关键帧而形成动作的连贯。如图3.2所示，为一逐帧动画，共有十帧，每一帧上的动作都有

2

细微变化，连续播放，就形成连续运动的动画。

图3.2逐帧动画中每一帧的动作变化

5．实例:跳舞的小羊

下面用逐帧动画制作一只小羊跳舞的动画。

⑴绘制小羊形象

①新建一个Flash文档，设置文档属性，尺寸为宽400像素，高300像素，背景颜色

值为#990033，帧频为每秒12帧，如图3.3所示。

图3.3设置文档属性

②在第1帧上绘制如图3.4所示的小羊形象。

3

图3.4绘制小羊形象

⑵创建元件

①选中小羊的头部，单击菜单“修改”→“转换为元件”或按F8键，弹出“转换为元

件”的对话框，如图3.5所示，在“名称”栏中输入“羊头”，在“类型”中选择“图形”，

单击“确定”以后，就新建了一个名为“羊头”的图形元件。

图3.5矢量图形转换为元件

②选中小羊的身体，创建一个名为“羊身”的图形元件。

③选中小羊的一只羊脚，创建一个名为“羊脚”的图形元件。删除剩下的三只羊脚图

形，复制三个“羊脚”图形元件，安放在小羊的身上。

⑶制作逐帧显示效果

从第1帧到第24帧，每隔一帧按F6键，插入一个关键帧，通过调整关键帧上小羊的“羊

头”、“羊身”和“羊脚”图形元件的位置和倾斜的角度，来设置小羊在这些帧上的动作，如

图3.6所示。

图3.6小羊在关键帧上的动作

单击菜单“控制”→“测试影片”或按Ctrl+Enter键，测试影片，就看到了一只小羊

跳舞的动画。

3.2形状补间

1．概念

形状补间动画是网页动画的一种形式，创建类似于形变的动画效果，是对矢量图形进行

变化的动画。指在时间轴的一