使用css3的動畫模擬太陽系行星公轉！

天小編給大家介紹使用css3的animation畫一個太陽系行星公轉的動畫，再加以改進，討論如何畫橢圓的運行軌跡。然后分析京東和人人網使用animation的實際案例，最后結合css3的clip-path做一些比較特別的動畫。

太陽系最終的效果圖如下：

css3的animation是通過關鍵幀的形式做出來的，首先設定一個動畫的運行時間，然后在這個時間軸上的若干位置處插入關鍵幀，瀏覽器根據關鍵幀設定的內容做過渡動畫。animation常結合transform屬性進行制作。以一個簡單的例子說明，以一個div，讓其從左到右運動，如下圖左所未(沒有動畫請刷新下頁面)

先用css畫出靜態(tài)的圖，然后再加動畫的屬性。

整個工程完整的代碼見這個Demo（

地址：http://codepen.io/yincheng/pen/PPKxYV）。

html如下：

<div class='space'>
 <div class='wheel'>
 <span class='line'></span>
 </div></div>

在輪子wheel加一個動畫的屬性，

.wheel{
　　animation: move 3s linear infinite;
}

這個的意思是動畫的名字是move，時間軸是3s，速度是勻速，播放次數無限。然后move的關鍵幀keyframes如下：

@keyframes move{
 100%{
 transform: translateX(350px);
 }
 }

即播放到末尾的時候，向X軸右移350px。在0%的時候值0，100%的時候值為350px，時間為3s，還有一個速度曲線的屬性，根據這些信息做過渡動畫。如果指定速度為線性linear，則動畫的過渡效果是勻速的，對于上面來說就是勻速右移。默認的速度曲線為ease，就是漸進和漸出，中間播放比較快。

然后再給輪子添加一個滾動的效果rotate，用運行的距離除以輪子的周長得出需要滾動多少圈，即375 / (25 * 3.1415926 * 2) * 360=859.4度，也就是在這個區(qū)間向右移動的同時加上自轉的效果，所以給transform添加多一個rotate的屬性。

transform: translateX(350px) rotate(859.4deg);

這樣就可以了：

這就是css3的animation動畫，結合transform的大小、旋轉、位移、斜切，通過兩三行代碼，便可做出很多有趣的效果。

接下來討論太陽系的制作，跟上面不同的地方是行星是圍繞著太陽轉的，而輪子是圍繞著自己的圓心轉的，也就是說他們轉的基點不同。可以看出，transform的基點默認是本身的中心center，所以我們要改變行星的進行轉換的中心點transform-origin。

完整的Demo（地址：http://codepen.io/yincheng/pen/LpjMzP）。太陽系的html結構如下：

 <div class="galaxy">
 <div class='sun'></div>
 <div class='mercury'></div>
 <div class='venus'></div>
 <div class='earth'></div>
 </div>

太陽位于div galaxy的中間，讓其它行星位于太陽的右邊排成一條線。設置galaxy的width和height都為1300px。sun圖片的大小為100px*100px，所以sun的left值和top值都為(1300 - 100) / 2=600px，這樣sun就位于中間位置。設置水星mercury的left值為700px，top為625px，這樣水星就位于太陽偏右的位置。然后再設置transform-origin:

transform-origin: -50px 25px;

transform-origin的原點是作用的元素左上角位置，所以往左移（700 - 1300 / 2)=50px，往下移60 / 2=30px(60為水星高度)，水星轉換的基點就變成了太陽的中心，在此基礎上進行旋轉：

animation: rotation 2.4s linear infinite;
@keyframes rotation{
 to{
 transform: rotate(1turn);
 }}

注意這里改變了同義的屬性，0%和100%分別換成from和to，360deg換成1turn。

其它的行星，也按照這種方法進行設置，計算稍微繁瑣。公轉的周期以地球10s為基準，其它按比例換算。這樣就可以做出一個太陽系公轉的圖，原理很簡單，效果卻很好。

注意到行星運行的軌跡其實是橢圓形的，上面是用了正圓形。因此，下面討論如何做一個橢圓的運行軌跡。

查看完整的Demo（地址：http://codepen.io/yincheng/pen/QjMzZr）。

效果圖如下：

上面的橢圓在Y軸上被壓扁了，可以考慮在Y軸上添加一個位移變換，原理如下圖所示，首先將地球的初始位置放到橢圓和其短軸的交點處，然后transform-origin設置為半徑為800px的圓心的位置，但運行時間為50%即到初始位置對面的時候，插入一個關鍵幀：做一個位移轉換，向y軸負方向移動200px，這樣就可以形成一個半橢圓的軌跡，到了100%的時候逐漸恢復為初始值0，跟前面的半橢圓相反，就可以完成一個完整的橢圓軌跡。

需要在earth的外面包一層div，用來設置translateY的效果，因為這個效果的時間曲線需要設置為ease-in-out漸進漸出的效果，讓橢圓運行起來更加的順暢。html的結構如下：

<div class='planet'>
 <div class='origin-circle'></div>
 <div class='sun'></div>
 <div class='track'></div>
 <div class='moveY'>
 <div class='earth'></div>
 </div>
</div>

給moveY添加一個translateY的動畫，其它的一樣。

.moveY{　　animation: moveY 2s ease-in-out infinite alternate; /* */
}
@keyframes moveY{
　　to{
　　　　transform: translateY(-200px);
　　}
}

注意這里將moveY的周期設置為旋轉的一半，同時使用了一個transition-direction為alternate的屬性，alternate意為交替，效果等同于

@keyframes moveY{
 0%，100%{
 transform: translateY(0px);
 }　　50%{　　　　transform: translateY(-200px);
　　}}

細心的讀者會發(fā)現，這里的運行軌跡并不是嚴格的橢圓，旋轉是勻速的，但是在y軸上的投影即在y軸上的速度是一條曲線，這條曲線理論上可以用貝賽爾曲線模擬出來，animation的速度參數改用cubic-bezier去模擬，ease-in-out等同于cubic-bezier(0.4,0,0.6,1)。通過一些數學換算理論上是可以模擬的，這里不再深入討論。今天就講到這里了哦！

言

太陽、地球、月球應該是我們人人都比較了解的天體，它們的運動軌跡是我們研究星系乃至宇宙的重要信息之一。那么我們如何使用HTML + CSS來模擬這么一個效果呢？

運動軌跡。

簡單的來說就是轉圈。

// 定義軌跡
@keyframes rotate {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}

定義太陽

/* 定義一個太陽 */
.sum {
  position: relative;
  margin: 100px auto 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    #ff9b9b 0%,
    rgba(235, 36, 64, 0) 70%
    );
}

定義地球

地球繞太陽一圈的時間是365.24天左右，這被稱為一年。每年有一個額外的日子被稱為閏年，這一年會有366天，目的是為了彌補地球繞太陽的公轉周期與我們日歷的定義周期之間的不匹配。

/* 定義地球位置及公轉信息 */
.earth {
  position: absolute;

  /* 定義地球與太陽的相對位置以及軌道線 */
  width: 300px;
  height: 300px;
  margin-left:-50px;
  margin-top:-50px;
  border:1px solid #dddddd;
  border-radius:50%;

  /*動畫： 設定公轉時間以及軌跡 */
  animation: rotate 36.524s infinite linear;
}
/* 地球本體 */
.earth::before{
  content: ' ';
  position:absolute;
  background-color: blue;
  width: 30px;
  height: 30px;
  margin-left:70px;
  border-radius: 30px;
}

定義月球

月球繞地球一圈的時間大約是27.32天。這被稱為一個月（也稱為地月周期）。月亮的運動軌跡略呈橢圓形，因此月球與地球的距離會隨時間而變化，這也導致月球的運動速度略有不同，有時會更快，有時會更慢，但平均值仍然是27.32天左右。

/* 定義月球位置及公轉信息 */
.moon {
  position: absolute;

  /* 定義月球與地球的相對位置以及軌道線 */
  width: 60px;
  height: 60px;
  margin-left:55px;
  margin-top:-15px;
  border:1px solid #dddddd;
  border-radius:50%;

  /*動畫： 設定公轉時間以及軌跡 */
  animation: rotate 2.732s infinite linear;
}

/* 月球本體 */
.moon::before{
  content: ' ';
  position:absolute;
  background-color: blue;
  width: 10px;
  height: 10px;
  margin-left:7px;
  border-radius: 10px;
}

html結構 / 天體結構

<div class="sum">
  <div class="earth">
      <div class="moon"></div>
  </div>
</div>

最終效果

t組件推薦：

QtitanRibbon: 遵循Microsoft Ribbon UI Paradigm for Qt技術的Ribbon UI組件，致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
QtitanChart:是一個C ++庫，代表一組控件，這些控件使您可以快速地為應用程序提供漂亮而豐富的圖表。并且支持所有主要的桌面

文末附下載

Qt 3D：行星 QML 示例

Qt官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網

演示結合 Qt 3D 渲染和 Qt Quick 2 元素。

本文演示了如何實現將 Qt 3D 渲染與 Qt Quick 2D 元素結合使用的應用程序。該示例顯示了太陽系的八顆行星與太陽。

行星在給定時間根據它們的軌道圍繞太陽旋轉。輪換從 2000 Jan 0.0 UT 開始。行星位置是根據此處找到的公式計算的：http : //www.stjarnhimlen.se/comp/ppcomp.html和http://www.davidcolarusso.com/astro/。

運行示例

要從Qt Creator運行示例，請打開welcome模式并從Examples選擇示例。有關更多信息，請訪問構建和運行示例。

Qt 快速二維實現

planets-qml/PlanetsMain.qml示例中的 Qt Quick Implementation使用Scene3D類型呈現 3D 內容。

Scene3D {
    anchors.fill: parent
    aspects: ["render", "logic", "input"]

    SolarSystem { id: solarsystem }
}

行星相關信息存儲在一個ListModel. 行星的選擇按鈕和信息表是基于模型創(chuàng)建的。2D 元素、選擇按鈕和滑塊在planets-qml/PlanetsMain.qml.

選擇按鈕會更改的focusedPlanet屬性mainview。隨著屬性的變化，行星信息會更新，并且相機會動畫到新的位置。

onFocusedPlanetChanged: {
    if (focusedPlanet==100) {
        info.opacity=0
        updatePlanetInfo()
    } else {
        updatePlanetInfo()
        info.opacity=1
    }

    solarsystem.changePlanetFocus(oldPlanet, focusedPlanet)
    oldPlanet=focusedPlanet
}

相機位置和相機觀察點根據中動畫的值更新planets-qml/SolarSystem.qml，由changePlanetFocus()函數觸發(fā)。

QQ2.NumberAnimation {
    id: lookAtOffsetAnimation
    target: sceneRoot
    properties: "xLookAtOffset, yLookAtOffset, zLookAtOffset"
    to: 0
    easing.type: Easing.InOutQuint
    duration: 1250
}

QQ2.NumberAnimation {
    id: cameraOffsetAnimation
    target: sceneRoot
    properties: "xCameraOffset, yCameraOffset, zCameraOffset"
    to: 0
    easing.type: Easing.InOutQuint
    duration: 2500
}

滑塊用于調整旋轉速度、行星大小和觀看距離。當滑塊值發(fā)生變化時，planets-qml/SolarSystem.qml會調用一個 JavaScript 函數來調整給定的屬性。例如，更改觀看距離滑塊的值會調用該changeCameraDistance()方法。

onValueChanged: solarsystem.changeCameraDistance(value)

Qt 3D 實現

實現的主要部分，包括行星的運動和旋轉數學，在planets-qml/SolarSystem.qml.

首先，添加 a Camera、 aLight和 a Configuration，然后是Effects 代表行星Materials，最后是行星本身。例如，地球的構造如下：

Entity {
    id: earthEntity

    Planet {
        id: earth
        tilt: planetData[Planets.EARTH].tilt
    }

    PlanetMaterial {
        id: materialEarth
        effect: effectDSB
        ambientLight: ambientStrengthPlanet
        diffuseMap: "qrc:/images/solarsystemscope/earthmap2k.jpg"
        specularMap: "qrc:/images/solarsystemscope/earthspec2k.jpg"
        normalMap: "qrc:/images/solarsystemscope/earthnormal2k.jpg"
        shininess: shininessSpecularMap
    }

    property Transform transformEarth: Transform {
        matrix: {
            var m=Qt.matrix4x4()
            m.translate(Qt.vector3d(earth.x, earth.y, earth.z))
            m.rotate(earth.tilt, tiltAxis)
            m.rotate(earth.roll, rollAxis)
            m.scale(earth.r)
            return m
        }
    }

    components: [ earth, materialEarth, transformEarth ]
}

移動和旋轉計算等所需的行星數據是planets-qml/planets.js通過loadPlanetData()在組件完成時調用的JavaScript 來構建的。其他初始化，例如將行星插入數組以便于處理，計算土星環(huán)和天王星環(huán)的環(huán)半徑，以及設置默認比例、速度和相機偏移，也已完成：

QQ2.Component.onCompleted: {
    planetData=Planets.loadPlanetData()
    // Push in the correct order
    planets.push(sun)
    planets.push(mercury)
    planets.push(venus)
    planets.push(earth)
    planets.push(mars)
    planets.push(jupiter)
    planets.push(saturn)
    planets.push(uranus)
    planets.push(neptune)
    planets.push(moon)
    // TODO: Once support for creating meshes from arrays is implemented take these into use
    //saturnRing.makeRing()
    //uranusRing.makeRing()
    saturnRingOuterRadius=planetData[Planets.SATURN].radius + Planets.saturnOuterRadius
    saturnRingInnerRadius=planetData[Planets.SATURN].radius + 0.006630
    uranusRingOuterRadius=planetData[Planets.URANUS].radius + Planets.uranusOuterRadius
    uranusRingInnerRadius=planetData[Planets.URANUS].radius + 0.002
    ready=true
    changeScale(1200)
    changeSpeed(0.2)
    setLookAtOffset(Planets.SUN)
}

場景通過調用該animate()函數進行動畫處理。這也是時間提前的地方，計算所有行星的新位置。行星positionPlanet()根據它們的軸向傾斜和它們的恒星自轉周期在函數中旋轉。最后，在updateCamera()函數中計算新的相機位置。

function animate(focusedPlanet) {
    if (!ready)
        return

    advanceTime(focusedPlanet)
    for (var i=0; i <=Planets.NUM_SELECTABLE_PLANETS; i++)
        positionPlanet(i)

    updateCamera(focusedPlanet)
}