HarmonyOS 鸿蒙Next lottie沙箱播放

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next lottie沙箱播放

查了看支持沙箱播放,但是

zip格式的 或者 带有额外images文件夹图片的data.json就播放不了

2 回复

.zip的动画欢迎页图是可以加载的,比如是网络资源的zip,可以直接参考官网文档:

https://gitee.com/openharmony-tpc/lottieArkTS

加载本地zip的话,可以参考如下demo: 

import fs from '[@ohos](/user/ohos).file.fs';
import zlib from '[@ohos](/user/ohos).zlib'
import Lottie, { AnimationItem } from '[@ohos](/user/ohos)/lottie';
import { BusinessError } from '[@kit](/user/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
       // imagePath: 'lottie/test/sport_lottie_light/images/'
       // imagePath: LottieSourceLoader.LOTTIE_PARENT_FOLDER
     })
     console.log('cccccc imagesPath===:' + imagesPath);
     console.log('cccccc LottieSourceLoader===:' + LottieSourceLoader.LOTTIE_PARENT_FOLDER);
     animationItem.addEventListener('error', (args: Object): void => {
       console.log('cccccc error:' + JSON.stringify(args));
     });
     animationItem.addEventListener('data_ready', (args: Object): void => {
       console.log('cccccc data_ready:' + JSON.stringify(args));
     });
     animationItem.addEventListener('data_ready', (args: Object): void => {
       console.log('cccccc data_failed:' + JSON.stringify(args));
     });
     animationItem.addEventListener('DOMLoaded', (args: Object): void => {
       console.log('cccccc DOMLoaded:' + JSON.stringify(args));
     });
     animationItem.addEventListener('loaded_images', (args: Object): void => {
       console.log('cccccc 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;
     // const lottieFolder = getContext().getApplicationContext().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("cccccc write lottieData err: ", err);
     } else {
       console.log("cccccc 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+'/','');
       // const imagesPath = LottieSourceLoader.LOTTIE_PARENT_FOLDER + "sport_lottie_light/images";
       callback(jsonFilePath, imagesPath);
     });
   });
 }

 private static lottiePath(lottieName: string, zip: boolean): string {
   return getContext().filesDir + LottieSourceLoader.LOTTIE_PARENT_FOLDER + lottieName + (zip ? ".zip" : "");
   // return getContext().getApplicationContext().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("cccccc unzipFile error: ", err);
     } else {
       console.error("cccccc unzipFile success");
     }
     callback(unzipPath);
   });
 }
}

针对您提到的HarmonyOS(鸿蒙)Next lottie沙箱播放问题,以下是一些专业性的说明和可能的解决方案:

HarmonyOS在沙箱环境中运行应用时,对于多媒体内容的播放,包括Lottie动画,有一定的权限和安全限制。这些限制旨在保护用户数据的安全和系统的稳定性。

  1. 权限检查: 确保您的应用已经获得了播放动画所需的必要权限,如读写存储权限(如果动画文件存储在外部存储中)。

  2. 沙箱配置: 检查您的沙箱配置是否允许播放动画。可能需要调整沙箱的安全策略,以允许动画文件的读取和播放。

  3. Lottie库版本: 确保您使用的Lottie库版本与HarmonyOS系统兼容。如果库版本过旧,可能无法在新系统中正确播放动画。

  4. 系统更新: 检查您的HarmonyOS系统是否已更新到最新版本。系统更新可能包含对沙箱环境播放多媒体内容的改进。

  5. 代码审查: 仔细检查您的代码,确保动画的加载和播放逻辑正确无误。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。希望这些信息能帮助您解决问题。

回到顶部