引言

• 序列动作（Sequence）：按顺序依次执行多个子动作（如“先移动再旋转”），适用于分步骤的动画逻辑（如角色行走后攻击）。
• 并行动作（Spawn）：同时执行多个子动作（如“边移动边缩放”），适用于复合状态的动画效果（如按钮点击时同时放大和变色）。

一、技术背景

1.1 Cocos2d 动作系统概述

• 基础动作：单一效果（如 MoveTo移动、RotateBy旋转、ScaleTo缩放）。
• 复合动作：通过组合基础动作实现复杂逻辑（如 Sequence、Spawn）。
• 自定义动作：开发者可继承 Action类实现特定逻辑。

1.2 Sequence 与 Spawn 的核心作用

• Sequence（序列动作）：接收一个动作数组，按数组顺序依次执行每个子动作（前一个动作完成后，下一个动作才开始）。
• Spawn（并行动作）：接收一个动作数组，同时启动所有子动作（所有动作并行执行，任一子动作完成则整个 Spawn 结束）。

二、应用使用场景

三、不同场景下的代码实现

3.1 场景1：角色移动+旋转（并行动作 Spawn）→ 淡出（序列动作 Sequence）

需求描述

1. 并行动作：角色同时向右移动 200 像素并顺时针旋转 360°（Spawn）。
2. 序列动作：移动旋转完成后，角色淡出（透明度从 1→0）。

代码实现（Cocos Creator 3.x / Cocos2d-x JS）

// 假设使用 Cocos Creator 3.x（类似逻辑适用于 Cocos2d-x）
import { _decorator, Component, Node, Sprite, Vec3, tween, action } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CharacterAction')
export class CharacterAction extends Component {
    @property(Sprite)
    character: Sprite = null; // 角色精灵组件

    start() {
        // 监听屏幕点击事件
        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
    }

    onTouchEnd() {
        if (!this.character) return;

        // 基础动作定义
        const moveAction = action.moveBy(1, new Vec3(200, 0, 0)); // 1秒内向右移动200像素
        const rotateAction = action.rotateBy(1, 360); // 1秒内顺时针旋转360度
        const fadeOutAction = action.fadeOut(0.5); // 0.5秒内透明度从1→0

        // 并行动作：移动 + 旋转（同时执行）
        const spawnAction = action.spawn(moveAction, rotateAction);

        // 序列动作：先执行并行动作，再执行淡出
        const sequenceAction = action.sequence(spawnAction, fadeOutAction);

        // 绑定动作到角色节点
        this.character.node.runAction(sequenceAction);
    }
}

关键点解释

• Spawn：action.spawn(moveAction, rotateAction)让角色同时移动和旋转（1秒内完成）。
• Sequence：action.sequence(spawnAction, fadeOutAction)确保淡出动作在移动旋转完成后执行。
• 动作时长：移动和旋转的 moveBy/rotateBy参数 1表示 1 秒，与淡出的 0.5秒形成逻辑衔接。

3.2 场景2：按钮点击（同时放大+变色 Spawn）→ 恢复原状（序列动作 Sequence）

需求描述

1. 并行动作：按钮同时放大 1.2 倍并变为红色（Spawn）。
2. 序列动作：1 秒后，按钮依次缩小回原始大小 + 恢复原始颜色（Sequence）。

代码实现（Cocos Creator 3.x）

import { _decorator, Component, Node, Button, Vec3, tween, action, Color } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ButtonAction')
export class ButtonAction extends Component {
    @property(Button)
    myButton: Button = null; // 按钮组件

    private originalScale: Vec3 = new Vec3(1, 1, 1); // 原始缩放
    private originalColor: Color = new Color(1, 1, 1, 1); // 原始颜色（白色）

    start() {
        this.myButton.node.setScale(this.originalScale);
        this.myButton.node.color = this.originalColor;
        this.myButton.node.on(Button.EventType.CLICK, this.onButtonClick, this);
    }

    onButtonClick() {
        // 基础动作定义
        const scaleUpAction = action.scaleTo(0.3, 1.2, 1.2); // 0.3秒内放大到1.2倍
        const colorChangeAction = action.tintTo(0.3, 255, 0, 0); // 0.3秒内变为红色（RGB: 255,0,0）

        // 并行动作：放大 + 变色（同时执行）
        const spawnAction = action.spawn(scaleUpAction, colorChangeAction);

        // 延迟 1 秒后开始恢复动作（通过 Sequence 实现时序）
        const delayAction = action.delayTime(1); // 延迟1秒
        const scaleDownAction = action.scaleTo(0.3, 1, 1); // 0.3秒内缩小回1倍
        const colorRestoreAction = action.tintTo(0.3, 255, 255, 255); // 0.3秒内恢复白色

        // 序列动作：延迟 → 缩小 + 恢复颜色（同时执行）
        const restoreSequence = action.sequence(delayAction, action.spawn(scaleDownAction, colorRestoreAction));

        // 组合：先执行并行动作，再执行恢复序列
        const finalSequence = action.sequence(spawnAction, restoreSequence);

        this.myButton.node.runAction(finalSequence);
    }
}

关键点解释

• Spawn：action.spawn(scaleUpAction, colorChangeAction)让按钮同时放大和变色（0.3秒内完成）。
• Sequence 嵌套：通过 action.sequence(delayAction, spawn(scaleDown, colorRestore))实现“延迟 1 秒后同时恢复大小和颜色”。
• 动作组合：最终通过 action.sequence(spawnAction, restoreSequence)将“点击反馈”和“恢复原状”串联。

3.3 场景3：复杂组合（嵌套 Sequence 与 Spawn）

需求描述

代码实现（伪代码逻辑）

// 基础动作
const moveAction = action.moveBy(1, new Vec3(100, 0, 0));
const rotateAction = action.rotateBy(1, 180);
const fadeOutAction = action.fadeOut(0.5);
const scaleAction = action.scaleTo(0.5, 0.5, 0.5);
const blinkAction = action.repeat(action.sequence(action.fadeTo(0.1, 0), action.fadeTo(0.1, 1)), 3); // 闪烁3次

// 第一层：同时移动和旋转（Spawn）
const firstSpawn = action.spawn(moveAction, rotateAction);

// 第二层：依次淡出和缩放（Sequence）
const secondSequence = action.sequence(fadeOutAction, scaleAction);

// 第三层：同时旋转和闪烁（Spawn）
const thirdSpawn = action.spawn(rotateAction, blinkAction);

// 最终组合：第一层 → 第二层 → 第三层（Sequence）
const finalAction = action.sequence(firstSpawn, secondSequence, thirdSpawn);
spriteNode.runAction(finalAction);

四、原理解释与核心特性

4.1 Sequence 与 Spawn 的工作流程

graph TD
    A[用户触发事件] --> B{动作类型}
    B -->|Sequence| C[按顺序执行子动作]
    B -->|Spawn| D[同时执行子动作]
    C --> E[子动作1完成? --> 是 --> 执行子动作2]
    D --> F[所有子动作并行运行，任一完成则整体结束]

• Sequence：内部维护一个子动作队列，当前动作完成后自动触发下一个动作（类似“队列执行”）。
• Spawn：同时启动所有子动作，通过监听最慢完成的子动作来决定整体结束时间（类似“并行线程”）。

4.2 核心特性

五、环境准备

5.1 开发工具与版本

• 引擎：Cocos Creator 3.x（推荐）或 Cocos2d-x（JS/C++ 版本）。
• 语言：TypeScript（Cocos Creator）或 JavaScript/C++（Cocos2d-x）。
• 运行环境：Web、Native（iOS/Android）或编辑器预览。

5.2 基础配置

1. 创建新项目（选择“2D 游戏”模板）。
2. 在场景中添加一个 Sprite节点（作为角色）和一个 Button节点（用于交互）。
3. 导入上述代码到对应的脚本文件（如 CharacterAction.ts），并绑定到场景节点。

六、实际应用代码示例（完整可运行）

场景：精灵移动旋转 → 淡出（完整代码）

// CharacterAction.ts（Cocos Creator 3.x）
import { _decorator, Component, Node, Sprite, Vec3, action } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CharacterAction')
export class CharacterAction extends Component {
    @property(Sprite)
    character: Sprite = null;

    start() {
        this.character.node.on(Node.EventType.TOUCH_END, this.playActions, this);
    }

    playActions() {
        // 基础动作
        const move = action.moveBy(1, new Vec3(200, 0, 0));
        const rotate = action.rotateBy(1, 360);
        const fadeOut = action.fadeOut(0.5);

        // 并行动作：移动 + 旋转
        const spawn = action.spawn(move, rotate);

        // 序列动作：并行动作 → 淡出
        const sequence = action.sequence(spawn, fadeOut);

        this.character.node.runAction(sequence);
    }
}

七、测试步骤与详细代码

测试1：验证 Sequence 顺序执行

1. 步骤：运行角色移动旋转 → 淡出代码，观察是否先完成移动旋转，再开始淡出。
2. 预期：移动旋转（1秒）完成后，淡出（0.5秒）才开始。

测试2：验证 Spawn 并行执行

1. 步骤：运行按钮点击 → 放大变色代码，观察按钮是否同时放大和变色（0.3秒内完成）。
2. 预期：放大和变色同步进行，无先后顺序。

测试3：验证组合动作的完整性

1. 步骤：运行复杂组合代码（移动旋转 → 淡出 → 旋转闪烁），检查各阶段是否按逻辑衔接。
2. 预期：移动旋转 → 淡出 → 旋转闪烁依次执行，无冲突或遗漏。

八、部署场景

• 移动端游戏：适用于角色技能动画、UI 反馈（如按钮点击）。
• Web 游戏：用于网页小游戏的交互特效（如点击后弹出动画）。
• 教育应用：通过动画演示分步骤流程（如“先组装零件，再启动机器”）。

九、疑难解答

9.1 常见问题

9.2 调试技巧

• 日志输出：在动作回调中添加 console.log（如 action.callFunc(() => console.log('动作完成'))）。
• 可视化调试：使用 Cocos Creator 的 动画编辑器​ 预览动作时序。
• 动作中断：通过 node.stopAction(action)手动停止特定动作。

十、未来展望与技术趋势

1. 动作编辑器集成：未来 Cocos 可能推出可视化动作编辑器，通过拖拽生成 Sequence/Spawn 组合，降低开发门槛。
2. AI 驱动动画：结合机器学习预测玩家行为，动态调整动作序列（如“根据玩家速度调整移动路径”）。
3. 跨平台优化：针对不同设备（如低端手机）优化动作性能（减少不必要的并行动作计算）。
4. 3D 扩展：Sequence/Spawn 逻辑将延伸至 3D 动作系统（如角色模型的多轴旋转 + 位移）。

十一、总结

• Sequence​ 通过顺序执行实现分步骤动画（如“移动→攻击→消失”），适合线性流程控制。
• Spawn​ 通过并行执行实现复合状态（如“移动+旋转+变色”），适合多维度动画效果。
• 组合使用（如 Spawn 嵌套 Sequence）可应对几乎所有游戏动画需求，提升交互的丰富性与沉浸感。