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