Egret
2020年1月11日

egret基础-tween动画

作者 admin

使用方法1，默认方式

//imgNode 想要执行tween动画的节点

var obj = egret.Tween.get(imgNode)

// 消耗250毫秒，使y轴运动到1000，消耗500毫秒，使y轴运动到120，消耗500毫秒，使y轴运动到321，运动结束后调用cal=>通常指向我们自定义的函数
obj.to({ y:1000 },250).to({ y : 120 }, 500).to({ x: 321, y:571.67},500).call(()=>{
this.tweenFinished()
})

private tweenFinished(){

//xxxxxx ——tween动画队列结束后会调用这个函数内的方法

}

使用方法2-循环应用

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

使用方法3-缓动对象的缓动变化事件

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

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 );
随着obj对象的运动 funcChange函数也会进行改变

使用方法4-多个缓动使用

“`js
var shp:egret.Shape = new egret.Shape();
shp.graphics.beginFill( 0x00ff00 );
shp.graphics.drawRect( 0, 0, 100, 100 );
shp.graphics.endFill();
shp.x = 50;
shp.y = 50;
this.addChild( shp );
var tw = egret.Tween.get( shp, { loop:true} );
tw.to( {x:250}, 500 ).call( function(){ console.log( “右上角” ) } ).wait( 100 )
.to( {y:250}, 500 ).call( function(){ console.log( “右下角” ) } ).wait( 100 )
.to( {x:50}, 500 ).call( function(){ console.log( “左下角” ) } ).wait( 100 )
.to( {y:50}, 500 ).call( function(){ console.log( “左上角” ) } ).wait( 100 );
“`

标签Egret

17 条评论在 “egret基础-tween动画”

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注