初探 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 插件