svg动画的几种方式

最近在做的项目中有部分的svg需要做成动画，最开始的想法是转成gif，然后一看，啊，90M！！！实在不能忍，于是和设计妹纸一起研究起了svg动画，发现这玩意儿还是很好玩的，怎么让svg动起来，这是一个很有趣的话题。在目前的开发过程中，一共使用了三种方式，接下来就一一列举一下吧。如果有更好的方式，欢迎补充一起讨论

svg动画（animate）

svg有相关的动画SIML，可以直接使用，本来说已经被弃用了，后面又被开发者们捡了起来（相关历史也没来得及去深入了解，在这里就先留个口子吧）
常用的元素包括

<animate>, <animateMotion>, <animateTransform>

• <animate> 放置在形状元素的内部，用来定义元素某个属性什么时候怎么改变，跟css中的animate功能十分相似，可以简单理解为它的SIML形式 这是一个svg的柱状图动画，这个动画的问题在于translateY的值需要手动去调整（原理是啥还没研究明白，有知道的朋友可以相互讨论一下）

<svgwidth="300"height="300"viewBox="0 0 300 300"fill="none"xmlns="http://www.w3.org/2000/svg"><rectwidth="300"height="300"fill="#000"/><gfilter="url(#filter0_i_242_64122)"transform="scale(1,-1) translate(0,-515)"><rectx="206"y="237"width="20"height="45"fill="green"><animateattributeName="height"from="0"to="45"dur="2s"repeatCount="indefinite"fill="freeze"/></rect></g><gfilter="url(#filter1_i_242_64122)"transform="scale(1,-1) translate(0,-460)"><rectx="86"y="182"width="20"height="100"fill="green"><animateattributeName="height"from="0"to="100"dur="2s"repeatCount="indefinite"fill="freeze"/></rect></g><gfilter="url(#filter2_i_242_64122)"transform="scale(1,-1) translate(0,-485)"><rectx="146"y="207"width="20"height="75"fill="green"><animateattributeName="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就可以直接使用了，这里就不过多阐述

Lottie

设计师经常使用AE进行动画创作，然后输出json格式的数据，使用Lottie可以十分顺滑的将json数据转化为动画（web端配合lottie-web使用）。Lottie使用起来十分的丝滑，完全无惧，但缺点是lottie包有一定的体积，如果使用的是小动画，如此大的体积有些划不来，动画多，或者有些动画使用css难以达到类似效果时可以使用。
它的原理是使用lottie-web包，将json数据渲染为svg（所以打开控制台，看到的对应元素是svg），这样没有意外的话能基本还原设计师的创作（毕竟直接用他们画的动画，😁😁😁）