在这里,我们为什么会把这两个放在这里讲呢?我们来看Tween类的to方法里的参数,下面给出官方给的参数图:
在官方给的参数里,target是我们要操作的对象,prop属性是我们用来控制对象运动到何种程度,这个属性是个JSON对象,可以同时设置对个属性让对象运动,duration是运动所用时间,ease也是我们这里要终点说的,这里的ease是类方法,是laya.utils包里的Ease 类,也是用来控制对象是如何缓动的,这个类定义了对象的运动方法,一下给出部分方法截图:
coverBefore和autoRecover分别是是否覆盖之前的缓动,自动回收Tween对象。
下面我们用代码简单实现Tween的运动,代码如下
// 程序入口 import text = Laya. Text; import Ease = Laya. Ease; class GameMain{ url: string; constructor() { Laya. init( Laya. Browser. width, Laya. Browser. height, Laya. WebGL); Laya. stage. bgColor = '#fff'; Laya. DebugPanel. init(); this. url = 'timg.jpg'; Laya. loader. load( this. url, Laya. Handler. create( this, this. onLoad)); } onLoad(){ //Laya.stage.addChild(new aaa()); let img: Laya. Image = new Laya. Image(); img. loadImage( this. url); Laya. stage. addChild( img); //Tween Laya. Tween. to( img, { x: 300, y: 300 }, 3000, Ease. elasticOut, Laya. Handler. create( this, function(){ let wangwang: text = new text(); wangwang. text = '汪汪'; wangwang. fontSize = 100; wangwang. color = 'red'; wangwang. pos( 700, 300); Laya. stage. addChild( wangwang); }), 1000); } } new GameMain();
实现最终效果图为:
在这里需要注意的是,参数里面的时间都是以毫秒为单位的,也就是1000就相当于1秒。