Web 动画 API 的改进

waapi.animate() 方法带来了许多使用体验上的改进，并极大地提升了使用 WAAPI 的整体体验。

除了本章列出的所有 API 改进之外，还可以将 WAAPI 动画与 Anime.js 内置的 滚动观察器 (ScrollObserver) 链接起来

waapi.animate('.square', {
  translate: '100px',
  autoplay: onScroll()
});

并使用 作用域 (Scope) 以便轻松处理媒体查询和组件清理

createScope({
  mediaQueries: { reduceMotion: '(prefers-reduced-motion)' }
})
.add(({ matches }) => {
  const { reduceMotion } = matches;
  waapi.animate('.square', {
    transform: reduceMotion ? ['100px', '100px'] : '100px',
    opacity: [0, 1],
  });
});