引言

一、技术背景

1.1 Cocos2d 动作系统的核心设计

• 基础动作：单次执行，改变节点的某一属性（如 RotateBy旋转指定角度）。
• 复合动作：组合多个基础动作（如 Sequence按顺序执行，Spawn同时执行）。
• 特殊动作：
  • RepeatForever：无限循环执行某个动作（如让精灵持续旋转）。
  • DelayTime：暂停执行指定时间（如延迟 2 秒后触发下一个动作）。

1.2 重复动作与延迟动作的核心作用

• RepeatForever：将一个基础动作（如旋转、缩放）包装为无限循环的动画，适用于持续性的视觉效果（如角色待机动画、UI 元素闪烁）。
• DelayTime：在动作序列中插入等待时间，控制动画的时序逻辑（如“技能冷却 3 秒后可用”“点击后延迟 1 秒显示提示”）。

二、应用使用场景

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

3.1 场景1：角色持续呼吸动画（RepeatForever 缩放）

需求描述

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

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

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

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

        // 基础动作：缩放至 1.1 倍（0.5秒），再缩放回 1.0 倍（0.5秒），总周期 1 秒
        const scaleUp = action.scaleTo(0.5, 1.1, 1.1);
        const scaleDown = action.scaleTo(0.5, 1.0, 1.0);
        const breatheSequence = action.sequence(scaleUp, scaleDown);

        // 无限循环呼吸动画
        const repeatBreathe = action.repeatForever(breatheSequence);

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

关键点解释

• 基础动作组合：scaleUp（放大到 1.1 倍，0.5 秒）和 scaleDown（缩小回 1.0 倍，0.5 秒）通过 Sequence组合成一个完整的呼吸周期（1 秒）。
• RepeatForever：action.repeatForever(breatheSequence)让呼吸周期无限循环，模拟持续的呼吸效果。
• 视觉效果：通过轻微的缩放变化（1.0 → 1.1）让角色看起来更生动。

3.2 场景2：技能冷却延迟与提示（DelayTime + RepeatForever）

需求描述

代码实现（Cocos Creator 3.x）

// SkillCooldown.ets
import { _decorator, Component, Node, Sprite, action } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SkillCooldown')
export class SkillCooldown extends Component {
    @property(Sprite)
    skillButton: Sprite = null; // 技能按钮
    @property(Sprite)
    cooldownIcon: Sprite = null; // 冷却提示图标（初始隐藏）

    start() {
        // 模拟技能点击事件（实际项目中通过按钮回调触发）
        this.skillButton.node.on(Node.EventType.TOUCH_END, this.startCooldown, this);
    }

    startCooldown() {
        // 1. 隐藏技能按钮，显示冷却图标
        this.skillButton.node.active = false;
        this.cooldownIcon.node.active = true;

        // 2. 延迟 3 秒（模拟冷却时间）
        const delay = action.delayTime(3);

        // 3. 无限循环旋转冷却图标（每 2 秒转一圈）
        const rotate = action.rotateBy(2, 360); // 2 秒旋转 360 度
        const repeatRotate = action.repeatForever(rotate);

        // 4. 组合：延迟 → 开始旋转
        const cooldownSequence = action.sequence(delay, repeatRotate);

        this.cooldownIcon.node.runAction(cooldownSequence);
    }
}

关键点解释

• DelayTime：action.delayTime(3)暂停 3 秒，模拟技能冷却的等待时间。
• RepeatForever：action.repeatForever(rotate)让冷却图标持续旋转（每 2 秒一圈），提示玩家技能仍在冷却。
• 时序控制：通过 Sequence确保旋转动画在延迟结束后启动。

3.3 场景3：组合应用（延迟 + 无限循环 + 停止）

需求描述

代码实现（Cocos Creator 3.x）

// FlashingUI.ets
import { _decorator, Component, Node, Sprite, action, input, Input, EventTouch } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('FlashingUI')
export class FlashingUI extends Component {
    @property(Sprite)
    tipsPanel: Sprite = null; // 提示框精灵
    private flashAction: any = null; // 存储无限循环动作（用于停止）

    start() {
        // 初始显示提示框（透明度 1）
        this.tipsPanel.node.opacity = 255;
        this.tipsPanel.node.active = true;

        // 1. 延迟 1 秒后开始无限闪烁
        const delay = action.delayTime(1);
        const fadeOut = action.fadeTo(0.5, 0.3 * 255); // 0.5 秒淡出到 30% 透明度
        const fadeIn = action.fadeTo(0.5, 1 * 255); // 0.5 秒淡入到 100% 透明度
        const flashSequence = action.sequence(fadeOut, fadeIn);
        this.flashAction = action.repeatForever(flashSequence);

        // 组合：延迟 → 开始闪烁
        const startFlash = action.sequence(delay, this.flashAction);
        this.tipsPanel.node.runAction(startFlash);

        // 2. 监听点击事件（停止闪烁并隐藏）
        input.on(Input.EventType.TOUCH_START, this.stopFlashing, this);
    }

    stopFlashing() {
        if (this.flashAction) {
            this.tipsPanel.node.stopAction(this.flashAction); // 停止无限循环
            this.tipsPanel.node.active = false; // 隐藏提示框
            input.off(Input.EventType.TOUCH_START, this.stopFlashing, this); // 移除监听
        }
    }
}

关键点解释

• 延迟启动：action.delayTime(1)确保提示框显示 1 秒后再开始闪烁。
• 无限循环闪烁：通过 fadeTo控制透明度变化（1 → 0.3 → 1），并用 RepeatForever持续循环。
• 动态停止：点击任意位置时，通过 stopAction终止无限循环，并隐藏提示框。

四、原理解释与核心特性

4.1 重复动作与延迟动作的工作流程

sequenceDiagram
    participant User as 用户（触发事件）
    participant Action as 动作系统（RepeatForever/DelayTime）
    participant Node as 目标节点（如Sprite）

    User->>Action: 调用 runAction(RepeatForever/DelayTime)
    alt RepeatForever
        Action->>Node: 无限循环执行子动作（如旋转/缩放）
        loop 每个周期
            Node->>Node: 更新属性（如角度/缩放比例）
        end
    alt DelayTime
        Action->>Node: 等待指定时间（不执行子动作）
        Action->>Node: 时间结束后触发后续动作（如有）
    end

• RepeatForever：内部通过循环调用子动作的 update方法，每次子动作完成后重新启动（无终止条件）。
• DelayTime：通过引擎的调度器（Scheduler）记录剩余等待时间，在时间到达前阻止后续动作执行。

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. 导入上述代码到对应的脚本文件（如 BreathingCharacter.ts），并绑定到场景节点。

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

场景：角色旋转 + 延迟闪烁（组合示例）

// CombinedAction.ets
import { _decorator, Component, Node, Sprite, action } from 'cc';
const { ccclass, property } = _decorator;

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

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

        // 1. 无限循环旋转（每 2 秒一圈）
        const rotate = action.rotateBy(2, 360);
        const repeatRotate = action.repeatForever(rotate);

        // 2. 延迟 1 秒后开始无限闪烁（透明度 1 → 0.5 → 1）
        const delay = action.delayTime(1);
        const fadeOut = action.fadeTo(0.5, 0.5 * 255);
        const fadeIn = action.fadeTo(0.5, 1 * 255);
        const flashSequence = action.sequence(fadeOut, fadeIn);
        const repeatFlash = action.repeatForever(flashSequence);

        // 3. 组合：旋转（立即） + 延迟闪烁（1 秒后）
        this.character.node.runAction(repeatRotate);
        this.character.node.runAction(delay.then(repeatFlash)); // 注意：Cocos 3.x 可能用 sequence 实现时序
    }
}

七、测试步骤与详细代码

测试1：验证 RepeatForever 持续性

1. 步骤：运行角色呼吸动画，观察是否持续缩放（1.0 → 1.1 → 1.0 循环）。
2. 预期：缩放动画无间断，视觉上角色有轻微的“呼吸”效果。

测试2：验证 DelayTime 时序控制

1. 步骤：运行技能冷却提示，点击技能按钮后，检查是否延迟 3 秒后开始旋转。
2. 预期：技能按钮立即隐藏，冷却图标在 3 秒后开始旋转。

测试3：验证组合动作的兼容性

1. 步骤：运行角色旋转 + 延迟闪烁，观察旋转和闪烁是否同时生效（旋转持续，闪烁 1 秒后叠加）。
2. 预期：旋转动作不受闪烁影响，两者独立运行。

八、部署场景

• 移动端游戏：适用于角色待机动画、技能冷却提示、UI 反馈闪烁。
• Web 游戏：用于网页小游戏的持续特效（如飘落的叶子、闪烁的广告按钮）。
• 教育应用：通过延迟提示引导学生逐步操作（如“延迟 2 秒后显示下一步”。

九、疑难解答

9.1 常见问题

9.2 调试技巧

• 日志输出：在动作回调中添加 console.log（如 action.callFunc(() => console.log('动作完成'))）。
• 可视化调试：使用 Cocos Creator 的 动画编辑器​ 预览动作时序。
• 动作管理：通过 node.getRunningActions()查看当前节点的所有运行动作。

十、未来展望与技术趋势

1. 可视化动作编辑：未来 Cocos 可能推出拖拽式动作编辑器，通过图形界面配置重复次数、延迟时间，降低开发门槛。
2. AI 驱动动画：结合机器学习模型动态调整重复动作的参数（如根据玩家距离调整呼吸频率）。
3. 跨平台优化：针对低端设备优化重复动作的性能（如减少不必要的属性更新）。
4. 3D 扩展：RepeatForever/DelayTime 逻辑将延伸至 3D 动作系统（如模型持续旋转 + 延迟缩放）。

十一、总结

• RepeatForever​ 通过无限循环实现“呼吸”“飘动”等持续效果，提升场景的生动性。
• DelayTime​ 通过精确的时序控制实现“冷却提示”“步骤引导”等功能，优化交互逻辑。
• 组合使用​ 可应对复杂的动画需求（如“延迟后无限循环”“循环中插入暂停”），为玩家带来更流畅、更具层次感的体验。