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