js怎样操作Web Animations时间轴 3个时间控制技巧精准调度动画-js教程-PHP中文网

js怎样操作Web Animations时间轴 3个时间控制技巧精准调度动画

尼克

发布： 2025-06-23 19:53:01

原创

284人浏览过

要精确控制动画的开始时间，首先设置starttime属性；其次使用animation.ready promise确保动画准备就绪；再者结合currenttime定位播放位置。调整播放速度通过playbackrate属性实现，可动态响应用户交互并限制范围。暂停、恢复和反向播放分别用pause()和play()方法，反向播放更推荐结合currenttime与playbackrate实现平滑过渡，并可通过监听finish事件自动切换方向。

js怎样操作Web Animations时间轴 3个时间控制技巧精准调度动画

JS操作Web Animations时间轴，核心在于理解currentTime、playbackRate和pause/play这三个属性和方法。它们提供了对动画播放位置、速度和状态的精细控制。

currentTime控制动画播放位置 playbackRate调整动画播放速度 pause/play控制动画播放状态

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

想精确控制动画的开始时间，不能只依赖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怎样操作Web Animations时间轴 3个时间控制技巧精准调度动画的详细内容，更多请关注php中文网其它相关文章！