[Mugeda HTML5技术教程之7]添加动画

前一节我们讲述了怎么在新建的作品中添加元素，元素加好以后我们还想让他们动起来，来实现比较炫的效果。这节我们将要讲述怎么给元素添加动画。Mugeda动画是通过时间轴和帧来实现的。通过在时间轴上创建图层和单元，您可以在几分钟内创建专业动画。

 

时间轴界面如下图。对于要在移动设备上投放的作品，帧速最好不要超过12，因为帧速太快有些移动设备会比较吃力，设置帧速在属性区。

动画图层是用来组织添加对象

   每个图层可以包含一个或多个单元（单元将在后面解释）

   单击图层将使该图层置为当前图层

   添加到舞台的元素将被添加到当前图层

一个对象一定属于一个图层，属于不同的层中的对象，将有不同的纵向位置，靠近观看者的是上层，下层的对象可能被上层对象遮盖。

可以对图层进行编辑，上下移动图层、编辑图层名称、切换能见度、切换锁定状态等。当舞台中添加了元素比较多，图层也比较多是，如果你不知道某个元素在哪个图层时，可以通过切换能见度的方式，来确定该元素位于哪个图层。当你想修改某个元素而怕动到附近元素时，你可以通过切换锁定状态的方式，把除了你想要修改的哪个元素所在图层外的其他图层都锁定。

每个图层可以包含一个或多个单元，单元是定义动画的基础，图层中有空单元、有对象的单元和有动画的单元。空单元有一个空心圆点，有元件的单元有一个实心圆点，有动画的单元背景颜色是绿色的。

每个单元包括以下属性：

 1. 开始帧：单元开始启动帧

   2.结束帧：单元结束帧

   3.关键帧：表示为一个空心圆或单位。

每个元件一定属于一个单元，只有在一个可见的单元内的对象才能在舞台上被看见。

空单元是一个新创建的单元，它只包含了一个空的、没有元素加入的关键帧（由一个空心圆表示）。

为了增加一个单元的帧数，右键点击所需图层上的空白区域，从弹出菜单中选择“插入帧”，或按F5。同样，为了减少一个单元的帧域，右键单击该单元，并从弹出菜单中选择“删除帧（S）”，或按Ctrl + F5。

有对象的单元：一旦有对象被添加进单元，关键帧将被打上一个黑色的实心圆点。

有动画的单元：为了将动画添加到一个单元，在该单元范围内的任意帧上点击鼠标右键，从弹出的菜单中选择“插入关键帧动画”。一个有动画的单元将变成绿色，并有一个以上的关键帧显示为红色固体点。

同样，为了消除一个单元的动画，在这个单元上点击鼠标右键，从弹出菜单中选择“删除关键帧动画”。

移动当前帧至关键帧后，可以在该关键帧编辑对象的属性（大小，位置，旋转，透明度等）。

对于有动画的单元，使用下列规则渲染元件:

1.在一个关键帧处，使用该关键帧上的参数集（大小，位置，旋转，α等）渲染一个元件。

2.在一个常规帧（无实心点出），使用两个相邻的关键帧参数集渲染元件。

如果编辑一个常规帧（不是关键帧）上的对象，该帧将自动转换成关键帧

通过选择指定的帧，从弹出菜单中选择“插入关键帧” ，或按F6，额外的关键帧也可以被插入到一个单元。

同样，可以通过选择指定的关键帧，并选择弹出菜单中的“删除关键帧” ，或按Ctrl+ F6，从一个单元中删除一个关键帧。

可以用玻璃板显示动画过渡状态，玻璃板功能打开后可以看到对象在不同的帧的位置变化，方便进行动画调整，当前帧的对象的位置是高亮的。玻璃板开关按钮在时间线下面，如图所标。

你可以在动画属性栏调整动画类型。不同的类型有不同的动画模式，比如加速、减速。默认动画模式是线性的。

在时间线的一个图层中要添加一个新单元，可以在时间线的该图层的空白处右键点击，从弹出的菜单中选择“插入关键帧”，或者按F6。添加新单元后，两个单元之间的空白帧将被前一个单元的帧自动填充。

通过时间轴的弹出菜单，除了可以插入关键帧，还提供了许多的操作来管理图层、元素和动画。

要选择帧可以使用以下技巧：

   点击帧使它为当前帧，并使其对应的层为当前层。

   在一个单元的范围之内拖动，可以选择一定范围内的帧。

   双击一个单元可以选择单元内的所有帧。

总结，这一节我们讲述了如何在已经添加了元素的作品中添加动画。下一节我们将讲述，怎么给元素添加行为，以实现动画的交互的效果，比如链接、表单、回调等更高级的行为。敬请继续关注。