HarmonyOS 鸿蒙Next lottie动画的json数据里不能有base64图片吗？

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next lottie动画的json数据里不能有base64图片吗？ 问题描述

现在的 lottie 动画的 json 数据里不能有 base64 图片吗？我用官网示例的 json 可以没问题，但用我们 UI 导出的 json 播不了。

Harmonyos Next教程
3 回复

你好，我想请问下json地址里面有https网络图片是不是加载不出来？我用官方的json示例能正常显示，但是我这边ui给的里面json有https网络图片，一直显示不出来。

更多关于HarmonyOS 鸿蒙Next lottie动画的json数据里不能有base64图片吗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


**解决方案**

```javascript
import lottie from ‘[@ohos](/user/ohos)/lottie’ 
[@Entry](/user/Entry) 
[@Component](/user/Component) 
struct LottiePage { 
  [@State](/user/State) message: string = ‘Hello World’; 
  private mainRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true) 
  private mainCanvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mainRenderingSettings) 
  private path: string = “common/lottie/pulldown_loading.json” 
  build() { 
    Column() { 
      Canvas(this.mainCanvasRenderingContext) 
        .width(200) 
        .height(200) 
        .backgroundColor(Color.Gray) 
        .onReady(() => { 
          lottie.loadAnimation({ 
            container: this.mainCanvasRenderingContext, // 渲染上下文 
            renderer: ‘canvas’, // 渲染方式 
            loop: true, // 是否循环播放,默认true 
            autoplay: true, // 是否自动播放，默认true 
            name: ‘2016’, // 动画名称 
            path: this.path, // json路径 
            // initialSegment: [10, 50] // 播放的动画片段 
          }) 
        }) 
    } 
    .width(‘100%’) 
    .height(‘100%’) 
  }
}

HarmonyOS 鸿蒙Next lottie动画的json数据里通常不建议包含base64图片。

在lottie动画的json数据结构中，图片资源一般是通过外部链接或者特定的资源引用方式来加载的，而不是直接将图片编码为base64格式嵌入到json中。这种做法主要是出于性能考虑：base64编码的图片会显著增加json文件的大小，从而可能导致加载时间延长、内存占用增加等问题。

在HarmonyOS鸿蒙Next的开发环境中，为了优化动画的加载和渲染效率，建议将图片资源作为单独的文件进行管理，并在json文件中通过相应的引用路径来加载这些图片。这样做不仅可以保持json文件的简洁性，还有利于资源的灵活替换和管理。

如果你确实需要在动画中使用base64编码的图片，可能需要考虑通过其他方式（如自定义解析和处理逻辑）来实现，但这通常会增加开发的复杂性和潜在的性能问题。

因此，建议在制作lottie动画时，遵循最佳实践，将图片资源作为外部文件管理，并在json中通过引用方式加载。如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html。

回到顶部