lottie-minify在线压缩lottie 的json数据

原文链接: lottie-minify在线压缩lottie 的json数据

上一篇: lottie-web 实现可以播放zip文件的播放器

下一篇: gl-matrix 常见运算

参考

https://github1s.com/fancy-lottie/lottie-compress/blob/HEAD/src/main.ts

压缩后依然可以正常播放

只需要处理json那部分, 图片的话需要手动处理, 因为图片很麻烦, 而且处理方式很不一样, 不需要放在一起, 而且主要是我用这个库一直报错...

阿里的是会把图片打成base64的, 但是有的很大而且多的是用的路径, 主要是针对播放场景做裁剪, 所以可以去除编辑信息, 也就是裁剪过的json不能再次编辑了, 因为去除了一些层级和名称

创建项目

pnpx tsdx create lottie-mini

深度删除一些不用的值, 这些值只在编辑的时候用, 所以在播放的时候可以删除掉

使用方法和下面的测试一样, 传入一个json data就行, copy表示是否原地修改, 也可以传入一个自定义的删除键列表

import { resolve } from 'path';
import { readFileSync, writeFileSync } from 'fs';
import { miniLottie } from '../src/index';
describe('mini', () => {
  it('compress', () => {
    const fileList = ['lottie'];
    for (const name of fileList) {
      const inPath = resolve('./test', 'in', `${name}.json`);
      const outPath = resolve('./test', 'out', `${name}.json`);
      const oldStr = readFileSync(inPath, { encoding: 'utf8' });
      const oldData = JSON.parse(oldStr);
      const newData = miniLottie(oldData, { copy: true });
      const newStr = JSON.stringify(newData);
      writeFileSync(outPath, newStr, { encoding: 'utf8' });

      // lottie: old: 77118, mini:75828
      console.log(`${name}: old: ${oldStr.length}, mini:${newStr.length}`);
    }
  });
});

还是有一丢丢效果的, 后面再完善吧