Web 动画 API 的改进

waapi.animate() 方法添加了许多提升使用体验的功能，并大大改善了使用 WAAPI 的整体体验。

在本章列出的所有 API 改进之上，还可以将 WAAPI 动画链接到 Anime.js 内置的 ScrollObserver

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

并使用 a Scope 来轻松处理媒体查询和组件清理：

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