热点:

    Mugeda HTML5技术教程:添加动画

      [  中关村在线 转载  ]     |  责编:刘菲菲
    收藏文章 暂无评论

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

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

    Mugeda HTML5技术教程:添加动画

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

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

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

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

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

    Mugeda HTML5技术教程:添加动画

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

    Mugeda HTML5技术教程:添加动画

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

    Mugeda HTML5技术教程:添加动画

      每个单元包括以下属性:

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

      2.结束帧:单元结束帧

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

    Mugeda HTML5技术教程:添加动画

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

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

    Mugeda HTML5技术教程:添加动画

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

    Mugeda HTML5技术教程:添加动画

    Mugeda HTML5技术教程:添加动画

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

    Mugeda HTML5技术教程:添加动画

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

    Mugeda HTML5技术教程:添加动画

    Mugeda HTML5技术教程:添加动画

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

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

    Mugeda HTML5技术教程:添加动画

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

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

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

    Mugeda HTML5技术教程:添加动画

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

    Mugeda HTML5技术教程:添加动画

    Mugeda HTML5技术教程:添加动画

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

    Mugeda HTML5技术教程:添加动画

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

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

    Mugeda HTML5技术教程:添加动画

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

    Mugeda HTML5技术教程:添加动画

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

    Mugeda HTML5技术教程:添加动画

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

    Mugeda HTML5技术教程:添加动画

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

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

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

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

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

    soft.zol.com.cn true //soft.zol.com.cn/553/5534812.html report 3456   前一节我们讲述了怎么在新建的作品中添加元素,元素加好以后我们还想让他们动起来,来实现比较炫的效果。这节我们将要讲述怎么给元素添加动画。Mugeda动画是通过时间轴和帧来实现的。通过在时间轴上创建图层和单元,您可以在几分钟内创建专业动画。  时间轴界面如...
    不喜欢(0) 点个赞(0)
    随时随地资讯查报价 就上ZOL手机客户端,点击或扫描二维码下载

    软件资讯文章推荐