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

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

 

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


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

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

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

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

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


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


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

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


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

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


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

每个单元包括以下属性:

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

   2.结束帧:单元结束帧

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


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

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

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


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

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


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

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


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

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


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

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



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


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

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

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

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


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

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


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

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


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

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



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


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

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


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

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


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

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


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

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

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

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

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


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

 

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

上一篇:Android基础教程(四)之-----取得手机屏幕大小DisplayMetrics的应用


下一篇:如何使用ASP.NET的表单认证,在记住密码和安全性之间找到平衡点