CSS 並不簡單–例項帶你領略實現SVG動畫的姿勢

descire發表於2019-02-28

接著上一篇svg實現載入動畫之後,這篇將帶你領略各種SVG動畫的實現姿勢。

一、animateTransform

  animateTransform是一個SVG元素,主要實現目標元素變換屬性的動畫,例如平移、旋轉等。

  對於animateTransform動畫引數的介紹應該沒什麼必要了,但是在使用animateTransform的時候,有一個特別特別需要注意的點:座標系。在SVG中圖形的變換中心預設為svg元素的左上角,所以這裡你需要適當的設定座標變換的中心。下面來看個例子:

animateTransform星球軌跡動畫
    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,來看個栗子:

animateMotion實現的路徑動畫
    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元素,主要實現單屬性的過渡效果,當然需要實現多個屬性的組合動畫,你可以宣告多個:

animate圓環動畫
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動畫講解


  喜歡本文的小夥伴們,歡迎關注我的訂閱號超愛敲程式碼,檢視更多內容.

CSS 並不簡單–例項帶你領略實現SVG動畫的姿勢

相關文章