Web Animation API-Toy模板网

这篇具有很好参考价值的文章主要介绍了Web Animation API。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

先简单的写一个页面，一个背景，一个小球
Web Animation API,Javascript,Html / CSS,javascript,html5,css3
接下来，点击页面，小球会移动到点击的地方

 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" // 动画执行完的状态
     }
   )
 }