JS动画为什么卡顿不流畅？

一明艳提问于 2026-03-21 09:05:22 阅读 15

交互

我用 JS 写了个简单的元素移动动画，但明显感觉卡顿，不像 CSS 动画那么顺滑。是不是我写的方式有问题？

试过用 setInterval 每 16ms 改一次 left 值，也换成 requestAnimationFrame 了，还是不够流畅。代码大概长这样：

let pos = 0;
const box = document.getElementById('box');
function animate() {
  pos += 2;
  box.style.left = pos + 'px';
  if (pos < 300) requestAnimationFrame(animate);
}
animate();

JS动画交互设计用户体验

我来解答赞 4 收藏

反馈

1 条解答

百里梓熙 Lv1

你这个问题 DOM 操作太多了，改成 transform 属性试试。这样改：

let pos = 0;

const box = document.getElementById('box');

function animate() {

  pos += 2;

  box.style.transform = 'translateX(' + pos + 'px)';

  if (pos < 300) requestAnimationFrame(animate);

}

animate();

2026-03-21 09:09