HarmonyOS 鸿蒙Next lottie沙箱播放
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);
});
}
}