ActionScript
TypeScript
JavaScript

动画模板

发布时间:2017-04-06

什么是动画模板

动画模板:可以预设动画效果,然后把此效果附加给某个组件,从而很轻松实现相同的动画效果。动画模板是基于时间轴的动画效果,无需书写代码,就能轻松实现个性化动画效果。

如何使用动画模板

在新建文档时,在动画标签页选择EffectAnimation,创建EffectAnimation动画文件

如图所示创建一个动画文件图片2.png

此时会创建一个.efc的文件图片3.png

我们可以拖入一个按钮,作为动效的参考对象图片4.png

然后可以勾选动画编辑模式,进入动画编辑模式图片5.png

接着可以在某一帧创建一个关键帧,比如这里我们创建了scaleX scaleY的关键字用于将对象变大这样一个EffectAnimation文件就创建好了,注意,虽然可以添加多个节点,并且创建多个节点动画,但是只有第一个节点的动画数据会生效,其他的数据是被忽略的

如何使用动画EffectAnimation

下面介绍如何使用EffectAnimation

我们创建一个测试页面,并在页面里面添加一个Button图片6.png

然后将刚才创建的.efc文件拖动到Button上图片7.png

然后选中这个EffectAnimation节点可以修改这个动画触发的事件图片8.png

这样在这个对象被点击时就会有一个放大的动画图片9.png

发布代码后,我们来看实际效果,点击之前图片10.png

点击之后图片11.png

以上就是最简单的一个应用,通过这种方式可以实现一些常用的效果,比如mouseover变大,mouseout恢复,就可以做两个EffectAnimation,一个实现变大的动画并且触发事件设置为mouseover,一个实现变小的动画并且触发事件设置为mouseout,就可以实现一个有放大缩小特效的对象

以上所有操作均在编辑器中完成,不需要添加任何代码如图所示可以给按钮添加上各种动画效果图片12.png