建站
咨詢
售后
建站咨詢
新聞中心
本文介紹使用css3的animation畫(huà)一個(gè)太陽(yáng)系恒星公轉(zhuǎn)的動(dòng)畫(huà)，再加以改進(jìn)，討論如何畫(huà)橢圓的運(yùn)行軌跡。然后分析京東和人人網(wǎng)使用animation的實(shí)際案例，***結(jié)合css3的clip-path做一些比較特別的動(dòng)畫(huà)。
太陽(yáng)系最終的效果圖如下：
css3的animation是通過(guò)關(guān)鍵幀的形式做出來(lái)的，首先設(shè)定一個(gè)動(dòng)畫(huà)的運(yùn)行時(shí)間，然后在這個(gè)時(shí)間軸上的若干位置處插入關(guān)鍵幀，瀏覽器根據(jù)關(guān)鍵幀設(shè)定的內(nèi)容做過(guò)渡動(dòng)畫(huà)。animation一般結(jié)合transform屬性進(jìn)行制作。以一個(gè)簡(jiǎn)單的例子說(shuō)明，以一個(gè)div，讓其從左到右運(yùn)動(dòng)，如下圖左所未(需要點(diǎn)下圖片播放)
先用css畫(huà)出靜態(tài)的圖，然后再加動(dòng)畫(huà)的屬性。整個(gè)工程完整的代碼見(jiàn)這個(gè)Demo。html如下：
在輪子wheel加一個(gè)動(dòng)畫(huà)的屬性，
.wheel{
animation: move 3s linear infinite;
}
這個(gè)的意思是動(dòng)畫(huà)的名字是move，時(shí)間軸是3s，速度是勻速，播放次數(shù)***。然后move的關(guān)鍵幀keyframes如下：
@keyframes move{
100%{
transform: translateX(350px);
}
}即播放到末尾的時(shí)候，向X軸右移350px。在0%的時(shí)候值0，100%的時(shí)候值為350px，時(shí)間為3s，還有一個(gè)速度曲線的屬性，根據(jù)這些信息做過(guò)渡動(dòng)畫(huà)。如果指定速度為線性linear，則動(dòng)畫(huà)的過(guò)渡效果是勻速的，對(duì)于上面來(lái)說(shuō)就是勻速右移。默認(rèn)的速度曲線為ease，就是漸進(jìn)和漸出，中間播放比較快。
然后再給輪子添加一個(gè)滾動(dòng)的效果rotate，用運(yùn)行的距離除以輪子的周長(zhǎng)得出需要滾動(dòng)多少圈，即375 / (25 * 3.1415926 * 2) * 360 = 859.4度，也就是在這個(gè)區(qū)間向右移動(dòng)的同時(shí)加上自轉(zhuǎn)的效果，所以給transform添加多一個(gè)rotate的屬性。
transform: translateX(350px) rotate(859.4deg);
這樣就可以了：
這就是css3的animation動(dòng)畫(huà)，結(jié)合transform的大小、旋轉(zhuǎn)、位移、斜切，通過(guò)兩三行代碼，便可做出很多有趣的效果。
接下來(lái)討論太陽(yáng)系的制作，跟上面不同的地方是行星是圍繞著太陽(yáng)轉(zhuǎn)的，而輪子是圍繞著自己的圓心轉(zhuǎn)的，也就是說(shuō)他們轉(zhuǎn)的基點(diǎn)不同?？梢钥闯?，transform的基點(diǎn)默認(rèn)是本身的中心center，所以我們要改變行星的進(jìn)行轉(zhuǎn)換的中心點(diǎn)transform-origin。完整的Demo。太陽(yáng)系的html結(jié)構(gòu)如下：
太陽(yáng)位于div galaxy的中間，讓其它行星位于太陽(yáng)的右邊排成一條線。設(shè)置galaxy的width和height都為1300px。sun圖片的大小為100px*100px，所以sun的left值和top值都為(1300 - 100) / 2 = 600px，這樣sun就位于中間位置。設(shè)置水星mercury的left值為700px，top為625px，這樣水星就位于太陽(yáng)偏右的位置。然后再設(shè)置transform-origin:
transform-origin: -50px 25px;
transform-origin的原點(diǎn)是作用的元素左上角位置，所以往左移（700 - 1300 / 2) = 50px，往下移60 / 2 = 30px(60為水星高度)，水星轉(zhuǎn)換的基點(diǎn)就變成了太陽(yáng)的中心，在此基礎(chǔ)上進(jìn)行旋轉(zhuǎn)：
[[151930]]
animation: rotation 2.4s linear infinite;
@keyframes rotation{
to{
transform: rotate(1turn);
}
}[[151930]]
注意這里改變了同義的屬性，0%和100%分別換成from和to，360deg換成1turn。
其它的行星，也按照這種方法進(jìn)行設(shè)置，計(jì)算稍微繁瑣。公轉(zhuǎn)的周期以地球10s為基準(zhǔn)，其它按比例換算。這樣就可以做出一個(gè)太陽(yáng)系公轉(zhuǎn)的圖，原理很簡(jiǎn)單，效果卻很好。
注意到行星運(yùn)行的軌跡其實(shí)是橢圓形的，上面是用了正圓形。因此，下面討論如何做一個(gè)橢圓的運(yùn)行軌跡。查看完整的Demo。效果圖如下：
上面的橢圓在Y軸上被壓扁了，可以考慮在Y軸上添加一個(gè)位移變換，原理如下圖所示，首先將地球的初始位置放到橢圓和其短軸的交點(diǎn)處，然后transform-origin設(shè)置為半徑為800px的圓心的位置，但運(yùn)行時(shí)間為50%即到初始位置對(duì)面的時(shí)候，插入一個(gè)關(guān)鍵幀：做一個(gè)位移轉(zhuǎn)換，向y軸負(fù)方向移動(dòng)200px，這樣就可以形成一個(gè)半橢圓的軌跡，到了100%的時(shí)候逐漸恢復(fù)為初始值0，跟前面的半橢圓相反，就可以完成一個(gè)完整的橢圓軌跡。
需要在earth的外面包一層div，用來(lái)設(shè)置translateY的效果，因?yàn)檫@個(gè)效果的時(shí)間曲線需要設(shè)置為ease-in-out漸進(jìn)漸出的效果，讓橢圓運(yùn)行起來(lái)更加的順暢，如果不設(shè)置的話渲染出來(lái)的動(dòng)畫(huà)會(huì)不太像橢圓軌跡。html的結(jié)構(gòu)如下：
[[151930]]
[[151930]]
給moveY添加一個(gè)translateY的動(dòng)畫(huà)，其它的一樣。
[[151930]]
.moveY{
animation: moveY 2s ease-in-out infinite alternate;
}
@keyframes moveY{
to{
transform: translateY(-200px);
}
}[[151930]]
注意這里將moveY的周期設(shè)置為旋轉(zhuǎn)的一半，同時(shí)使用了一個(gè)transition-direction為alternate的屬性，alternate意為交替，效果等同于
[[151930]]
@keyframes moveY{
0%，100%{
transform: translateY(0px);
}
50%{
transform: translateY(-200px);
}
}[[151930]]
?。ㄎ赐甏m(xù)。）
當(dāng)前標(biāo)題：使用css3的動(dòng)畫(huà)模擬太陽(yáng)系恒星公轉(zhuǎn)
路徑分享：http://www.dlmjj.cn/article/cciehcg.html
