美文网首页
css3模拟行星环绕恒星旋转的动效

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

作者: HeyDelilah | 来源:发表于2018-03-02 11:41 被阅读0次

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-durationanimation-timing-function 等的参数一致。

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

四、总结

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

相关文章

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

    2017年5月11日 一、描述 模仿行星绕着恒星旋转的动效 二、原 SVG 方案 一开始我选择使用了 SVG 方案...

  • css简单动效

    简单的css3动效 直接上代码 摆钟 景色动效 相册 模拟ios手机相册吸附效果

  • 宇宙模拟器Space Engine 0.990教程5:行星,飞船

    宇宙模拟器Space Engine 0.990教程5:行星,飞船,星云,恒星,黑洞等编辑教程 5.1 行星,恒星,...

  • 为什么说行星的寿命比恒星的寿命长?

    行星通常指自身不发光,环绕着恒星的天体。其公转方向常与所绕恒星的自转方向相同。一般来说行星需具有一定质量,行星的质...

  • 行星调性10

    行星调性我的感觉是,绕着恒星转的行星。 比如,地球。 行星是动的,能看得见。而恒星,相对而言,就算是不动的了(但其...

  • 行星等级之别

    一、行星 行星的形成条件:①不能进行核聚变(氢聚变)的天体,②围绕一颗恒星环绕,且有固定的椭圆轨道,③自身...

  • web前端入门到实战:纯CSS3实现旋转风车

    今天我们依然来做一个比较简单的CSS3动画—五彩风车随风旋转。这个动效和上一篇教程一样,仅使用CSS3完成。我们使...

  • 行星

    行星(外文名:Planet)。是指自身不发光且环绕着恒星运行的天体。其公转方向常与所绕恒星的自转方向相同...

  • 行星(一)

    行星被恒星吸引, 环绕了 数十亿载岁月, 终不得 更近分毫。 有些事, 再怎么坚持 也没用。

  • 音乐专辑展示动效--CSS3旋转

    这个案例介绍如何使用css3实现音乐专辑展示动效,效果如下: 第一步: 分析布局搭建结构,盒子内部有一个专辑封面图...

网友评论

      本文标题:css3模拟行星环绕恒星旋转的动效

      本文链接:https://www.haomeiwen.com/subject/rvtaxftx.html