Mugeda HTML5插入曲线变形动画使用教程

Mugeda最新添加了一些新的功能中，还有一个曲线变形动画的功能，这一次我们来具体讲述怎么使用。所谓曲线变形动画指景物的形体变化，它是使一幅图像在多帧内逐步变化到另一幅完全不同图像的处理方法。这是一种较复杂的二维图像处理，需要对各像素点的颜色、位置作变换。变形的起始图像和结束图像分别为两幅关键帧，从起始形状变化到结束形状的关键在于自动地生成中间形状，也即自动生成中间帧。

Mugeda HTML5插入曲线变形动画使用教程

一.先看一个例子，以便有个直观的了解：

http://cn.mugeda.com/client/preview_css3.html?id=fc4eef59

在这个动画中，一个圆逐渐变为了一个不规则的图形。

我们将通过这个动画的制作过程来讲解变形动画的使用。

首先在第一帧画一个圆，然后在该图层的后面数帧后插入帧：

然后在该处右击选择“插入曲线变形动画”：

此时该时间单元的颜色会改变，如下图：

同时该帧会产生一个红色的关键帧。在该关键帧处，选中舞台上的圆形后，点击左侧工具条中的节点按钮：

此时舞台上的圆形的节点会显示出来：

选中节点，并通过拖动节点改变图形的形状：

修改完后，已经变成一个完全不同的图形：

完成，保存，并预览动画。

动画例子编辑地址：http://cn.mugeda.com/animation/edit/fc4eef59