效果圖
效果圖
主要使用 svg 進(jìn)行繪制，簡(jiǎn)單但又酷炫的小動(dòng)畫(huà)。
實(shí)現(xiàn)思路
1. 分析畫(huà)面元素，拆分：地球(earth)、衛(wèi)星(sat-Satellite)、軌道(orbit)。
2. 繪制地球，使用 circle
3. 繪制軌道，使用 ellipse
4. 繪制衛(wèi)星并添加運(yùn)動(dòng)動(dòng)畫(huà)
構(gòu)建各元素標(biāo)簽
繪制地球
最簡(jiǎn)單的一個(gè)部件，只需要畫(huà)一個(gè)居中空心圓即可：
繪制軌道
stroke-dasharray：用于設(shè)定虛線?？稍O(shè)置 n 個(gè)值，然后把這 n 個(gè)值重復(fù)，每個(gè)值依次代表 線段長(zhǎng)度、空隙長(zhǎng)度、線段長(zhǎng)度、空隙長(zhǎng)度...
stroke-dashoffset: 用于設(shè)定虛線的偏移量。
繪制衛(wèi)星并添加運(yùn)動(dòng)動(dòng)畫(huà)
由于沿軌道的曲線運(yùn)動(dòng)較為復(fù)雜，這里可以讓衛(wèi)星沿軌道長(zhǎng)軸往復(fù)運(yùn)動(dòng)，形成沿軌道運(yùn)動(dòng)的假象。
解決最后的瑕疵，使衛(wèi)星被地球遮擋
由于衛(wèi)星的圖層始終處于地球前面，看起來(lái)不像是繞球旋轉(zhuǎn)，
這里的解決方案是復(fù)制另一個(gè)衛(wèi)星，放到地球的圖層后面，然后一前一后兩顆衛(wèi)星同步運(yùn)動(dòng)。
當(dāng)然光這樣還不夠，我們不能讓前面那顆衛(wèi)星一直反復(fù)略過(guò)地球表面。
它應(yīng)該是飛過(guò)一次，然后隱藏起來(lái)回到原位，再顯形飛過(guò)去。為此我們?yōu)樗砑有碌膭?dòng)畫(huà)：
我們就能得到下面的效果：
這時(shí)我們只需要補(bǔ)上另一顆衛(wèi)星，讓它一直在地球背面來(lái)回運(yùn)動(dòng)，即可偽裝成衛(wèi)星環(huán)繞地球的效果：
順帶一提，z-index 屬性在 svg 里是沒(méi)有用的，svg 中的圖層遵循 畫(huà)布原則。
約往后的標(biāo)簽，畫(huà)面上的層級(jí)約高。
最后就能得到我們想要的環(huán)繞效果。
總結(jié)
簡(jiǎn)單好看的小動(dòng)畫(huà)。能學(xué)習(xí)到 stroke-dasharray 和 stroke-dashoffset 屬性的使用。 加深對(duì) svg 圖層、animation 屬性的理解。
暫無(wú)評(píng)論，快來(lái)評(píng)論吧!