JavaScript 中闭包怎么在动画帧调度中保存每一帧的物理运动状态-js教程-PHP中文网

闭包在动画帧调度中保存每帧物理状态，通过捕获位置、速度等变量实现独立运动上下文，避免共享干扰；需隔离循环变量、结合时间戳计算Δt提升精度，并提供cancel机制防止内存泄漏。

javascript 中闭包怎么在动画帧调度中保存每一帧的物理运动状态

闭包在动画帧调度中保存每一帧物理运动状态，核心是利用函数作用域“捕获并持久化”当前帧的状态变量（如位置、速度、加速度），使 requestAnimationFrame 回调每次执行时都能访问到属于该动画实例的独立状态，而非共享或覆盖的全局值。

用闭包封装独立的运动上下文

每个动画对象（比如一个小球）应有自己的一套状态变量。闭包让这些变量不被外部干扰，也不随其他动画重置：

把初始状态（x, v, a）定义在启动函数内部
返回一个只读取/更新这些变量的 render 函数，并传给 requestAnimationFrame
多次调用启动函数，会生成多个互不影响的闭包环境

例如：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function createMover(x0, v0, a = 0.2) {
  let x = x0, v = v0;
  return function render(now) {
    v += a;
    x += v;
    // 更新 DOM 或 Canvas
    el.style.left = x + 'px';
    requestAnimationFrame(render);
  };
}
const anim1 = createMover(0, 0);
const anim2 = createMover(100, -2); // 完全独立的速度和起始点

避免闭包中意外捕获循环变量

在批量创建多个动画时（如 for 循环中），若直接引用循环变量，所有闭包会共享最后一轮的值。必须用闭包隔离每轮迭代：

错误写法：for (let i = 0; i console.log(i)); } —— 这里用 let 是安全的；但若用 var 就会全部输出 3
更稳妥做法：显式用 IIFE 或箭头函数参数绑定当前帧状态：arr.forEach((state, i) => createMover(state.x, state.v))

结合时间戳做帧间增量计算（更精确的物理模拟）

单纯依赖帧率会导致快慢不一。闭包可保存上一帧时间戳，结合 now 参数算出真实经过时间 Δt：

function createTimedMover(x0, v0, a = 0.2) {
  let x = x0, v = v0;
  let lastTime = 0;
  return function render(now) {
    if (!lastTime) lastTime = now;
    const dt = (now - lastTime) / 1000; // 秒为单位
    v += a * dt;
    x += v * dt;
    lastTime = now;
    el.style.left = x + 'px';
    requestAnimationFrame(render);
  };
}