css3模拟行星环绕恒星旋转的动效

2017年5月11日

一、描述

模仿行星绕着恒星旋转的动效

二、原 SVG 方案

一开始我选择使用了 SVG 方案去完成这个动效：

椭圆轨道使用 <path> 标签绘制，行星小球使用 <circle> 标签绘制；
不断地从 <path> 标签中，获取定位信息（X,Y），并更新行星小球的位置；

获取 <path> X,Y 值：

var l = path.getTotalLength()
var p = path.getPointAtLength(t * l) // 其中 t 为 0 到 1 的值
var x = p.x;
var y = p.y;

弊端：
由于每个行星小球，实际上是根据 <path> 轨道中每个点的位置，重新来定位的。所以当行星小球的速度越慢，越容易看出“抖动”的情况。整体动画不顺滑，因此使用 CSS3 特性来重新调整这个动效。

三、CSS3 方案

1. HTML 布局

<div class="galaxy">
   // 轨道
    <div class="orbit">
        // 行星
        <div class="planet">
           // 文案
            <span class="name">行星</span>
        </div>
    </div>
</div>

2. 轨道 360° 自转

首先让轨道沿着 Z 轴 360° 循环旋转。

@keyframes orbit-rotate {
  0% {
    transform: rotateZ(0deg); }

  100% {
    transform: rotateZ(-360deg); } 
}

3. 倾斜轨道，渲染立体感觉

transform: rotateX(80deg);

80° 是个视觉上的“平面”角度，若真的设置 90°的话，在页面上便什么也看不到了。

注意到此时行星也“扁”了。

4. 把行星“立”起来，且添加自转

@keyframes self-rotate {
  0% {
    transform: rotateX(-90deg) rotateY(360deg); }

  100% {
    transform: rotateX(-90deg) rotateY(0deg); } 
}

5. 行星自转与轨道自转同时进行，且速率保持一致。

即两个 animation 都保持 animation-duration 和 animation-timing-function 等的参数一致。

那么行星小球就会永远把正切面展示在前方了。

四、总结

与原 SVG 方案相比，新的 CSS3 方案解决了行星小球在转动时的“抖动”问题，同时在 HTML 标签以及 JS 方面，都大大精简了代码。