css3+html5實現太陽系行星公轉動畫執行個體

類比太陽系行情公轉動畫最終的效果圖如下：

css3的animation是通過主要畫面格的形式做出來的，首先設定一個動畫的已耗用時間，然後在這個時間軸上的若干位置處插入主要畫面格，瀏覽器根據主要畫面格設定的內容做過渡動畫。animation一般結合transform屬性進行製作。以一個簡單的例子說明，以一個div，讓其從左至右運動，如下圖左所未(需要點下圖片播放)

先用css畫出靜態圖，然後再加動畫的屬性。整個工程完整的代碼見這個Demo。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度，也就是在這個區間向右移動的同時加上自轉的效果，所以給transform添加多一個rotate的屬性。

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

這樣就可以了：

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

接下來討論太陽系的製作，跟上面不同的地方是行星是圍繞著太陽轉的，而輪子是圍繞著自己的圓心轉的，也就是說他們轉的基點不同。可以看出，transform的基點預設是本身的中心center，所以我們要改變行星的進行轉換的中心點transform-origin。完整的Demo。太陽系的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為基準，其它按比例換算。這樣就可以做出一個太陽系公轉的圖，原理很簡單，效果卻很好。

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

上面的橢圓在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);　　}}