egret.Tween跳跃缓动效果实现 _效果

今日在工作中遇到一个需求：
要求目标组件能从一定高度落地并实现弹跳效果落地后目标组件变矮变胖弹起时目标组件变瘦变高 Tween使用
在实现此需求之前，先学习一下白鹭引擎的Tween 。官方文档如是说：

文章插图
【egret.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 );

文章插图
对于缓动的控制，可以设定若干其他方法。主要有以下两个：
call 在某个缓动过程结束时，可以用 call 产生一个回调，直接将回调函数作为参数传给call就可以了。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);