CSS 並不簡單--實例帶你領略實現SVG動畫的姿式

接着上一篇svg實現加載動畫以後，這篇將帶你領略各類SVG動畫的實現姿式。

1、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的效果。

2、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。手動寫太費勁了（不愧是大前端啊）。這個動畫效果的碰撞檢測寫的有點寒磣，我就不放出來。（-_-）

3、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。

4、總結

  其實咱們也能夠採用CSS3來實現這裏的動畫效果。這篇文章講的基礎比較少，固然若是你已經對SVG產生了興趣，下面的參考資料對你應該有幫助：

參考資料 張鑫旭 理解SVG座標系統 張鑫旭 SVG動畫講解

---

  喜歡本文的小夥伴們,歡迎關注個人訂閱號超愛敲代碼,查看更多內容.