Web Animation 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],
  });
});