OpenHarmony开发者论坛

标题: 鸿蒙三方库-动画库@ohos/lottie无法正常播放问题-只有图片显示 [打印本页]

作者: 11939 时间: 3 天前
标题: 鸿蒙三方库-动画库@ohos/lottie无法正常播放问题-只有图片显示
### 【问题描述】

1. 介绍问题现象和发生的背景
根据通过参考lottie文档进行编写测试代码运行动画，只显示图片，但图片没有动起来，已正确引入json文件

> https://forums.openharmony.cn/forum.php?mod=viewthread&tid=4272
>
2. 相关的代码（请勿使用截图）

```
import lottie, { AnimationItem } from '@ohos/lottie'

/**
* harmony-os-application #项目的名称
* HomeBody.ets #文件名称
* Created by  ON 2025/4/1 #作者及添加日期
*/
@Component
export struct HomeBody {
   private mainRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
   private mainCanvasRenderingContext: CanvasRenderingContext2D =
   new CanvasRenderingContext2D(this.mainRenderingSettings)
   private politeChicky: string = 'test';
   private politeChickyPath: string = 'common/lottie/test.json';
   private animateItem?: AnimationItem;

   build() {
   Row() {
      Canvas(this.mainCanvasRenderingContext)
         .width(160)
         .height(160)
         .borderRadius(3)
         .onReady(() => {
         //抗锯齿的设置
         this.mainCanvasRenderingContext.imageSmoothingEnabled = true;
         this.mainCanvasRenderingContext.imageSmoothingQuality = 'medium'
         this.animateItem = lottie.loadAnimation({
            container: this.mainCanvasRenderingContext,
            renderer: 'canvas',
            loop: true,
            autoplay: false,
            name: this.politeChicky,
            path: this.politeChickyPath,
            frameRate: 29,
         })
         console.log("开始执行");
         lottie.play(this.politeChicky);
         })
      Button() {
         Text('测试')
      }.onClick(() => {
         console.log('点击成功');
      })
   }

   }
}
```
3. 运行结果、错误截图

```
04-01 18:03:21.557 13317-343102  A0ff00/lottie_ohos                                  I    <Manager> load animation named 'test' from common/lottie/test.json, canvas uniqueId is: 26
04-01 18:03:21.557 13317-343102  A0ff00/lottie_ohos                                  I    current Lottie version: 2.0.19
04-01 18:03:21.558 13317-343102  A0ff00/lottie_ohos                                  E    <Coordinator> API level(0) is too low.
04-01 18:03:21.558 13317-343102  A0ff00/lottie_ohos                                  W    <Coordinator> context2d must be bound to coordinator firstly.
04-01 18:03:21.558 13317-343102  A0c0d0/JSAPP                                        W    The getContext.getContext interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.558 13317-343102  A0c0d0/JSAPP                                        W    The BaseContext.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.558 13317-343102  A0c0d0/JSAPP                                        W    The Context.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.558 13317-343102  A0c0d0/JSAPP                                        W    The EventHub.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.558 13317-343102  A0ff00/lottie_ohos                                  I    <test(__lottie_element_1)> animation setFrameRate: 29
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        I    开始执行
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The getContext.getContext interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The BaseContext.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The Context.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The EventHub.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0ff00/lottie_ohos                                  I    <Manager> play for animation named by 'test' in all abilities
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The getContext.getContext interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The BaseContext.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The Context.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The EventHub.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0ff00/lottie_ohos                                  I    <test(__lottie_element_1)> animation play: 0, paused
04-01 18:03:21.559 13317-343102  A0ff00/lottie_ohos                                  I    <test(__lottie_element_1)> animation is playing
04-01 18:03:21.559 13317-343102  A0ff00/lottie_ohos                                  I    <test(__lottie_element_1)> animation activated with 0 fps.
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The getContext.getContext interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The BaseContext.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The Context.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The EventHub.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0ff00/lottie_ohos                                  W    <Looper(0)> api version(0) is too low. frameCallback is disabled.
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The displaySync.create interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0c0d0/JSAPP                                        W    The DisplaySync.on interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.559 13317-343102  A0ff00/lottie_ohos                                  I    <Looper(0)> displaySync created.
04-01 18:03:21.560 13317-343102  A0ff00/lottie_ohos                                  I    <Looper(0)> activate.
04-01 18:03:21.560 13317-343102  A0ff00/lottie_ohos                                  I    <Looper(0)> displaySync first
04-01 18:03:21.560 13317-343102  A0c0d0/JSAPP                                        W    The getContext.getContext interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.560 13317-343102  A0c0d0/JSAPP                                        W    The BaseContext.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.560 13317-343102  A0c0d0/JSAPP                                        W    The Context.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.560 13317-343102  A0c0d0/JSAPP                                        W    The EventHub.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.560 13317-343102  A0ff00/lottie_ohos                                  W    <Looper(0)> displaySync could NOT start cause context not matched
04-01 18:03:21.564 13317-343102  A0c0d0/JSAPP                                        W    The getContext.getContext interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.564 13317-343102  A0c0d0/JSAPP                                        W    The BaseContext.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.564 13317-343102  A0c0d0/JSAPP                                        W    The Context.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.564 13317-343102  A0c0d0/JSAPP                                        W    The EventHub.constructor interface in the Previewer is a mocked implementation and may behave differently than on a real device.
04-01 18:03:21.572 13317-343102  A0ff00/lottie_ohos                                  I    Lottie canvas size:160,160 with fr:29.9700012207031
04-01 18:03:21.600 13317-343102  A0ff00/lottie_ohos                                  I    <test(__lottie_element_1)> animation created from common/lottie/test.json
04-01 18:03:21.600 13317-343102  A0ff00/lottie_ohos                                  I    <test(__lottie_element_1)> animation setSegment: 0 ~ 60, absolute frame -1 played.
04-01 18:03:21.609 13317-343102  A0ff00/lottie_ohos                                  I    <test(__lottie_element_1)> animation created with 29.9700012207031 fps.
```
4. 我尝试过的解决方法和结果
5. 我想要达到的结果

正常显示动画

### 【运行环境】

硬件：Mac
ROM版本：
DevEvoStudio版本：DevEco Studio 5.0.3 Beta1
SDK版本：Ohos_sdk_public 5.0.3.130 (API Version 15 Beta1)

作者: onefan 时间: 前天 09:53
on a real device.
看上去你使用的是预览，提示需要换真机调试试试。

作者: 11939 时间: 前天 11:59
回复 onefan: 🙏感谢，没想到他预览不会动，谢谢

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)