Cocos Creator 动画组件控制与动态管理
在 Cocos Creator 项目中，通过脚本对动画进行精细化控制是实现复杂交互逻辑的关键。Animation 组件提供了基础的播放、暂停和停止功能，同时支持多动画并行播放与事件回调机制。
基础播放控制
获取节点上的 Animation 组件后，可通过以下方式启动动画：
const anim = this.getComponent(cc.Animation);
// 播放默认动画（若设置了 defaultClip）
anim.play();
// 指定播放名为 'walk' 的动画
anim.play('walk');
// 从第 2 秒处开始播放
anim.play('walk', 2);
// 播放新动画时自动停止正在运行的其他动画
anim.play('jump');
当调用 play 时，系统会根据当前动画状态决定行为：
- 若为停止状态：直接从头开始播放。
- 若为暂停状态：从中断位置继续播放。
- 若为播放中：先终止当前动画再重新开始。
对于需要叠加效果的动画（如角色移动+旋转），可使用 playAdditive 方法：
anim.playAdditive('move_anim'); // 不影响已有动画
anim.playAdditive('rotate_anim'); // 多个动画可同时运行
该模式允许多个动画独立执行，适用于复合动作设计。
播放状态管理
提供对单个或全部动画的暂停、恢复与停止操作：
anim.pause('walk'); // 暂停特定动画
anim.resume('walk'); // 恢复播放
anim.stop('walk'); // 停止并重置时间
注意：
pause仅冻结播放进度，恢复后从当前帧继续；stop则彻底终止动画，下次播放将从头开始。
设置播放时间点
可以动态调整动画当前播放位置，但更改不会立即生效，需等待下一帧更新：
anim.setCurrentTime(1.5, 'run'); // 将 'run' 动画跳转至 1.5 秒
// anim.setCurrentTime(1.5); // 对所有动画设置时间
获取与操控动画状态
AnimationState 是运行时动画实例，负责解析动画剪辑数据并管理其状态。通过它可获取详细信息并实时修改行为。
获取动画状态
const anim = this.getComponent(cc.Animation);
const state = anim.play('attack'); // play 返回对应状态
const state2 = anim.getAnimationState('attack'); // 直接获取
查询动画属性
console.log('名称:', state.name);
console.log('总时长:', state.duration);
console.log('当前时间:', state.time);
console.log('播放速度:', state.speed);
console.log('循环模式:', state.wrapMode);
console.log('是否正在播放:', state.isPlaying);
console.log('重复次数:', state.repeatCount);
console.log('帧率:', state.frameRate);
动态调节播放参数
state.speed = 3; // 加速播放
state.speed = 0.3; // 减速播放
支持多种循环模式，例如：
state.wrapMode = cc.WrapMode.Loop; // 无限循环
state.wrapMode = cc.WrapMode.Normal; // 播放一次
state.repeatCount = 2; // 重复两次
state.repeatCount = Infinity; // 无限循环
注：若设定为
Loop模式，repeatCount默认为Infinity；否则为1。
动画事件处理
在编辑器中添加的帧事件可通过脚本响应。例如，在动画末尾插入事件：
cc.Class({
extends: cc.Component,
onActionComplete: function (count, message) {
console.log('动画结束:', count, message);
}
});
将此组件挂载于动画根节点，当到达指定帧时，系统会自动调用同名函数，并传入预设参数。
动态注册回调
除了可视化事件外，还可通过代码注册监听器，支持以下事件类型：
play: 开始播放stop: 停止播放pause: 暂停resume: 恢复lastframe: 最后一帧（循环多次时触发）finished: 完全播放完成
const anim = this.getComponent(cc.Animation);
// 注册全局回调
anim.on('play', this.onPlay, this);
anim.on('finished', this.onFinish, this);
// 取消注册
anim.off('play', this.onPlay, this);
// 针对特定动画状态注册
const singleState = anim.getAnimationState('idle');
singleState.on('lastframe', this.onLastFrame, this);
动态创建动画剪辑
可在运行时生成动画资源，适用于动态加载或程序化生成动画：
const animation = this.node.getComponent(cc.Animation);
// 由一系列 SpriteFrame 构建动画剪辑
const clip = cc.AnimationClip.createWithSpriteFrames(spriteFrames, 24); // 24fps
clip.name = 'run_cycle';
clip.wrapMode = cc.WrapMode.Loop;
// 添加帧事件
clip.events.push({
frame: 0.8,
func: 'onStep',
params: [1, 'start']
});
// 添加到组件并播放
animation.addClip(clip);
animation.play('run_cycle');
