Nota: El nodo del siguiente ejemplo es de tipo cc.Node .
1. Acción única
El color del nodo cambia gradualmente a rojo en 1 segundo. Si desea cambiar algún atributo, solo necesita escribir el nombre del atributo correcto entre llaves y establecer el valor.
cc.tween(node)
.to(1, {
color: cc.color(255, 0, 0)})
.start();
2. Acción sincrónica
Equivalente a cc.spawn , ejecuta múltiples acciones al mismo tiempo.
cc.tween(node)
.to(1, {
position: cc.v2(70, 100), scale: 2})
.start();
El código anterior es equivalente a:
node.runAction(cc.spawn(
cc.moveTo(1, cc.v2(70, 100)),
cc.scaleTo(1, 2)
));
3. Acción de desvanecimiento
Deje que el nodo se desvanezca en 2 segundos y utilice la acción de suavizado para cambiar gradualmente la opacidad a 0.
cc.tween(node)
.to(2, {
opacity: 0}, {
easing: "sineOut"})
.start();
4. Secuencia de acción
Equivalente a cc.sequence , preste atención a la diferencia entre ángulo y rotación .
cc.tween(node)
.to(1, {
position: cc.v2(70, 100)})
.to(1, {
scale: 2})
.to(1, {
angle: -90})
.start();
El código anterior es equivalente a:
node.runAction(cc.sequence(
cc.moveTo(1, cc.v2(70, 100)),
cc.scaleTo(1, 2),
cc.rotateTo(1, 90)
));
Cinco, el uso de por
A su vez, equivale a 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();
El código anterior es equivalente a:
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)
));
6. Ejecute la función de devolución de llamada.
Equivalente a cc.callFunc .
cc.tween(node)
.to(1, {
position: cc.v2(0, 0)})
.delay(1)
.call(() => {
node.color = cc.color(255, 0, 0);
})
.start();
El código anterior es equivalente a:
node.runAction(cc.sequence(
cc.moveTo(1, cc.v2(0, 0)),
cc.delayTime(1),
cc.callFunc( () => {
node.color = cc.color(255, 0, 0);
})
));
Siete, repite, repite la acción.
1. Repetir una acción dos veces
cc.tween(node)
.by(1, {
position: cc.v2(100, -50)})
.repeat(2)
.start();
El código anterior es equivalente a:
node.runAction(cc.moveBy(1, cc.v2(100, -50)).repeat(2));
2. Repetir múltiples acciones dos veces
Nota: el sindicato integrará todas las acciones anteriores en una sola acción.
cc.tween(node)
.by(1, {
position: cc.v2(100, -50)})
.by(1, {
scale: 1.2})
.union()
.repeat(2)
.start();
El código anterior es equivalente a:
node.runAction( cc.sequence(
cc.moveBy(1, cc.v2(100, -50)),
cc.scaleBy(1, 1.2)
).repeat(2));
Ocho, repitePara siempre repetir la acción
1. Repetir una acción.
(1) La primera forma:
cc.tween(node)
.by(1, {
angle: -90})
.repeatForever()
.start();
(2) La segunda forma:
cc.tween(node)
.repeatForever(
cc.tween()
.by(1, {
angle: -90})
)
.start();
Los dos métodos anteriores logran el mismo efecto, todos equivalentes al siguiente código:
node.runAction( cc.rotateBy(1, 90).repeatForever());
2. Se ejecutan varias acciones repetidamente
(1) El primer método:
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) El segundo método:
Nota: el sindicato integrará todas las acciones anteriores en una sola acción.
cc.tween(node)
.by(1, {
angle: -90})
.to(1, {
position: cc.v2(0, 0)})
.to(1, {
position: cc.v2(200, 0)})
.union()
.repeatForever()
.start();
Los dos métodos anteriores logran el mismo efecto, todos equivalentes al siguiente código:
node.runAction( cc.sequence(
cc.rotateBy(1, 90),
cc.moveTo(1, cc.v2(0, 0)),
cc.moveTo(1, cc.v2(200, 0))
).repeatForever());
9. Detener la acción
Pase el nodo correspondiente para detener todas las acciones del nodo.
cc.Tween.stopAllByTarget(node);