初探 lottie

初探 lottie

秋有话说

作为一名 H5 前端程序员，在一些包含动画的项目中，设计师总是要来问一下你"这个动画是要导出序列帧还是 GIF"，“导出 GIF 可能会有白边”，"不能再压缩，再压就糊了“……

使用序列帧的方式做动画

在之前的一些项目中，动画一般都是让设计师导出序列帧，然后在前端通过 css 来实现动画，但是你知道的，序列帧文件比较大，而且我是自己把这些序列帧在 ps 上做成 sprite 的，无疑又增加了自己的工作量，如果使用 TexturePacker 自动生成 sprite，但是序列帧是没有按顺序排放的，TexturePacker 为了充分利用图片空间，有些帧还会旋转,这样就无法使用 css 的 steps 直接做序列帧动画。再者，对于一些有用户的交互的序列帧，操作起来更加麻烦，序列帧在某些机型上还会出现跳帧的情况。

使用 GIF 做动画

使用 GIF 做动画，有着相同的一些问题，文件大，不可控，GIF 会一致循环播放，无法做到单次播放，更不用说用户交互了，有些 GIF 还会有白边，显示效果差。

使用 svg 做动画

在前端自己用 svg 做动画的方式只试过一次，设计师先在 AE 上导出 svg 的路径坐标，svg 的坐标是根据设计画的顺序生成的，这就导致在一些路径动画中，维持成本相当大，而且前端直接使用 svg 做的一些动画本身实现的成本也比较高。

总的来说，以上的三种方法，都有这着各自的或多或少的一些缺点。

初探 lottie

最近在 GitHub 上发现了 airbnb 一个开源项目 lottie-web，试了一下，这个库可以很方便地对动画进行操作，直接在 AE 上导出 json 文件操作。但是还是发现了一个问题，对于一些把一些图片导入 AE 做成的动画，在 AE 上导出 json 文件时同时还有导出一个 images 文件夹，里面存放了一些动画中的图片，这个文件夹的大小也是有点大的。然而，这个库还是值得去试一下的。下面对 lottie 的使用方法做一些记录。

AE 安装 bodymovin 插件

1. 下载安装 ZXP installer
<