结构
TimeLine用来制作动画,它直接继承EventDispatcher类,在_update播放动画的过程中实际上使用了Tween的方法来管理每个阶段的缓动。
相关代码如下:
var tTween: Tween;
if (this._tweenDataList.length != 0 && this._index < this._tweenDataList.length) {
var tTweenData: tweenData = this._tweenDataList[this._index];
if (tCurrTime >= tTweenData.startTime) {
this._index++;
//创建TWEEN
if (tTweenData.type == 0) {
this._gidIndex++;
tTween = Pool.getItemByClass("tween", Tween);
tTween._create(tTweenData.target, tTweenData.data, tTweenData.duration, tTweenData.ease, Handler.create(this, this._animComplete, [this._gidIndex]), 0, false, tTweenData.isTo, true, false);
tTween.setStartTime(tCurrTime);
tTween.gid = this._gidIndex;
this._tweenDic[this._gidIndex] = tTween;
tTween._updateEase(tCurrTime);
} else {
this.event(Event.LABEL, tTweenData.data);
}
}
}
这意味着他是实现更复杂缓动动画的一种方式。
创建
TimeLine提供了from和to静态方法直接创建新的对象,参数和Tween类似但增加了offset参数,可相对于上一个对象增加延迟时间执行。
let timeLine = Laya.TimeLine.from(this.scene, {x: 100}, 100, Laya.Ease.linearNone, 10);
let timeLine = Laya.TimeLine.to(this.scene, {x: 100}, 100, Laya.Ease.linearNone, 10);
同时我们也可通过new的方式创建
let timeLine = new Laya.TimeLine();
这两种方式没有本质区别,只是第一种在new完之后紧接着增加了from和to方法。
使用
和Tween相同的可以使用from和to方法增加缓动过程,还可以增加多个流程,各个流程的对象可以是不同的。
let timeLine = Laya.TimeLine.from(this.scene, { x: 100 }, 100, Laya.Ease.linearNone, 10)
.to(this.tab, { x: 100 }, 100, Laya.Ease.linearNone, 10);
除此之外可以在流程中增加标签事件,值得一提的是这个标签事件参数提供了offset时间来针对上个流程,但并未提供duration参数,这会使得流程继续往下执行。
let timeLine = Laya.TimeLine.from(this.scene, { x: 100 }, 100, Laya.Ease.linearNone, 10)
.addLabel("aLabel", 100)
.addLabel("aLabel2", 100)
.to(this.tab, { x: 100 }, 100, Laya.Ease.linearNone, 10);
运行、暂停与继续
timeLine.play();
timeLine.gotoLabel("aLabel"); // 跳到某个标签
timeLine.gotoTime(100); // 跳到某个时间,单位ms
timeLine.pause();
timeLine.resume();
let total = timeLine.total; // 获取总帧数
还可以通过设置scale来调整播放速度,数字越大速度越快
timeLine.scale = 0.1 // 0.1倍速
timeLine.scale = 2; // 2倍速
监听事件
注册监听标签事件:当执行到某个标签时会触发Label类型的事件,可以通过参数标签名来区分不同的标签事件
timeLine.on(Laya.Event.LABEL, this, (e: string) => {
switch (e) {
case "aLabel":
break;
case "aLabel2":
break;
}
});
监听播放完成事件,当play完之后就会触发该事件
timeLine.on(Laya.Event.COMPLETE, this, () => {
console.log("complete: 播放完");
});
回收和删除
使用reset方法可以清楚所有缓动过程,这时候开发者可以使用对象池或其他引用将该对象管理起来,循环使用。
timeLine.reset();
使用destroy方法,在内部除了会调用reset方法,还会把timeLine中所有内部引用置空,之后便是等待gc清除。
timeLine.destroy();