Egret 2D(10)Tween缓动动画

确保项目支持 Tween

在 Egret 项目中，修改egretProperties.json中的modules，添加 tween 模块：

 {
     "name": "tween"
 }

在项目所在目录内执行一次引擎编译：

egret build -e

Tween缓动基本用法

Tween中封装了最常用的缓动动画功能，包括动画时间设定，缓动动画控制，缓动效果控制等等。下面是一个缓动动画示例。

var shp:egret.Shape = new egret.Shape();
        shp.graphics.beginFill( 0x00ff00 );
        shp.graphics.drawRect( 0, 0, 100, 100 );
        shp.graphics.endFill();
        this.addChild( shp );
        //获得需要缓动的显示对象
        var tw=egret.Tween.get(shp);
        //to方法开始缓动
        tw.to({x:150},1000)

缓动对象是用 egret.Tween.get() 获得的，该方法需要传入用于缓动的目标对象，即例中的 shp。，然后通过 to() 方法给出需要设置缓动的具体参数。to() 的第一个参数用于设置缓动属性以及目标值：例中的属性为 x ，目标值为 150，即会将 shp 从当前 x 坐标位置缓动到 x 坐标为 150；to() 的第二个参数为缓动时间长度，单位为毫秒，例中的缓动长度为 1000毫秒，即 1 秒。

缓动对象的基本控制参数

在定义缓动时，还可以传入一些属性参数来进行更进一步的定制。

Tween.get() 的第二个参数是可选的，这是一个对象参数，支持的属性有两个，分别说明：

loop 布尔值，用于指定是否循环该缓动定义。true 为循环， false 为不循环，默认是不循环 (false) 。
useTicks 布尔值，用于指定是否使用帧同步。缓动的计算在计算缓动属性的插值上有两种方式，一种是每帧都考虑运行时间，每帧的时间长度对缓动造成的影响，即会自动计算时间差来计算当前帧的插值；另一种是架设每帧的时间长度是恒定的，这种情况当每帧的执行时间变化较大时，就会造成动画过程不稳定的现象。该值默认是考虑时间差变化的 (false) 。

 var tw=egret.Tween.get(shp,{loop:true});

缓动对象的缓动变化事件

在 Tween 执行过程中，可能逻辑需要实时做一些变化。跟踪这个过程同样可以通过在 Tween.get() 的第二个参数中，加入变化事件处理函数的定义来实现。

比如游戏中有猎物在做一个Tween运动过程中，猎人的枪口要实时瞄准，那么就需要在Tween的变化过程随时计算，修正猎人枪口的角度。

var shp:egret.Shape = new egret.Shape();
        shp.graphics.beginFill( 0x00ff00 );
        shp.graphics.drawRect( 0, 0, 100, 100 );
        shp.graphics.endFill();
        this.addChild( shp );
        //缓动的参数
        var obj = { x:150 };
        //跟踪缓动过程,也就是可以实时获取它的缓动值
        var funcChange = function():void{
            console.log(this.x);
        }
        var tw=egret.Tween.get(shp, { onChange:funcChange, onChangeObj:shp } );
        //to的第三个参数是动画变化方式
        tw.to(obj,1000,egret.Ease.backInOut)

总结:

egret.Tween.get的第二个对象参数中可以用onChange来监听跟踪缓动的过程，onChange跟踪的函数中可以通过this来获取你跟踪的显示对象。onchangeObj来设置需要跟踪的是哪个显示对象。
to方法的第三个参数可以设置动画变化方式。可以在tween.d.ts中第944行查看定义的一些类型

缓动过程参数设定

对控制缓动过程的 to() 方法的第三个参数也需要特别说明一下。这个参数指定缓动函数，即整个动画过程中属性的变化方式，匀速或先快后慢，先慢后快等等。这个可以用现有的 Ease 中提供的函数常量来设定。

http://edn.egret.com/cn/article/index/id/53 可以在这里查看演示效果

缓动对象的其他方法

对于缓动的控制，可以设定若干其他方法。主要有以下两个：

call() 在某个缓动过程结束时，可以用 call() 产生一个回调，直接将回调函数作为参数传给 call() 就可以了，函数返回缓动对象。
wait() 用于多个缓动连续设定中设置中间的等待时间，以毫秒为单位。也就是当你设置多个to缓动动画的时候，某一个缓动动画结束到下一个缓动动画开始之间的时间，函数返回缓动对象。

var shp:egret.Shape = new egret.Shape();
        shp.graphics.beginFill( 0x00ff00 );
        shp.graphics.drawRect( 0, 0, 100, 100 );
        shp.graphics.endFill();
        this.addChild( shp );
      
        var tw=egret.Tween.get(shp);
        tw.to({ x:150 },1000).call(function(){console.log("第1个to缓动动画完成")}).wait(1000)
          .to({x:200},1000).call(function(){console.log("第2个to缓动动画完成")}).wait(500)
          .to({x:300,y:100},1000).call(function(){console.log("第3个to缓动动画完成")});

总结:

to方法可以多次，从而实现连续不同动画，因为to()方法返回的是缓动对象，

也就是说还可以这种写法：

var tw=egret.Tween.get(shp);
        tw.to({ x:150 },1000);
        tw.call(function(){console.log("第1个to缓动动画完成")});
        tw.wait(1000);
        tw.to({x:200},1000);
        tw.call(function(){console.log("第2个to缓动动画完成")});
        tw.wait(500);
        tw.to({x:300,y:100},1000);
        tw.call(function(){console.log("第3个to缓动动画完成")});