HarmonyOS鸿蒙Next中实现Lottie动画效果

HarmonyOS鸿蒙Next中实现Lottie动画效果

实现 Lottie动画效果

介绍

Lottie是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染， 可以在各种屏幕尺寸和分辨率上呈现，并且支持动画的交互性，通过添加触摸事件或其他用户交互操作，使动画更加生动和具有响应性。

使用说明：

  1. 进入页面，点击动画卡片，动画播放并且文本发生变化。

实现思路

  1. 添加Lottie模块，源码参考 oh-package.json5
  2. 将Lottie的资源文件data.json文件放置到Entry目录下的common文件夹下(放置本模块中，使用相对路径无法读取)。
  3. 进入页面，通过Canvas的onReady函数加载动画，点击播放动画，动画执行播放，文本刷新。源码参考 LotieView.ets
loadAnimation(autoplay: boolean) {
    if (this.animateItem !== null) {
        this.animateItem.destroy();
        this.animateItem = null;
    }
    // TODO: 知识点:lottie.loadAnimation将json数据生成动画
    this.animateItem = lottie.loadAnimation({
        container: this.politeChickyController,
        renderer: 'canvas',
        loop: false,
        autoplay: autoplay,
        name: this.politeChicky,
        path: this.politeChickyPath,
        initialSegment: [FRAME_START, FRAME_END]
    })
}

build() {
    Stack({ alignContent: Alignment.TopStart }) {
        Canvas(this.politeChickyController)
            .width($r('app.integer.canvas_size'))
            .height($r('app.integer.canvas_size'))
            .backgroundColor($r('app.color.ohos_id_color_palette2'))
            .borderRadius($r('app.string.ohos_id_corner_radius_default_m'))
            .onReady(() => {
                this.loadAnimation(false);
            })
            .onClick(() => {
                this.loadAnimation(true);
                this.times++;
            })
    }.margin({ top: $r('app.string.ohos_id_elements_margin_vertical_l') })
}

最后

动画效果非常的消耗性能记得删除


更多关于HarmonyOS鸿蒙Next中实现Lottie动画效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中实现Lottie动画需使用ArkUI的Lottie组件。步骤如下：

  1. 添加lottie库依赖： 在module.json5中添加"lottie"模块依赖
import { LottieAnimation } from '@ohos/lottie'
  1. 基础使用：
@Entry
@Component
struct LottieExample {
  private controller: LottieController = new LottieController()

  build() {
    Column() {
      LottieAnimation({
        src: 'common/lottie/data.json',
        controller: this.controller
      })
      .width(200)
      .height(200)
    }
  }
}
  1. 控制方法： 通过controller可调用play()、pause()、stop()等方法控制动画。

更多关于HarmonyOS鸿蒙Next中实现Lottie动画效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中实现Lottie动画效果的关键步骤如下：

  1. 依赖配置： 在oh-package.json5中添加Lottie依赖：
"dependencies": {
  "@ohos/lottie": "^2.0.0"
}

  1. 资源准备： 将AE导出的JSON动画文件(如data.json)放在entry/src/main/resources/base/common目录下

  2. 核心实现代码：

// 导入Lottie
import lottie from '@ohos/lottie'

@Entry
@Component
struct LottieExample {
  private animateItem: any = null
  private canvasController: RenderingContext = new RenderingContext()
  private animationPath: string = 'common/data.json'

  loadAnimation(autoplay: boolean) {
    if (this.animateItem) {
      this.animateItem.destroy()
    }
    
    this.animateItem = lottie.loadAnimation({
      container: this.canvasController,
      renderer: 'canvas',
      loop: false,
      autoplay: autoplay,
      path: this.animationPath
    })
  }

  build() {
    Column() {
      Canvas(this.canvasController)
        .width(300)
        .height(300)
        .onReady(() => {
          this.loadAnimation(false)
        })
        .onClick(() => {
          this.loadAnimation(true)
        })
    }
  }

  aboutToDisappear() {
    if (this.animateItem) {
      this.animateItem.destroy()
    }
  }
}
  1. 注意事项：
  • 确保JSON文件路径正确
  • 组件销毁时调用destroy()释放资源
  • 复杂动画可能影响性能，建议控制同时播放的动画数量
  • 支持通过initialSegment设置播放区间
  • 可通过speed属性控制播放速度
  1. 交互控制： 可通过animateItem提供的方法控制动画：
this.animateItem.play() // 播放
this.animateItem.pause() // 暂停
this.animateItem.stop() // 停止
this.animateItem.goToAndStop(50) // 跳转到指定帧

这种实现方式可以高效渲染矢量动画，同时保持较小的资源占用。

回到顶部