cc.tween 动作系统详解

说明： 以下示例中的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);