本文讨论了在工作中如何使用WebAPI的`animate`方法实现更流畅的用户交互动画，避免了CSS动画中的阻塞问题，通过渲染线程处理提高了动画性能，以小球移动为例详细讲解了API的用法。
工作中经常会遇到需要动画的场景，连贯动画都是用CSS实现，，但是如果遇到需要用户互动介入的动画，那纯CSS很比较吃力，也不是不能实现，需要动态修改CSS变量，而且动画容易被JS代码阻塞，导致动画卡顿，不连贯，还好，web api推出了**animation动画解决方案**，并且不会触发回流，也就是不会被阻塞，不在主线程执行，利用渲染线程处理。
先简单的写一个页面，一个背景，一个小球
接下来，点击页面，小球会移动到点击的地方
let box = document.getElementById(
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
