基本方法:
to:对属性进行绝对值计算,最终的运行结果即是设置的属性值,即改变到某个值
by:对属性进行相对值计算,最终的运行结果是设置的属性值加上开始运行时节点的属性值,即变化值
cc.tween(this.node)
.to(1, { position: cc.v2(100, 100), angle: -90 })
.by(1, { scale: 2 })
.start();
贝塞尔曲线:
cc.tween(this.node)
.bezierTo(3, cc.v2(0, cc.winSize.height / 2), cc.v2(300, -cc.winSize.height / 2), cc.v2(300, 100))
.start();
支持缓动任意对象的任意属性:
let obj = { a: 0 }
cc.tween(obj)
.to(1, { a: 100 })
.start();
变速 easing
cc.tween(this.node)
.to(1, { scale: 2, position: cc.v2(100, 100), angle: -90 }, cc.easeIn(3.0))
.start();
自定义 progress
// 对所有属性自定义 progress
cc.tween().to(1, { scale: 2, rotation: 90 }, {
progress: (start, end, current, ratio) => {
return start + (end - start) * ratio;
}
})
// 对单个属性自定义 progress
cc.tween().to(1, {
scale: 2,
position: {
value: cc.v3(),
progress: (start, end, current, t) => {
// 注意,传入的属性为 cc.Vec3,所以需要使用 Vec3.lerp 进行插值计算
return start.lerp(end, t, current);
}
}
})
· 插入其他的缓动到队列中
let scale = cc.tween().to(1, { scale: 2 });
let rotate = cc.tween().to(1, { angle: -90 });
let move = cc.tween().to(1, { position: cc.v3(100, 100, 100) });
// 先缩放再旋转
cc.tween(this.node).then(scale).then(rotate);
// 先缩放再移动
cc.tween(this.node).then(scale).then(move);
then 不仅可以插入 tween,还可以插入 action,比如跳跃(jumpTo)等
let jumpTo = cc.jumpTo(2, cc.v2(300, 300), 50, 4);
cc.tween(this.node)
.then(jumpTo)
.start();
并行执行缓动:
let t = cc.tween;
t(this.node)
// 同时执行两个 cc.tween
.parallel(
t().to(1, { scale: 2 }),
t().to(2, { position: cc.v2(100, 100) })
)
.call(() => {
console.log('All tweens finished.');
})
.start();
回调:
cc.tween(this.node)
.to(2, { angle: -90 })
.to(1, { scale: 2 })
// 当前面的动作都执行完毕后才会调用这个回调函数
.call(() => { cc.log('This is a callback'); })
.start();
重复执行:
repeat:重复指定次数
cc.tween(this.node)
.by(1, { scale: 1 })
// 对前一个 by 重复执行 10次
.repeat(10)
// 最后 node.scale === 11
.start();
repeatForever:无限重复
cc.tween(this.node)
.by(1, { scale: 1 })
.repeatForever()
.start();
union:
repeat/repeatForever 函数只会将前一个 action 作为作用对象,如果希望重复多个 action 话,可是使用 union(将之前所有的 action 整合为一个 action)
cc.tween(this.node)
.by(2, { angle: -90 })
.by(1, { scale: 2 })
.union()
.repeat(10)
.start();
延迟执行:
cc.tween(this.node)
// 延迟 1s
.delay(1)
.to(1, { scale: 2 })
// 再延迟 1s
.delay(1)
.to(1, { scale: 3 })
.start();
暂停本节点上所有正在运行的动作
this.node.pauseAllActions();
恢复运行本节点上所有暂停的动作
this.node.resumeAllActions();
停止当前 tween
tween.stop();
停止所有指定对象的缓动
cc.Tween.stopAllByTarget(this.node);
停止所有指定标签的缓动
cc.Tween.stopAllByTag(100);