当前位置：首页 > 文章列表 > 文章 > 前端 > JS控制动画时间轴的3个实用技巧

JS控制动画时间轴的3个实用技巧

2025-07-15 10:18:51 0浏览收藏

如何精确控制动画的开始时间？

想精确控制动画的开始时间，不能只依赖setTimeout或者简单的事件监听。Web Animations API提供了更强大的方式。

首先，动画的startTime属性允许你设置动画的启动时间。这在同步多个动画时特别有用。例如，你可能希望一个动画在页面加载后的特定时间开始，而不是立即开始。

const element = document.querySelector('.my-element');
const animation = element.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }],
  { duration: 1000, fill: 'forwards' }
);

// 假设你想在3秒后启动动画
animation.startTime = document.timeline.currentTime + 3000;

其次，你还可以使用animation.ready promise。这个promise会在动画准备好播放时resolve。这意味着浏览器已经完成了必要的准备工作，比如加载资源。

animation.ready.then(() => {
  console.log('动画已准备好播放');
  animation.play(); // 确保动画在此刻开始
});

再者，结合currentTime属性，你可以将动画直接定位到某个特定的时间点，然后再播放。这对于从中间位置开始动画或者实现更复杂的动画序列控制非常有用。

animation.currentTime = 500; // 将动画定位到500ms的位置
animation.play();

如何动态调整动画的播放速度？

调整动画的播放速度，playbackRate属性是关键。它允许你以倍数形式改变动画的播放速度，正数表示向前播放，负数表示向后播放。

例如，将动画速度设置为两倍：

const element = document.querySelector('.my-element');
const animation = element.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }],
  { duration: 1000, fill: 'forwards' }
);

animation.playbackRate = 2; // 动画速度变为两倍

更进一步，你可以根据用户的交互动态调整播放速度。例如，根据鼠标滚轮的滚动方向来控制动画的快进或倒退。

window.addEventListener('wheel', (event) => {
  if (event.deltaY > 0) {
    animation.playbackRate += 0.1; // 向前快进
  } else {
    animation.playbackRate -= 0.1; // 向后倒退
  }
});

这种动态调整播放速度的方式，为用户提供了更强的交互性和控制感。需要注意的是，过度调整playbackRate可能会导致动画看起来不自然，因此需要适当限制调整的范围。

如何实现动画的暂停、恢复和反向播放？

pause()和play()方法用于控制动画的暂停和恢复。这非常简单直接。

const element = document.querySelector('.my-element');
const animation = element.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }],
  { duration: 1000, fill: 'forwards' }
);

// 暂停动画
animation.pause();

// 恢复动画
animation.play();

但更有趣的是如何实现动画的反向播放。你可以通过将playbackRate设置为负值来实现，但直接这样做可能会导致动画突然跳到结束位置再反向播放。

更优雅的方式是结合currentTime和playbackRate。首先，暂停动画，然后将playbackRate设置为负值，再从当前位置恢复播放。

animation.pause();
animation.playbackRate = -1;
animation.play();

这种方式可以实现平滑的反向播放，避免了突兀的跳转。另外，你还可以监听动画的finish事件，当动画播放到开始或结束位置时，自动停止或切换播放方向。

animation.onfinish = () => {
  if (animation.currentTime <= 0) {
    animation.playbackRate = 1; // 切换为正向播放
  } else {
    animation.playbackRate = -1; // 切换为反向播放
  }
  animation.play();
};

通过这些技巧，你可以更精准地控制Web Animations的时间轴，创造出更丰富、更具交互性的动画效果。

今天关于《JS控制动画时间轴的3个实用技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

时间轴 currentTime Web动画 playbackRate pause/play