[{"insert":"直接操作 DOM 实现元素动画有以下几种方法：\n使用触发器（setTimeout、setInterval、requestAnimationFrame）在固定时间修改元素的状态"},{"attributes":{"list":"ordered"},"insert":"\n"},{"insert":"声明 CSS 动画并在动画开始与结束期间赋予元素动画类名"},{"attributes":{"list":"ordered"},"insert":"\n"},{"insert":"使用 Web Animations API 生成 CSS 动画"},{"attributes":{"list":"ordered"},"insert":"\n"},{"insert":"\n本案例使用的是 Web Animations API，Animations API 允许用户使用 JS 定义 CSS 动画，它不需要用户进行具体的动画实现，因为渲染引擎的优化，运行效果和性能也会比一般 JavaScript 实现的效果更好。使用前先查看两篇文档："},{"attributes":{"link":"https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations"},"insert":"使用 CSS 动画"},{"insert":"，"},{"attributes":{"link":"https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API"},"insert":"使用 Web Animations API"},{"insert":"\n\n初始化时记录圆心位置，手指按下时记录鼠标位置和圆心的角度为起始鼠标角度，手指滑动时鼠标角度与起始角度的差即为所旋转的角度。\n\n"},{"insert":{"image":"R10580997-d5e06baa18b5ad270f3ebe4dbc30b788_16431_936_97.png"}},{"insert":"\n\n"},{"insert":{"image":"R10580997-e91887107da85d067409e7c4b643a9bd_15723_1135_123.png"}},{"insert":"\n\n手指松开时需要给旋转容器设置动画，动画的 easing 可以在 "},{"attributes":{"link":"https://cubic-bezier.com/"},"insert":"cubic-bezier.com"},{"insert":" 调试。多次生成动画并不会使元素的动画列表越来越大而造成内存泄漏，浏览器会自动删除已经结束的动画，除非手动调用 persist() 方法保留。\n\n"},{"insert":{"image":"R10580997-d4f2624bf0066bd01069904cbbc47269_29991_378_176.png"}},{"insert":"\n\n在动画进行期间更改旋转容器的角度不会起作用，也不能直接获取旋转容器的当前旋转角度，需要通过 window.getComputedStyle 方法拿到当前旋转容器的计算样式，这里拿到的 transform 属性就是当前变换状态。\n\n"},{"insert":{"image":"R10580997-b395e1e26cffd38e18f909d2e03cdf8e_5929_416_73.png"}},{"insert":"\n\n不同于平常使用的 rotate()、translate()，这里出现的是 matrix() 函数，它是一个由 6 个值组成的 2D 变换矩阵，从"},{"attributes":{"link":"https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/rotate"},"insert":"这里"},{"insert":"我们得知 rotate() 转换成矩阵的样子。\n\n"},{"insert":{"image":"R10580997-b58ff0a57aedfa3cda88d8411d6d6503_9283_287_241.png"}},{"insert":"\n\n于是我们得到了 cosa 和 sina，使用 Math.atan2(sina, cosa) 来得到容器的旋转角度，并取消当前进行的动画。\n\n"},{"insert":{"image":"R10580997-04b9053a5c6fce8d5d2da3188e8a1aab_63184_622_284.png"}},{"insert":"\n"}]
[{"insert":{"video":"R10514188-5a5a6e80d09470d60bc400589330af23_1166675.mp4"}},{"insert":"下面有个圆形，上面是物体，手指滑动可以使圆形带动物体按照一定角度旋转，点击物体可以选择触发事件\n"}]
使用 Animations API 制作旋转选择器动画
使用 Animations API 制作旋转选择器动画
R10580997-0ba8fe5a4be80c8bcdd1d69d51f2385f_122455_375_667.png
https://v4pre.h5app.com/play/Bx4zhqLv