预热：中华博览APP首页制作

.

• 知识目标：

1、了解APP产品中的界面动画设计技能。

2、掌握APP企业产品中按钮动效和图形动效的知识技能。

.

• 能力目标：

1、能够运用各类设计软件设计APP界面。

2、能够完成整体的APP各类页面动效制作。

3、能够综合运用按钮命令来控制页面调配。

.

• 课程重难点：

1、重点：整体的APP页面的动效制作。

2、难点：按钮控制触发命令的编写方式。

.

• 课程概况、教学主要内容：

  补间动画概念讲解：

动作补间动画是指在animate的时间帧面板上，在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等，animate 将自动根据二者之间的帧的值创建的动画。动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头；构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图、组合等等，但不能是形状，只有把形状组合（Ctrl+G）或者转换成元件后才可以做动作补间动画。

形状补间动画是在animate的时间帧面板上，在一个关键帧上绘制一个形状，然后在另一个关键帧上更改该形状或绘制另一个形状等，animate将自动根据二者之间的帧的值或形状来创建的动画，它可以实现两个图形之间颜色、形状、大小、位置的相互变化。形状补间动画建立后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间也有一个长长的箭头；构成形状补间动画的元素多为用鼠标或压感笔绘制出的形状，而不能是图形元件、按钮、文字等，如果要使用图形元件、按钮、文字，则必先打散（Ctrl+B）后才可以做形状补间动画。

本次课开始学习用 animate 制作动画效果，在 animate 中共有 5 种动画形式：逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导路径动画。

逐帧动画的制作

逐帧动画是一种常见的动画手法，它的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不同，连续播放而成的一种动画。

优点：与电影播放模式相似，适合于表演很细腻的动画，如 3D 动画、人物或动物急剧转身等效果。

缺点：每一帧的序列内容都不一样，增加制作负担，文件存储容量过大。

一、逐帧动画的概念和在时间帧上的表现形式

在时间帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧的画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。

逐帧动画在时间帧上表现为连续出现的关键帧，如图 所示。

  逐帧动画

二、创建逐帧动画的几种方法

1．用导入的静态图片建立逐帧动画

用jpg、png 等格式的静态图片连续导入 animate 中，就会建立一段逐帧动画。

2．绘制矢量逐帧动画

用鼠标或压感笔在场景中一帧一帧地画出每一帧内容。

3.文字逐帧动画

用文字作帧中的元件，实现文字跳跃、旋转等特效。

4.导入序列图像

可以导入 gif 序列图像、swf 动画文件或者利用第三方软件（如swish、swift 3D 等）产生的动画序列。

三、绘图纸功能

1.绘图纸的功能

绘图纸是一个帮助定位和编辑动画的辅助功能，这个功能对制作逐帧动画特别有用。通常情况下，animate 在舞台中一次只能显示动画序列的单个帧。使用绘图纸功能后，你就可以在舞台中一次查看两个或多个帧了。

如下图所示是使用绘图纸功能后的场景，可以看出，当前帧中内容用全彩色显示，其它帧内容以半透明显示，它使我们看起来好像所有帧内容是画在一张半透明的绘图纸上，这些内容相互层叠在一起。当然，这时你只能编辑当前帧的内容。

 

2.绘图纸各个按钮的介绍

（1）【绘图纸外观】按钮：按下此按钮后，在时间帧的上方，出现绘图纸外观标记。拉动外观标记的两端，可以扩大或缩小显示范围。

（2）【绘图纸外观轮廓】按钮：按下此按钮后，场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程。

（3）【编辑多个帧】按钮：按下此按钮后，可以显示全部帧内容，并且可以进行“多帧同时编辑”。

（4）【修改绘图纸标记】按钮：按下此按钮后，弹出菜单，菜单中有以下五个选项：

●“总是显示标记”选项会在时间轴标题中显示绘图纸外观标记，无论绘图纸外观

是否打开。

●“锚定绘图纸”选项会将绘图纸外观标记锁定在它们在时间轴标题中的当前位置。通

常情况下，绘图纸外观范围是和当前帧的指针以及绘图纸外观标记相关的。通过

锚定绘图纸外观标记，可以防止它们随当前帧的指针移动。

●“绘图纸2”选项会在当前帧的两边显示两个帧。

●“绘图纸5”选项会在当前帧的两边显示五个帧。

●“绘制全部”选项会在当前帧的两边显示全部帧。

上面，我们全面介绍了逐帧动画的特点和创建方法，现在，我们来动手制作动画实例，以加深对逐帧动画的认识。

案例：

1、界面的绘制和文字的排版设计。

2、文字、图片、背景图片的入场动画。

3、页面之间切换的过场动画。

4、输入文本和密码组件的放置。在

.

二、图片例子：

.

三、视频讲解：