【HarmonyOS NEXT】lottie动画无法播放

【关键字】

lottie动画库 / tabBar

【问题描述】

三方库：https://gitee.com/openharmony-tpc/lottieArkTS

在5.0真机设备上无法播放动画。系统版本：4.0.0.65。

demo下载后，加载2016，出现HAPPY图片，点击播放，没有任何反应。集成在tabbar，动画也不执行，但tabbar可以正常切换。

其中使用的动画库版本为： "@ohos/lottie": "^2.0.6"

出现问题的demo代码样例：

@Builder Build1(index: number, tabBar: TabBarItem) {
Flex({
direction: new BreakPointType({
sm: FlexDirection.Column,
md: FlexDirection.Row,
lg: FlexDirection.Column
}).getValue(this.currentBreakpoint),
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center
}) {
Canvas(this.canvasRenderingContext)
.width(36)
.height(36)
.backgroundColor(Color.White)
.onReady(() => {
lottie.loadAnimation({
container: this.canvasRenderingContext,
renderer: 'canvas', // canvas 渲染模式
loop: false,
autoplay: false,
name: 'h',
path: "lottie/data.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
})
})

Text(tabBar.name)
.fontColor(this.currentIndex === index ? "#03C067" : '#999')
.margin(new BreakPointType(this.breakPointTypeOptionEntity).getValue(this.currentBreakpoint))
.fontSize(16)
}
}

Tabs() {
TabContent() {
Stack() {
this.content()
}
}.tabBar(this.Build1(0, this.tabs[0]))

TabContent() {
Stack() {
this.content2()
}
}.tabBar(this.Build2(1, this.tabs[1]))
}.onchange(() => {
// 在change里触发动画，执行了一个动画之后，停止几秒，tabbar就再也切换不了
})

【解决方案】

经分析验证，动画不再播放这个问题确实存在，原因是动画播放结束后，播放线程也停止了，所以即使回到第一帧也无法再播放动画了。在最新版三方库2.0.7-rc.0中已解决，使用最新版即可解决此问题。