Web Animation API

工作中经常会遇到需要动画的场景，连贯动画都是用CSS实现，，但是如果遇到需要用户互动介入的动画，那纯CSS很比较吃力，也不是不能实现，需要动态修改CSS变量，而且动画容易被JS代码阻塞，导致动画卡顿，不连贯，还好，web api推出了**animation动画解决方案**，并且不会触发回流，也就是不会被阻塞，不在主线程执行，利用渲染线程处理。

先简单的写一个页面，一个背景，一个小球

接下来，点击页面，小球会移动到点击的地方

 let box = document.getElementById('box') // 小球
 let container = document.getElementById('container') // 画布

 container.onclick = function (event) {
   let x_ = event.pageX // 记录小球的结束位置x
   let y_ = event.pageY // 记录小球的结束位置y
   // 记录小球的起始位置
   let { x,y } = box.getBoundingClientRect()
   // 触发动画
   box.animate(
     [
       {
         transform: `translate(${x}px, ${y}px)`,
         offset: 0 // 执行的阶段 0%
       },
       {
         transform: `translate(${x_}px, ${y_}px)`,
         offset: 1 // 执行的阶段 100%
       }
     ],
     {
       duration: 800, // 动画执行时长
       fill: "forwards" // 动画执行完的状态
     }
   )
 }

我们说说他这个API怎么用，animate 动画，接收2个参数，一个动画改变的关键帧，另外一个对象，接收动画执行的参数
animate([], {})，可以看下最终实现的效果：