基本概念
位图
位图图像（bitmap）亦称为点阵图像，或栅格图像，是由像素组成的。这些点通过不同的排列和染色来构成图像。例子：用数码相机拍摄的照片，扫描仪扫描的图片、截屏，等。位图可以表现色彩的变化和颜色的细微过渡，产生逼真的效果，保存时需要记录每一个像素的位置和颜色值，占用较大的存储空间。图像的质量取决于分辨率的高低。
矢量图
矢量图（Vector）亦称为面向对象的图像，或绘图图像，在数学上定义为一系列由线连接的点。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小、屏幕位置等属性。矢量图的优点是无限放大缩小不变形，缺点是较难表现色彩层次丰富的逼真图像效果。
制作动画的方式
PNG序列帧
用css keyframes操作每一帧需要展示的图片，由于每一帧都是一幅图，所以占用内存空间比较大。优化方式可以将图片合并成精灵图（Sprites Map），这样还可以使用腾讯AlloyTeam的GKA（Generate Keyframes Animation）帧动画生成工具，来生成动画。
Gif图
Gif（Graphics Interchange Format）是一种通用的图像文件格式标准，是在1987年由Compu Serve公司为了填补跨平台图像格式的空白而发展起来的。Gif图也是一种位图，放大会变虚。
前端Svg API
矢量图 svg是基于XML的，是 W3C（World Wide Web ConSortium 国际互联网标准组织）在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。
Lottie
前端直接引用lottie-web库即可，它默认的渲染方式是svg，原理就是用JS操作Svg API。但是前端完全不需要关心动画的过程，Json文件里有每一帧动画的信息，而库会帮我们执行每一帧。
