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);