今天通過兩個簡單的載入動畫讓大家見識一下CSS與SVG結合的威力。
一、你需要準備什麼？
對於svg，可能一些剛接觸前端的同學比較的陌生。你可以先去MDN上看一下基本的介紹。本篇內容最重要的一個知識點就是stroke-dasharray和stroke-offset的組合使用。
這裡你可以先看一下張鑫旭對於stroke相關屬性的介紹
二、載入等待動畫
這個動畫大家應該很熟悉：
這個難度不是很大，本質上就是一個小圓弧在圓環上旋轉。
svg(viewBox="0 0 50 50")
circle(class="item" cx="25" cy="25" r="20" fill="none")
circle(class="item" cx="25" cy="25" r="20" fill="none")
複製程式碼對於圓環的設定我們採用stroke-dasharray來實現:
.item:nth-child(2) {
stroke: rgb(24,120,222);
stroke-width: 2px;
stroke-dasharray: 10, 300;
stroke-linecap: round;
}
複製程式碼接下來重點來了，我們需要通過transform讓圖形旋轉。一談到 transform不得不要注意transform-origin的設定。對於HTML中的元素，我們通過transform-origin的設定，很容易就解決了。但是SVG中的transform變化就沒這麼簡單，這裡有一篇很好文章作為參考張鑫旭SVG transform座標變換
這裡我就採用比較樸實的方法，旋轉SVG：
svg {
animation: zfbloading 1.4s linear infinite;
}
@keyframes zfbloading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
複製程式碼三、載入失敗動畫
接下來我們實現這樣的效果：
首先看一下它的結構：
svg(viewBox="0 0 100 100")
circle(cx="50" cy="50" r="40" fill="none")
path(class="line1" d="M30 30 L70 70" fill="none")
path(class="line2" d="M70 30 L30 70" fill="none")
複製程式碼首先對於外圈的動畫我們還是採用stroke-dasharray和stroke-dashoffset來實現。但是這裡你要完完全全的理解這兩個屬性的用法（好好看看上文提供的張鑫旭的文章），他通過一個火腿腸的例子很好的講解了這兩者的用法。
從動畫效果可以看出，小圓弧在旋轉的過程中長度由短邊長，由長變短，最後形成一個圓。
@keyframes loading {
0% {
stroke-dasharray: 0, 251;
stroke-dashoffset: 0;
}
35% {
stroke-dasharray: 86, 86;
stroke-dashoffset: -86;
}
70% {
stroke-dasharray: 0, 251;
stroke-dashoffset: -251;
}
100% {
stroke-dasharray: 251, 0;
stroke-dashoffset: -251;
}
}
複製程式碼對於上述CSS程式碼中的251，你可以通過JS中的getTotalLength方法獲取到。
對於叉號的動畫效果，我們仍然採用的是stroke-dasharray和stroke-dashoffset實現。到這裡你應該明白了這兩個屬性的重要性。再通過animation-delay設定動畫的銜接。
四、總結
顯然SVG的魅力不止於此，下次再見。
喜歡本文的小夥伴們,歡迎關注我的訂閱號超愛敲程式碼,檢視更多內容.
