使用css3的動畫模擬太陽系行星公轉(zhuǎn)！

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

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

css3的animation是通過關(guān)鍵幀的形式做出來的，首先設定一個動畫的運行時間，然后在這個時間軸上的若干位置處插入關(guān)鍵幀，瀏覽器根據(jù)關(guān)鍵幀設定的內(nèi)容做過渡動畫。animation常結(jié)合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，速度是勻速，播放次數(shù)無限。然后move的關(guān)鍵幀keyframes如下：

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

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

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

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

這樣就可以了：

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

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

完整的Demo（地址：http://codepen.io/yincheng/pen/LpjMzP）。太陽系的html結(jié)構(gòu)如下：

 <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為水星高度)，水星轉(zhuǎn)換的基點就變成了太陽的中心，在此基礎上進行旋轉(zhuǎn)：

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

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

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

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

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

效果圖如下：

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

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

<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的周期設置為旋轉(zhuǎn)的一半，同時使用了一個transition-direction為alternate的屬性，alternate意為交替，效果等同于

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

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

言

太陽、地球、月球應該是我們?nèi)巳硕急容^了解的天體，它們的運動軌跡是我們研究星系乃至宇宙的重要信息之一。那么我們?nèi)绾问褂肏TML + CSS來模擬這么一個效果呢？

運動軌跡。

簡單的來說就是轉(zhuǎn)圈。

// 定義軌跡
@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天，目的是為了彌補地球繞太陽的公轉(zhuǎn)周期與我們?nèi)諝v的定義周期之間的不匹配。

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

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

  /*動畫： 設定公轉(zhuǎn)時間以及軌跡 */
  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天左右。

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

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

  /*動畫： 設定公轉(zhuǎn)時間以及軌跡 */
  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結(jié)構(gòu) / 天體結(jié)構(gòu)

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

最終效果

t組件推薦：

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

文末附下載

Qt 3D：行星 QML 示例

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

演示結(jié)合 Qt 3D 渲染和 Qt Quick 2 元素。

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

行星紋理貼圖由 James Hastings-Trew 版權(quán)所有 (c) http://planetpixelemporium.com/planets.html經(jīng)許可使用。

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

運行示例

要從Qt Creator運行示例，請打開welcome模式并從Examples選擇示例。有關(guān)更多信息，請訪問構(gòu)建和運行示例。

Qt 快速二維實現(xiàn)

planets-qml/PlanetsMain.qml示例中的 Qt Quick Implementation使用Scene3D類型呈現(xiàn) 3D 內(nèi)容。

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

    SolarSystem { id: solarsystem }
}

行星相關(guān)信息存儲在一個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
}

相機位置和相機觀察點根據(jù) 中動畫的值更新planets-qml/SolarSystem.qml，由changePlanetFocus()函數(shù)觸發(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
}

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

onValueChanged: solarsystem.changeCameraDistance(value)

Qt 3D 實現(xiàn)

實現(xiàn)的主要部分，包括行星的運動和旋轉(zhuǎn)數(shù)學，在planets-qml/SolarSystem.qml.

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

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 ]
}

移動和旋轉(zhuǎn)計算等所需的行星數(shù)據(jù)是planets-qml/planets.js通過loadPlanetData()在組件完成時調(diào)用的JavaScript 來構(gòu)建的。其他初始化，例如將行星插入數(shù)組以便于處理，計算土星環(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)
}

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

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

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

    updateCamera(focusedPlanet)
}