最近在做的项目中有部分的svg需要做成动画，最开始的想法是转成gif，然后一看，啊，90M！！！实在不能忍，于是和设计妹纸一起研究起了svg动画，发现这玩意儿还是很好玩的，怎么让svg动起来，这是一个很有趣的话题。在目前的开发过程中，一共使用了三种方式，接下来就一一列举一下吧。如果有更好的方式，欢迎补充一起讨论
svg动画（animate）
svg有相关的动画SIML，可以直接使用，本来说已经被弃用了，后面又被开发者们捡了起来（相关历史也没来得及去深入了解，在这里就先留个口子吧）
常用的元素包括<animate>, <animateMotion>, <animateTransform>
-
<animate>放置在形状元素的内部，用来定义元素某个属性什么时候怎么改变，跟css中的animate功能十分相似，可以简单理解为它的SIML形式
这是一个svg的柱状图动画，这个动画的问题在于translateY的值需要手动去调整（原理是啥还没研究明白，有知道的朋友可以相互讨论一下）
<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>，在此就不继续展开，我的理解是，只要参数设置的好，<path>就能生成任何你想要的图形。如此灵活的元素在进行动画操作时，需要进行一些特殊的操作 -
<animateTransform>·变动了元素上的一个变形属性，使动画可以转换，缩放，旋转或斜切。可以简单理解为css中transform，transition的SIML形式
在使用这个属性的时候需要注意，跟css的transform一样，变形的顺序不同可能会出现不一样的结果，所以需要提前计算好变换的距离
个人觉得这种形式比使用CSS动画更加灵活，特别是用于<path>的动态处理，这是CSS动画较难做到的，缺点是属性比较多，会有一丢丢的学习成本（只有一丢丢）
CSS动画
svg本身也是XML的形式，所以可以非常丝滑的使用CSS动画，同样的，在元素里加上class或者style就可以直接使用了，这里就不过多阐述文章来源：https://www.toymoban.com/news/detail-626039.html
Lottie
设计师经常使用AE进行动画创作，然后输出json格式的数据，使用Lottie可以十分顺滑的将json数据转化为动画（web端配合lottie-web使用）。Lottie使用起来十分的丝滑，完全无惧，但缺点是lottie包有一定的体积，如果使用的是小动画，如此大的体积有些划不来，动画多，或者有些动画使用css难以达到类似效果时可以使用。
它的原理是使用lottie-web包，将json数据渲染为svg（所以打开控制台，看到的对应元素是svg），这样没有意外的话能基本还原设计师的创作（毕竟直接用他们画的动画，😁😁😁）文章来源地址https://www.toymoban.com/news/detail-626039.html
到了这里，关于svg动画的几种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
