HarmonyOS .zip格式的lottie动画，应该怎么使用

.zip的动画欢迎页图是可以加载的，比如是网络资源的zip，可以直接参考官网文档:https://gitee.com/openharmony-tpc/lottieArkTS

参考demo：

// 加载zip
Row() {
  Button('加载网络Zip')
    .onClick(() => {
      if (this.animateItem == null) {
        this.animateItem = lottie.loadAnimation({
          uri: "xxx",
          isNetwork: true,
          container: this.canvasRenderingContext,
          renderer: 'canvas', // canvas 渲染模式
          loop: true,
          autoplay: true,
          name: this.animateName,
        })
      }
      this.animateItem.addEventListener('error', (args: Object): void => {
        console.info('error:' + JSON.stringify(args));
      });
    })
}.margin({ top: 5 })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

加载本地zip的话，可以参考如下demo：

import fs from '@ohos.file.fs';
import zlib from '@ohos.zlib'
import Lottie, { AnimationItem } from '@ohos/lottie';
import { BusinessError } from '@kit.BasicServicesKit';

export class LottieSourceLoader {
  private static LOTTIE_PARENT_FOLDER = "/lottie/";

  static getLottieAnimationItem(canvasRenderingContext: CanvasRenderingContext2D, lottieName: string, callback: (animationItem: AnimationItem) => void) {
    LottieSourceLoader.loadLottie(lottieName, (jsonFilePath, imagesPath) => {
      const jsonStr = fs.readTextSync(jsonFilePath);
      const jsonObj: object = JSON.parse(jsonStr);
      Lottie.destroy(lottieName);
      const animationItem = Lottie.loadAnimation({
        animationData: jsonObj,
        container: canvasRenderingContext,
        renderer: 'canvas',
        loop: true,
        autoplay: true,
        name: lottieName,
        contentMode: 'Contain',
        isNetwork: false,
        imagePath: imagesPath
      })
      console.log(' imagesPath===:' + imagesPath);
      console.log(' LottieSourceLoader===:' + LottieSourceLoader.LOTTIE_PARENT_FOLDER);
      animationItem.addEventListener('error', (args: Object): void => {
        console.log(' error:' + JSON.stringify(args));
      });
      animationItem.addEventListener('data_ready', (args: Object): void => {
        console.log(' data_ready:' + JSON.stringify(args));
      });
      animationItem.addEventListener('data_ready', (args: Object): void => {
        console.log(' data_failed:' + JSON.stringify(args));
      });
      animationItem.addEventListener('DOMLoaded', (args: Object): void => {
        console.log(' DOMLoaded:' + JSON.stringify(args));
      });
      animationItem.addEventListener('loaded_images', (args: Object): void => {
        console.log(' loaded_images:' + JSON.stringify(args));
      });
      callback(animationItem);
    })
  }

  private static loadLottie(lottieName: string, callback: (jsonFilePath: string, imagesPath: string) => void) {
    const lottieData = getContext().resourceManager.getRawFileContentSync("sport_lottie_light.zip")

    try {
      const lottieFolder = getContext().filesDir + LottieSourceLoader.LOTTIE_PARENT_FOLDER;
      fs.rmdirSync(lottieFolder);
    } catch (err) {
    }

    const lottieZipPath = LottieSourceLoader.lottiePath(lottieName, true);
    const lottieUnzipPath = LottieSourceLoader.lottiePath(lottieName, false);
    LottieSourceLoader.createParentDirectoryOfFilePath(lottieZipPath)
    LottieSourceLoader.createDirectoryRecursive(lottieUnzipPath)
    // 保存到沙盒
    const file = fs.openSync(lottieZipPath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    fs.write(file.fd, lottieData.buffer.slice(0), (err, len) => {
      fs.close(file);
      if (err) {
        console.log(" write lottieData err: ", err);
      } else {
        console.log(" write lottieData suc: ", len);
      }
      // 保存完成后解压缩
      LottieSourceLoader.unzipFile(lottieZipPath, lottieUnzipPath, (unzipPath) => {
        const jsonFilePath = unzipPath + "/sport_lottie_light/data.json";
        let imagesPath = unzipPath + "/sport_lottie_light/images/";
        imagesPath = imagesPath.replace(getContext().filesDir+'/','');
        callback(jsonFilePath, imagesPath);
      });
    });
  }

  private static lottiePath(lottieName: string, zip: boolean): string {
    return getContext().filesDir + LottieSourceLoader.LOTTIE_PARENT_FOLDER + lottieName + (zip ? ".zip" : "");
  }

  static createDirectoryRecursive(dirPath: string): boolean {
    let ret = false
    try {
      let currentPath = ''
      const pathSegments = dirPath.split('/')
      for (const segment of pathSegments) {
        currentPath += segment + '/'
        if (!fs.accessSync(currentPath)) {
          fs.mkdirSync(currentPath)
        }
      }
      ret = true
    } catch (error) {
      let err: BusinessError = error as BusinessError;
      console.info("createDirectoryRecursive " + dirPath + " failed with error message: " + err.message + ", error code: " + err.code);
    }
    return ret
  }

  static createParentDirectoryOfFilePath(filePath: string): boolean {
    let ret = false
    try {
      const dir = filePath.substring(0, filePath.lastIndexOf('/'))
      ret = LottieSourceLoader.createDirectoryRecursive(dir)
    } catch (error) {
      let err: BusinessError = error as BusinessError;
      console.info("createParentDirectoryOfFilePath " + filePath + " failed with error message: " + err.message + ", error code: " + err.code);
    }
    return ret
  }

  private static unzipFile(zipFilePath: string, unzipPath: string, callback: (unzipPath: string) => void) {
    zlib.decompressFile(zipFilePath, unzipPath, (err) => {
      if (err) {
        console.error(" unzipFile error: ", err);
      } else {
        console.error(" unzipFile success");
      }
      callback(unzipPath);
    });
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.