lottie-mini 在線壓縮lottie 的json數據

原文鏈接: lottie-mini 在線壓縮lottie 的json數據

 

參考

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}`);
    }
  });
});

 

還是有一丟丟效果的, 後面再完善吧