最近在做的項目中有部分的svg需要做成動畫，最開始的想法是轉(zhuǎn)成gif，然后一看，啊，90M！??！實在不能忍，于是和設計妹紙一起研究起了svg動畫，發(fā)現(xiàn)這玩意兒還是很好玩的，怎么讓svg動起來，這是一個很有趣的話題。在目前的開發(fā)過程中，一共使用了三種方式，接下來就一一列舉一下吧。如果有更好的方式，歡迎補充一起討論

svg動畫（animate）

svg有相關(guān)的動畫SIML，可以直接使用，本來說已經(jīng)被棄用了，后面又被開發(fā)者們撿了起來（相關(guān)歷史也沒來得及去深入了解，在這里就先留個口子吧）
常用的元素包括<animate>, <animateMotion>, <animateTransform>

• <animate> 放置在形狀元素的內(nèi)部，用來定義元素某個屬性什么時候怎么改變，跟css中的animate功能十分相似，可以簡單理解為它的SIML形式
  這是一個svg的柱狀圖動畫，這個動畫的問題在于translateY的值需要手動去調(diào)整（原理是啥還沒研究明白，有知道的朋友可以相互討論一下）
  

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg" >
<rect width="300" height="300" fill="#000"/>
<g filter="url(#filter0_i_242_64122)" transform="scale(1,-1) translate(0,-515)">
<rect x="206" y="237" width="20" height="45" fill="green">
    <animate attributeName="height" from="0" to="45" dur="2s" repeatCount="indefinite" fill="freeze" />
    </rect>
</g>
<g filter="url(#filter1_i_242_64122)" transform="scale(1,-1) translate(0,-460)">
<rect x="86" y="182" width="20" height="100" fill="green">
    <animate attributeName="height" from="0" to="100" dur="2s" repeatCount="indefinite" fill="freeze" />
    </rect>
</g>
<g filter="url(#filter2_i_242_64122)" transform="scale(1,-1) translate(0,-485)">
<rect x="146" y="207" width="20" height="75" fill="green">
    <animate attributeName="height" from="0" to="75" dur="2s" repeatCount="indefinite" fill="freeze" />
    </rect>
</g>

• <animateMotion>定義了一個元素如何沿著運動路徑移動。svg有個很靈活的元素：<path>，在此就不繼續(xù)展開，我的理解是，只要參數(shù)設置的好，<path>就能生成任何你想要的圖形。如此靈活的元素在進行動畫操作時，需要進行一些特殊的操作
• <animateTransform>·變動了元素上的一個變形屬性，使動畫可以轉(zhuǎn)換，縮放，旋轉(zhuǎn)或斜切?？梢院唵卫斫鉃閏ss中transform，transition的SIML形式
  在使用這個屬性的時候需要注意，跟css的transform一樣，變形的順序不同可能會出現(xiàn)不一樣的結(jié)果，所以需要提前計算好變換的距離
  個人覺得這種形式比使用CSS動畫更加靈活，特別是用于<path>的動態(tài)處理，這是CSS動畫較難做到的，缺點是屬性比較多，會有一丟丟的學習成本（只有一丟丟）

CSS動畫

svg本身也是XML的形式，所以可以非常絲滑的使用CSS動畫，同樣的，在元素里加上class或者style就可以直接使用了，這里就不過多闡述

Lottie

設計師經(jīng)常使用AE進行動畫創(chuàng)作，然后輸出json格式的數(shù)據(jù)，使用Lottie可以十分順滑的將json數(shù)據(jù)轉(zhuǎn)化為動畫（web端配合lottie-web使用）。Lottie使用起來十分的絲滑，完全無懼，但缺點是lottie包有一定的體積，如果使用的是小動畫，如此大的體積有些劃不來，動畫多，或者有些動畫使用css難以達到類似效果時可以使用。
它的原理是使用lottie-web包，將json數(shù)據(jù)渲染為svg（所以打開控制臺，看到的對應元素是svg），這樣沒有意外的話能基本還原設計師的創(chuàng)作（畢竟直接用他們畫的動畫，??????）文章來源地址http://www.zghlxwxcb.cn/news/detail-626039.html

到了這里，關(guān)于svg動畫的幾種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！