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

JS操作Web Animations时间轴时，可通过以下三个核心时间控制技巧实现精准调度动画：

1. 精确控制动画开始时间

设置startTime属性：直接指定动画的启动时间点（相对于文档时间轴），适用于同步多个动画或延迟播放。
const element = document.querySelector('.my-element');const animation = element.animate( [{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }], { duration: 1000, fill: 'forwards' });animation.startTime = document.timeline.currentTime + 3000; // 3秒后启动
使用animation.ready Promise：确保动画资源加载完成后再播放，避免因资源未就绪导致的卡顿。
animation.ready.then(() => { console.log('动画已准备好播放'); animation.play();});
结合currentTime定位播放位置：直接跳转到动画的特定时间点（如从中间开始播放），适用于复杂序列控制。
animation.currentTime = 500; // 定位到500ms位置animation.play();

2. 动态调整动画播放速度

通过playbackRate属性控制速度：
正数表示正向播放，负数表示反向播放。
例如，设置为2倍速播放：animation.playbackRate = 2; // 动画速度变为两倍
响应用户交互动态调整速度：
根据鼠标滚轮方向控制快进/倒退：window.addEventListener('wheel', (event) => { if (event.deltaY > 0) { animation.playbackRate += 0.1; // 向前快进 } else { animation.playbackRate -= 0.1; // 向后倒退 }});
注意：需限制playbackRate范围（如-5到5），避免动画因速度过快显得不自然。

3. 实现动画的暂停、恢复与反向播放

暂停与恢复：
使用pause()和play()方法直接控制状态：animation.pause(); // 暂停animation.play(); // 恢复
平滑反向播放：
方法1：结合currentTime和playbackRate实现无跳转反向：animation.pause();animation.playbackRate = -1; // 设置为反向animation.play();
方法2：监听finish事件自动切换方向：animation.onfinish = () => { if (animation.currentTime <= 0) { animation.playbackRate = 1; // 切换为正向 } else { animation.playbackRate = -1; // 切换为反向 } animation.play();};

核心属性与方法总结

通过灵活组合这些属性与方法，可以实现对Web Animations时间轴的精准控制，从而创建出更流畅、交互性更强的动画效果。

热门标签