确保项目支持 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缓动动画完成")});