[注解] [806] 沿环形路径平移的动画

[cssmagic]

花絮与注解

第 221 页 ‧ 本节

这一节算是全书最烧脑的一个案例了，不过我们用一句话就可以概括它：这基本上是一个 “自转抵消公转” 的故事。

当自转周期与公转周期完全相等时，这个物体在外界看来就没有任何角度变化了，从而以一种 “平移” 的方式在围绕圆心转动。

[cyanxxx]

请问如果想像书中提到google+那样一圈头像都沿路径转一圈要怎么做呢？

[cssmagic]

@cyanxxx 即使不用 JS，用纯 CSS 来实现应该也是可行的。不如把这个问题留给你自己思考吧？ 😉

[cyanxxx]

我尝试用不同的keyframe来控制它们起始不同的角度，但是会造成有很多keyframe，但是如果要做到google+那样，新加入人挤出去位置的话，假设一开始2个人，每个以180°来填满圆，那样又会就会有两个keyframe控制，3个人，又以120°控制，就这样会又会有3个keyframe，假设满人是8，那就会有45个，不知道有没有好的方法呢？

[cssmagic]

@cyanxxx 用动画的 delay 能控制起始旋转角度吗？我没试过，只是抛一个想法出来哈。

另外，思路不用局限于 CSS。结合 JS 来控制动画可能会简单一些。

[MwumLi]

文中写到: "每个transform-origin都是可以被两个 translate() 模拟出来的", 示例代码给的是:

transform: rotate(30deg); transform-origin: 200px 300px;
// 等价
transform: translate(200px, 300px) rotate(30deg)
translate(-200px, -300px); transform-origin: 0 0;

最后为什么代码里不用给变换元素设置 transform-origin: 0 0;

[cssmagic]

@MwumLi 最后为什么代码里不用给变换元素设置 transform-origin: 0 0;

示例代码只是为了说明 translate() 模拟 transform-origin 的原理。

在最终的代码里，动画的原点就是路径的正中心，也就是 transform-origin 的初始值，因此不需要显式写出来。