css实现圆环路径,笔记：CSS、canvas 和 SVG 分别实现元素沿环形路径运动动画

CSS 部分

最早接触到使用 CSS 使元素以环形路径运动的办法来自于 Lea Verou 的书《CSS 揭秘》中第八章中的《沿环形路径平移的动画》。虽然随着 CSS 的发展部分语法有些出入，不过作者早在 2012 年就在自己的博客上发表了《Moving an element along a circle》记录相关思路

演示

以下是一个根据其思路制作的例子，做了一些简单演变，方便演示。

理解上面这种办法的关键是去理解当前元素自身的位置，及其配合 transform-origin: x y 来找到一个合适的圆心位置进行旋转运动的过程:

演示里的 mover(粉红色运动的球体)设置在容器的十二点钟方向，并以其为起点开始运动，所以这个时候要找到圆心：

就需要把 transform-origin 在 x 轴上值设置为 mover 自身的中心，也就是 50%；

至于 y 轴上的值，因为现在 mover 自身处在圆的顶部，所以整个圆的半径就正好等于 y 的值(对应下面 CodePen 左边的球体运动);

稍稍改变一下，mover 的初始位置本身就在圆形的中心，同时希望 mover 以九点位置为起始绕着容器做圆周运动，一个简单的思路，通过绝对定位将元素首先定位到九点方向，之后设定 transform-origin，x 值正好是半径值 250⁄2 = 125px，y 轴上的值则正好是 mover 的半个身位 30⁄2 = 15px(对应下面

CodePen 右边的球体运动)。

圆周运动的起始位置

可以尝试把下面这个 CodePen 中 .mover 的 animation 声明注释，观察 .mover 本身的起始位置，由此来理解 transform-origin 配合 transform: rotate() 到底做了什么。

canvas 部分

使用画布()制作物体沿环形运动效果，可以分为两个层次进行理解：

首先是画布制作动画的一般原理，即如何让画布上的内容动起来；

其次就是和圆这个更加具体的主题打交道，牵扯到一些简单的数学问题如三角函数中正弦(sin)、余弦(cos)。

演示

canvas 动画的一般原理

使用 元素来实现元素沿环形路径运动，由于 元素本身「画布」的特性，这个过程有点类似「翻书(flip book)」动画：在本子的不同页上画出动画的不同状态，之后以快速翻页造成的视觉差，来达到目标视觉效果。