Generator 可用作游戏动画的手动帧控制器，通过 yield 控制每帧更新时机，每次调用 next() 执行到下一个 yield，天然匹配“一帧一停”需求，适合精确节奏、暂停/恢复等复杂场景。
Generator 可以用作游戏动画的“手动帧控制器”，它不直接渲染画面，而是按需产出每一帧的逻辑状态，把动画控制权交还给开发者，适合需要精确节奏、暂停/恢复或复杂状态流转的场景。
用 yield 控制每帧的更新时机
Generator 函数每次调用 next() 就执行到下一个 yield，天然匹配“一帧一停”的需求。比如实现一个角色移动动画：
function* moveAnimation(startX, endX, durationFrames) {
const step = (endX - startX) / durationFrames;
let x = startX;
for (let i = 0; i < durationFrames; i++) {
yield { x: Math.round(x), frame: i + 1 };
x += step;
}
}每次调用 iterator.next() 就得到当前帧的位置和序号，你可以决定是否渲染、是否跳过、是否延时——完全自主。
配合 requestAnimationFrame 实现平滑播放
把 Generator 和 requestAnimationFrame 结合，就能在浏览器刷新节奏下逐帧推进：
立即学习“Java免费学习笔记（深入）”；
- 创建迭代器后，在 rAF 回调里调用
next() - 检查
done判断动画是否结束 - 用
value中的数据更新 DOM 或 Canvas
示例：
const anim = moveAnimation(0, 300, 60); // 60 帧移动
function tick() {
const { value, done } = anim.next();
if (!done) {
document.getElementById('player').style.left = value.x + 'px';
requestAnimationFrame(tick);
}
}
tick();支持暂停、快进与重置
因为 Generator 的状态是可保存的，所以很容易扩展控制能力：
-
暂停：停止调用
next()，迭代器状态保留在当前yield -
快进：循环多次调用
next()，跳过中间帧（适合技能释放前摇跳过） - 重置：重新调用 Generator 函数生成新迭代器
例如实现带暂停键的游戏 UI：
let anim = moveAnimation(0, 300, 60);
let isPaused = false;
<p>function resume() {
if (isPaused) {
isPaused = false;
tick();
}
}</p><p>function tick() {
if (isPaused) return;
const { done } = anim.next();
if (!done) requestAnimationFrame(tick);
}嵌套 Generator 管理复合动画
多个动画可以组合成一个顶层 Generator，用 yield* 委托执行，清晰表达先后/并行关系：
function* characterAction() {
yield* walkAnimation(0, 200, 40); // 先走
yield* attackAnimation(40); // 再攻击
yield* idleAnimation(); // 最后待机
}这样既保持单点控制，又能复用动画逻辑，比纯 setTimeout 堆砌更易维护。
