用LayaAirIDE创建动画模板(EffectAnimation)

发表于2017-04-12

1、什么是动画模板

动画模板是基于时间轴的动画效果，通过预设动画效果，然后把效果附加给某个组件。使得组件无需编码却能轻松实现与编码相同的动画效果。动画模板不能独立显示，仅可作为动效模板让UI页面中的组件获得动画效果。

2、在IDE中制作与使用动画模板

2.1创建EffectAnimation模板文件

在项目管理器中，鼠标右键—>选择新建—>动画。在新建动画的面板中，动画类型选为EffectAnimation。由于我们要创建一个缩放效果的动画模板，动画名称我们命名为scale，如图1所示。

(图1)

点击确定后，会创建一个scale.efc的动画模板文件，双击该文件，我们看到动画编辑场景如图2所示。

(图2)

2.2创建动画模板

目标：创建一个先缩小后恢复的动画效果模板。

步骤一：我们从资源管理器中，将一个Image组件拖拽到scale.efc的场景编辑器中。如图3所示。

(图3)

步骤二：勾选动画编辑模式，然后选中第1帧和Image组件，在组件上右键创建关键帧。如图4所示。

(图4)

步骤三：选中第1帧，在属性管理器中，将旋转与缩放的scaleX与scaleY属性值都设为0.2。如图5所示。设置属性值之后，Image时间轴中会自动增加缩放属性scaleX与scaleY。（由于我们这个动画模板不需要位移效果，之前创建关键帧自动生成的属性X直接删掉就可以了）

(图5)

Tips：需要注意的是，动画模板与时间轴动画有一个重要的区别，那就是，如果对动画模板当前动画效果的首帧就设置动画效果是无效的。例如：我们想先缩小至0.2大小时，在时间轴动画里，在第0帧就可以先将动画组件直接缩小到0.2，而在动画模板里，不能在第0帧直接设置缩放效果，必须在其它帧（比如第1帧）设置缩放目标效果（0.2）。

步骤四：在第13帧创建关键帧（参照图4），设置scaleX与scaleY属性值为1，点击播放即可预览动画效果。

(图6)

2.3在IDE中使用动画模板

步骤一：创建一个UI页面（本例为EffectAnimation.ui），然后拖拽一个Button组件到场景编辑器中，如图7所示（注意：本例中的Button组件在ui目录下）。

(图7)

步骤二：将制作的缩放动画模板（scale.efc）拖拽到Button组件下，如图8所示。

(图8)

步骤三：为实现居中缩放效果，以及让按钮看的更清楚一些。我们选中Button组件，在属性面板，设置轴心点属性anchorX与anchorY的值为0.5，然后设置Button宽高与轴心点的xy轴位置，如图9所示。

(图9)

Tips：轴心点效果需要在UI中的组件属性中设置，在动画模板中设置轴心点效果对组件无效。

步骤四：选中Button组件下的动画模板，在右侧属性面板中，设置触发播放的事件属性playEvent的值为mousedown。如图10所示，然后按F12导出UI页面，即可在项目中使用了。

(图10)

3、在项目中展示动画模板的效果

创建一个Mian.js文件，在index.html中引用。编写以下代码：

//初始化引擎
Laya.init(1334,750);
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
//加载图集资源，加载成功后将UI界面添加到舞台上
Laya.loader.load("./res/atlas/comp.atlas",Laya.Handler.create(this,onLoaded));
function onLoaded(){
//实例化导出的UI类
var efc = new ui.TestPUI();
//添加到舞台
Laya.stage.addChild(efc);
}