HarmonyOS 鸿蒙Next Lottie 库 destroy方法引起的动画播放异常

发布于 1周前 作者 songsunli 最后一次编辑是 5天前 来自 鸿蒙OS

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

1 回复

更多关于HarmonyOS 鸿蒙Next Lottie 库 destroy方法引起的动画播放异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中,Next Lottie库是一个用于展示和控制Lottie动画的组件。如果在使用该库的destroy方法时遇到了动画播放异常的问题,这通常可能是由于资源释放时机不当或动画状态管理不正确导致的。

在调用destroy方法时,确保动画已经处于停止状态,或者在进行销毁操作前显式地停止动画播放。destroy方法主要用于释放动画资源,如果动画仍在播放或处于某种中间状态,直接调用destroy可能会导致资源释放不完全或状态异常,进而影响后续的动画播放。

此外,检查destroy方法的调用是否在UI线程执行,因为某些UI组件的销毁操作需要在主线程进行。如果destroy方法被错误地在后台线程调用,可能会导致线程安全问题,进而引发动画播放异常。

确保destroy方法的调用是唯一的,即不要在动画的生命周期内重复调用destroy,这可能会导致资源重复释放或未定义行为。

如果上述步骤已确认无误,但问题依旧存在,可能是由于Next Lottie库本身存在的bug或与其他系统组件的兼容性问题。此时,建议直接联系官方客服以获取更专业的技术支持。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部