接著上一篇svg實現載入動畫之後，這篇將帶你領略各種SVG動畫的實現姿勢。
一、animateTransform
animateTransform是一個SVG元素，主要實現目標元素變換屬性的動畫，例如平移、旋轉等。
對於animateTransform動畫引數的介紹應該沒什麼必要了，但是在使用animateTransform的時候，有一個特別特別需要注意的點：座標系。在SVG中圖形的變換中心預設為svg元素的左上角，所以這裡你需要適當的設定座標變換的中心。下面來看個例子：
svg(viewBox="0 0 1000 200")
circle(cx="500" cy="100" r="50" fill="rgb(73,0,204)")
g(class="track")
circle(cx="500" cy="100" r="50" fill="none" stroke="rgb(253,183,42)" stroke-width="4" stroke-linecap="round" stroke-dasharray="15.65")
animateTransform(attributeName="transform" type="rotate" from="360 500 100" to="0 500 100" dur="4s" repeatCount="indefinite")
path(d="M500 50 C472.4 50 450 72.4 450 100 L550 100 C550 72.4 527.6 50 500 50" fill="rgb(73,0,204)")
複製程式碼這裡我們主要採用animateTransform實現動畫效果，需要再次強調的：
- from中額外的兩個值就是用來設定座標變換中心的；
- 在svg中後宣告的圖形會覆蓋之前宣告的圖形，這裡我們採用這一特性，實現了一個看似3D的效果。
二、animateMotion
animateMotion同樣也是一個SVG元素，它主要實現：讓目標元素在路徑上運動。它與前面的區別就是要設定一個目標元素運動的path，來看個栗子：
svg(viewBox="0 0 1000 200" class="svg1")
circle(class="c1" cx="300" cy="100" r="10" fill="rgb(255,210,0)")
circle(class="c2" cx="400" cy="100" r="10" fill="rgb(255,210,0)")
circle(class="c3" cx="500" cy="100" r="10" fill="rgb(255,210,0)")
circle(class="c4" cx="600" cy="100" r="10" fill="rgb(255,210,0)")
circle(class="c5" cx="700" cy="100" r="10" fill="rgb(255,210,0)")
circle(class="c" cx="200" cy="50" r="10")
animateMotion(path="M0 0 L200 100 L400 0 L600 100 L300 25 L0 100 L0 0" dur="6s" repeatCount="indefinite")
複製程式碼這裡我採用了簡單的path路徑，如果要做複雜的效果，最好還是用AE什麼的匯出svg的path。手動寫太費勁了（不愧是大前端啊）。這個動畫效果的碰撞檢測寫的有點寒磣，我就不放出來。（-_-）
三、animate
animate當然也是一個SVG元素，主要實現單屬性的過渡效果，當然需要實現多個屬性的組合動畫，你可以宣告多個：
svg(viewBox="0 0 1000 200")
circle(class="some" cx="500" cy="100" r="50" stroke="rgb(73,0,204)" stroke-width="4" fill="none")
animate(attributeName="stroke-dashoffset" values="-313.66;0" dur="2s" repeatCount="indefinite")
animate(attributeName="stroke-dasharray" values="313.66 313.66;0 313.66" dur="2s" repeatCount="indefinite")
複製程式碼這個基本沒什麼要說的。老套路的stroke-dasharray和stroke-dashoffset。
四、總結
其實我們也可以採用CSS3來實現這裡的動畫效果。這篇文章講的基礎比較少，當然如果你已經對SVG產生了興趣，下面的參考資料對你應該有幫助：
參考資料 張鑫旭 理解SVG座標系統 張鑫旭 SVG動畫講解
喜歡本文的小夥伴們,歡迎關注我的訂閱號超愛敲程式碼,檢視更多內容.