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

2017年5月11日

一、描述

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

二、原 SVG 方案

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

椭圆轨道使用 标签绘制，行星小球使用 标签绘制；

不断地从 标签中，获取定位信息(X,Y)，并更新行星小球的位置；

获取 X,Y 值：

var l = path.getTotalLength()

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

var x = p.x;

var y = p.y;

弊端：

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

三、CSS3 方案

1. HTML 布局

// 轨道

// 行星

// 文案

行星

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 方面，都大大精简了代码。