HarmonyOS 鸿蒙Next Lottie 库 destroy方法引起的动画播放异常
HarmonyOS 鸿蒙Next Lottie 库 destroy方法引起的动画播放异常
使用的Lottie 库,地址:https://gitee.com/openharmony-tpc/lottieArkTS
场景描述:
页面是由List 列表构成,每个列表item对应的是自定义组件A:componentA(下文简称:A)。
每个组件A中有一个点赞按钮,点击点赞按钮,播放点赞动画。
点击某个组件A中的点赞按钮,执行点赞动画:
Lottie.play(this.animationName)
出现了问题:所有加载出来的组件A 都执行了点赞动画。
组件销毁时:aboutToDisappear(),调用了动画销毁代码:
aboutToDisappear(): void {
Lottie.destroy(this.animationName)
}
出现了问题:随着某个组件A的销毁,其它所有加载出来的组件A的动画也跟着全部销毁。
产生的问题的原因:
所有组件A的animationName都是一样的,Lottie 在对动画操作时,是对所有的动画或是拥有相同name的动画进行操作,不是只操作这一组件内的动画。
解决办法:
1,将每个组件A 的animationName 都设置成唯一的。例如:组件A中有传入数据对象,将animationName 设置成由数据对象中的id组成:animationName + data.id
2,加载动画是使用生成 AnimationItem 对象,对动画的操作使用AnimationItem 对象。
this.animateItem = Lottie.loadAnimation({
container: this.canvasContext,
renderer: ‘canvas’,
path: ‘common/attention_header.json’,
autoplay: false,
loop: false,
name: this.animationName
})
注意:第2种解决方案中官方不建议使用animationItem.destroy() 销毁动画,性能上没有Lottie.destroy()好。
疑问:
Lottie动画目前只支持canvas方式,使用Lottie时需要用到Canvas,Canvas组件在使用时会传入 CanvasRenderingContext2D 对象,在加载Lottie动画时
Lottie.loadAnimation() 需要传入Canvas使用的CanvasRenderingContext2D 对象,可否借助CanvasRenderingContext2D 对象只操作对应Canvas上的动画
更多关于HarmonyOS 鸿蒙Next Lottie 库 destroy方法引起的动画播放异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html