HarmonyOS 鸿蒙Next .zip格式的lottie动画 应该怎么使用
HarmonyOS 鸿蒙Next .zip格式的lottie动画 应该怎么使用
有个.zip的动画欢迎页图，想使用lottie，但是没用过这类，有大佬有demo吗？
2 回复
zip的动画欢迎页图是可以加载的，
比如是网络资源的zip，可以直接参考官网文档:
https://gitee.com/openharmony-tpc/lottieArkTS
demo
// 加载zip
Row() {
Button('加载网络Zip')
.onClick(() => {
if (this.animateItem == null) {
this.animateItem = lottie.loadAnimation({
uri: "https://smarthome-drcn.dbankcdn.com/device/guide/KW38/template/lottie/lottie.zip",
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](/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 .zip格式的lottie动画 应该怎么使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS（鸿蒙）系统中使用.zip格式的Lottie动画，可以通过以下步骤进行：
-
导入动画资源： 将
.zip格式的Lottie动画文件放置在项目的assets目录下（如没有，请创建）。确保文件路径正确，以便在代码中能够正确引用。 -
配置XML布局： 在需要使用Lottie动画的页面或组件的XML布局文件中，添加
LottieAnimationView组件。通过lottie_rawRes属性指定动画文件的名称（不包括文件扩展名）。<com.airbnb.lottie.LottieAnimationView android:id="@+id/lottie_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_rawRes="@raw/your_lottie_animation" />注意：在HarmonyOS中，
@raw引用的是assets目录下的资源。 -
在代码中控制动画： 在Activity或Fragment中，通过ID获取
LottieAnimationView实例，并调用其方法进行动画的播放、暂停、停止等操作。LottieAnimationView lottieView = findViewById(R.id.lottie_view); lottieView.playAnimation();注意：虽然要求不使用Java代码示例，但此处仅展示调用方式，实际鸿蒙开发中应使用相应的鸿蒙API。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html
