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

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

.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 })

加载本地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);
    });
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS lottie动画
157浏览 • 1回复 待解决
HarmonyOS 怎样加载Lottie动画
248浏览 • 1回复 待解决
HarmonyOS 如何加载lottie动画
216浏览 • 1回复 待解决
HarmonyOS 本地lottie动画无法播放
746浏览 • 1回复 待解决
HarmonyOS Lottie动画有加载指导吗
119浏览 • 1回复 待解决
lottie动画组件存在严重内存泄漏
1650浏览 • 1回复 待解决
HarmonyOS Lottie动画加载不出来
183浏览 • 1回复 待解决
动画lottie能否设置播放次数
2140浏览 • 1回复 待解决
HarmonyOS lottie使用问题
535浏览 • 1回复 待解决
Refresh结合lottie实现下拉刷新动画
1346浏览 • 1回复 待解决
HarmonyOS RN使用lottie
115浏览 • 1回复 待解决
HarmonyOS 如何加载svga格式动画
28浏览 • 1回复 待解决
HarmonyOS CAPI动画怎么使用
380浏览 • 1回复 待解决
HarmonyOS 多久支持svga格式动画
260浏览 • 1回复 待解决