egret.Tween跳跃缓动效果实现

今日在工作中遇到一个需求：

1. 要求目标组件能从一定高度落地并实现弹跳效果
2. 落地后目标组件变矮变胖
3. 弹起时目标组件变瘦变高

Tween使用

在实现此需求之前，先学习一下白鹭引擎的Tween。官方文档如是说：

class TweenTest extends egret.DisplayObjectContainer{
    public constructor(){
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
    }
    private onAddToStage(event:egret.Event){
        var shp:egret.Shape = new egret.Shape();
        shp.graphics.beginFill( 0x00ff00 );
        shp.graphics.drawRect( 0, 0, 100, 100 );
        shp.graphics.endFill();
        shp.x = 50;
        this.addChild( shp );
        var tw = egret.Tween.get( shp );
        tw.to( {x:150}, 1000 );
    }
}

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

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

//在 Tween 执行过程中，也许我们逻辑需要实时做一些变化。
//跟踪这个过程同样可以通过在 Tween.get 的第二个参数中，加入变化事件处理函数的定义来实现。
var obj = { x:0 };

var funcChange = function():void{
    console.log( this.x );
}

egret.Tween.get( obj, { onChange:funcChange, onChangeObj:obj } )
    .to( {x:600}, 1000 , egret.Ease.backInOut );

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

1. call 在某个缓动过程结束时，可以用 call 产生一个回调，直接将回调函数作为参数传给call就可以了。
2. wait 用于多个缓动连续设定中设置中间的等待时间，也是以毫秒为单位。
   ####最终实现如下
   如果想使用缓动动画，你需要使用 Tween 这个类。 Tween 中封装了最常用的缓动动画功能，包括动画时间设定，缓动动画控制， 缓动效果控制等等。

var tw = egret.Tween.get( shp );         //捕获shp，shp为目标组件
tw.to( {scaleX:0.8, scaleY:1.1, y:50}, 1 )      //y方向缓动至50，横向变大0.8倍，纵向变大1.1倍，只用一毫秒 
  .to( {scaleX:1.1, scaleY:0.8, y:0}, 400)
  .to( {scaleX:0.8, scaleY:1.1, y:50}, 400)
  .to( {scaleX:1, scaleY:1, y:0}, 400);