前言
最近在做的项目里用到了svg动画，同时加深了对前端目前主流与可能会成为趋势的其他几种动画实现方式的了解，以此文记录。
Canvas
<canvas> - HTML（超文本标记语言） | MDN (mozilla.org)
动画的复杂性较高时通常选用的绘制方式，不过似乎在WebGL兴起后更多时候是作为浏览器不支持情况的下位替代来使用了，具体在我之前的粒子效果博文中有介绍。
WebGL
WebGL - Web API 接口参考 | MDN (mozilla.org)
Web Graphics Library，Web图形库，是一个**JavaScript API。**目前在浏览器端，大部分与3d有关的展示，底层使用的都是WebGL标准。
SVG
SVG全称Scalable Vector Graphics，可缩放矢量图形。SVG动画是基于矢量图形的动画，可以轻松地实现形状、颜色、位置、大小等的动画效果。
我个人认为比较好的一点是，由于基于svg是一个标签，能够通过css与js来操作它的fill、stroke等属性，能够使得svg做到许多丝滑的交互效果，这也是我选用svg的主要原因。svg配合GSAP等动画库来使用也是比较简单上手的方式。
SVG动画与GIF动画对比
SVG动画可以被CSS和JavaScript控制，支持交互性和响应式设计，而GIF动画无法被CSS和JavaScript控制，不能实现交互性和响应式设计。SVG动画使用的是矢量图形，可以进行缩放而不失真，而GIF动画使用的是像素图形，放大后会出现马赛克等问题.SVG动画大小较小，可以大幅减小页面加载时间和带宽压力，而GIF动画文件较大，会增加页面加载时间和带宽压力.总体来说，SVG动画适用于需要交互性和响应式设计、需要轻量且可缩放的动画效果，而GIF动画适用于制作简单动画、不需要交互性和响应式设计、不需要缩放的场景。
SVG动画与Canvas动画对比
SVG动画使用的是矢量图形，可以进行缩放而不失真，而Canvas动画使用的是像素图形，放大后会出现马赛克等问题SVG动画更加适合展示静态矢量图形，而Canvas动画更适合展示动态像素图形。SVG动画的性能较好，而Canvas动画的性能较差，因为Canvas动画需要重新渲染整个画布总体来说，SVG动画适用于需要展示矢量图形、不需要复杂动画效果的场景，而Canvas动画适用于需要展示动态像素图形、需要复杂动画效果的场器。
gif被压了 实际演示不会卡卡的
Lottie
当时在学AE的时候就有所耳闻的一个动画库，比起gif有着色彩更还原、不易失真、可控性更强等众多优点。如果有设计师的话我比较倾向于使用的方式作为前端省心省力。
Three.js
去年做邀请函的时候使用的3d动画库，基于原生WebGL封装，我是结合了Tween.js来实现的动画。