HTML5 中 requestAnimationFrame 怎么获取时间戳做匀速运动-H5教程-PHP中文网

requestanimationframe 回调自动传入高精度时间戳，用于计算 deltatime 实现匀速动画；需记录上一帧时间戳，用当前帧减去它得到毫秒差，再转为秒并乘以速度更新位置。

html5 中 requestanimationframe 怎么获取时间戳做匀速运动

requestAnimationFrame 回调函数会自动传入一个高精度时间戳（单位：毫秒，小数部分精确到微秒），这个时间戳是自页面加载以来的单调递增值，适合用来计算动画中的匀速运动。

直接使用回调参数的时间戳

不需要手动调用 Date.now() 或 performance.now()，浏览器会在每次触发回调时把当前时间戳作为第一个参数传入：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

function animate(timestamp) {
  // timestamp 就是系统提供的高精度时间戳
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

计算经过的时间（deltaTime）实现匀速

匀速运动的关键是：位移 = 速度 × 时间差。你需要记录上一帧的时间戳，用当前帧减去它，得到真实经过的毫秒数（deltaTime）：

初始化一个变量（如 lastTime）保存上一帧时间戳，首次运行可设为 0 或用第一次回调的 timestamp 初始化
每一帧计算 const deltaTime = timestamp - lastTime
用 deltaTime 换算成秒（除以 1000），再乘以目标速度（如 px/s），得到本帧应移动的像素
更新 lastTime = timestamp

示例：水平匀速移动一个 div

假设想让元素以 120px/s 的速度从左向右匀速移动：

const box = document.getElementById('box');
let lastTime = 0;
let x = 0; // 当前横坐标
const speed = 120; // px/s
<p>function animate(timestamp) {
if (!lastTime) lastTime = timestamp;
const deltaTime = timestamp - lastTime;
const deltaSec = deltaTime / 1000;
x += speed * deltaSec;
box.style.transform = <code>translateX(${x}px)</code>;
lastTime = timestamp;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);</p>