5、Cocos Creator 动作系统

目录

1、动作系统 API

2、容器动作 API

3、缓动动作

4、API 速记

5、参考

动作系统并不能取代动画系统，动作系统提供的是面向程序员的 API 接口，而动画系统则是提供在编辑器中来设计的。它们服务于不同的使用场景，动作系统比较适合来制作简单的形变和位移动画，而动画系统则强大许多，美术可以用编辑器制作支持各种属性，包含运动轨迹和缓动的复杂动画。

1、动作系统 API

1、节点动作

// 创建一个移动动作
var action = cc.moveTo(2, 100, 100);
// 执行动作
node.runAction(action);
// 停止一个动作
node.stopAction(action);
// 停止所有动作
node.stopAllActions();

2、动作标签

 注意根据 Tag 停止动作不适用于容器动作

// 给 action 设置 tag
var ACTION_TAG = 1;
action.setTag(ACTION_TAG);
// 通过 tag 获取 action
node.getActionByTag(ACTION_TAG);
// 通过 tag 停止一个动作
node.stopActionByTag(ACTION_TAG);

onStartClick() {
        var action_1 = cc.moveTo(4, new cc.Vec2(-10.185, -78.045))
        action_1.setTag(1);
        var action_2 = cc.scaleTo(10, 0.5, 1)
        action_2.setTag(2);

        this.node.runAction(action_1)
        this.node.runAction(action_2)
}

onEndClick() {
        // 生效
        this.node.stopActionByTag(1)
}

     onStartClick() {
        var action_1 = cc.moveTo(4, new cc.Vec2(-10.185, -78.045))
        action_1.setTag(1);
        var action_2 = cc.scaleTo(10, 0.5, 1)
        action_2.setTag(2);

        let result = cc.sequence(action_1, action_2)
        this.node.runAction(result)
    }

    // 不生效
    onEndClick() {
        this.node.stopActionByTag(1)
    }

2、容器动作 API

1、顺序动作 cc.sequence 顺序动作可以让一系列子动作按顺序一个个执行。

// 让节点左右来回移动
var seq = cc.sequence(cc.moveBy(0.5, 200, 0), cc.moveBy(0.5, -200, 0));
node.runAction(seq);

2、同步动作 cc.spawn 同步动作可以同步执行对一系列子动作，子动作的执行结果会叠加起来修改节点的属性。

// 让节点在向上移动的同时缩放
 var spawn = cc.spawn(cc.moveBy(0.5, 0, 50), cc.scaleTo(0.5, 0.8, 1.4));
 node.runAction(spawn);

3、重复动作 cc.repeat 重复动作用来多次重复一个动作。

// 让节点左右来回移动，并重复 5 次
 var seq = cc.repeat(
             cc.sequence(
                 cc.moveBy(2, 200, 0),
                 cc.moveBy(2, -200, 0)
             ), 5);
 node.runAction(seq);

4、永远重复动作 cc.repeatForever 顾名思义，这个动作容器可以让目标动作一直重复，直到手动停止

// 让节点左右来回移动并一直重复
 var seq = cc.repeatForever(
             cc.sequence(
                 cc.moveBy(2, 200, 0),
                 cc.moveBy(2, -200, 0)
             ));

5、速度动作 cc.speed 速度动作可以改变目标动作的执行速率，让动作更快或者更慢完成。

 // 让目标动作速度加快一倍，相当于原本 2 秒的动作在 1 秒内完成
 var action = cc.speed(
                 cc.spawn(
                     cc.moveBy(2, 0, 50),
                     cc.scaleTo(2, 0.8, 1.4)
                 ), 2);
 node.runAction(action);

3、缓动动作

缓动动作不可以单独存在，它永远是为了修饰基础动作而存在的，它可以用来修改基础动作的时间曲线，让动作有快入、缓入、快出或其它更复杂的特效。需要注意的是，只有时间间隔动作才支持缓动

4、API 速记

# 速度变快
action.easing(cc.easeCubicActionIn());

# 速度变慢
action.easing(cc.easeCircleActionOut());

5、参考

1、Cocos Creator 2.4 API - cc

2、Cocos Creator 2.4 手册 - 使用动作系统