说明: 以下示例中的node节点,其类型是cc.Node。
一、单一动作
node节点的颜色在1秒内渐变成红色。想要改变什么属性,只需要在花括号内写入正确的属性名称,并设置值即可。
cc.tween(node)
.to(1, {color: cc.color(255, 0, 0)})
.start();
二、同步动作
相当于 cc.spawn ,同时执行多个动作。
cc.tween(node)
.to(1, {position: cc.v2(70, 100), scale: 2})
.start();
上述代码等价于:
node.runAction(cc.spawn(
cc.moveTo(1, cc.v2(70, 100)),
cc.scaleTo(1, 2)
));
三、渐隐动作
让节点在2秒内渐隐,使用easing动作,逐渐将opacity变成0。
cc.tween(node)
.to(2, {opacity: 0}, {easing: "sineOut"})
.start();
四、序列动作
相当于cc.sequence,注意角度angle和rotation的不同。
cc.tween(node)
.to(1, {position: cc.v2(70, 100)})
.to(1, {scale: 2})
.to(1, {angle: -90})
.start();
上述代码等价于:
node.runAction(cc.sequence(
cc.moveTo(1, cc.v2(70, 100)),
cc.scaleTo(1, 2),
cc.rotateTo(1, 90)
));
五、by的使用
依次相当于cc.moveTo,cc.moveBy,cc.scaleBy,cc.rotationBy。
cc.tween(node)
.to(1, {position: cc.v2(0, 0)})
.by(1, {position: cc.v2(70, 100)})
.by(1, {scale: 2})
.by(1, {angle: -90})
.start();
上述代码等价于:
node.runAction(cc.sequence(
cc.moveTo(1, cc.v2(0, 0)),
cc.moveBy(1, cc.v2(70, 100)),
cc.scaleBy(1, 2),
cc.rotateBy(1, 90)
));
六、执行回调函数
相当于cc.callFunc。
cc.tween(node)
.to(1, {position: cc.v2(0, 0)})
.delay(1)
.call(() => {
node.color = cc.color(255, 0, 0);
})
.start();
上述代码等价于:
node.runAction(cc.sequence(
cc.moveTo(1, cc.v2(0, 0)),
cc.delayTime(1),
cc.callFunc( () => {
node.color = cc.color(255, 0, 0);
})
));
七、repeat重复动作
1、一个动作重复2次
cc.tween(node)
.by(1, {position: cc.v2(100, -50)})
.repeat(2)
.start();
上述代码等价于:
node.runAction(cc.moveBy(1, cc.v2(100, -50)).repeat(2));
2、多个动作重复2次
注意:其中的 union 会将其之前所有的 action 整合为一个 action。
cc.tween(node)
.by(1, {position: cc.v2(100, -50)})
.by(1, {scale: 1.2})
.union()
.repeat(2)
.start();
上述代码等价于:
node.runAction( cc.sequence(
cc.moveBy(1, cc.v2(100, -50)),
cc.scaleBy(1, 1.2)
).repeat(2));
八、repeatForever重复动作
1、一个动作重复执行。
(1)第一种方式:
cc.tween(node)
.by(1, {angle: -90})
.repeatForever()
.start();
(2)第二种方式:
cc.tween(node)
.repeatForever(
cc.tween()
.by(1, {angle: -90})
)
.start();
以上两种方式达到的效果是一样的,全部等价于下述代码:
node.runAction( cc.rotateBy(1, 90).repeatForever());
2、多个动作重复执行
(1)第一种方式:
cc.tween(node)
.repeatForever(
cc.tween()
.by(1, {angle: -90})
.to(1, {position: cc.v2(0, 0)})
.to(1, {position: cc.v2(200, 0)})
)
.start();
(2)第二种方式:
注意:其中的 union 会将其之前所有的 action 整合为一个 action。
cc.tween(node)
.by(1, {angle: -90})
.to(1, {position: cc.v2(0, 0)})
.to(1, {position: cc.v2(200, 0)})
.union()
.repeatForever()
.start();
以上两种方式达到的效果是一样的,全部等价于下述代码:
node.runAction( cc.sequence(
cc.rotateBy(1, 90),
cc.moveTo(1, cc.v2(0, 0)),
cc.moveTo(1, cc.v2(200, 0))
).repeatForever());
九、停止动作
传入对应的节点,即可停止该节点的所有动作。
cc.Tween.stopAllByTarget(node);