十七、【鸿蒙 NEXT】如何实现lottie动画

【前言】

我们在安卓开发过程中可能用到lottile组件加载Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，目前鸿蒙next中有两个组件支持加载lottie动画，一个是@ohos/lottie，另一个是@ohos/lottie-turbo，目前推荐使用第二种，该组件声明式调用更加简洁，支持并行加载、内存缓存、子线程渲染，性能优化30%+，多动画/复杂动画场景下UI界面更流畅。

下面介绍几个常用的场景

1、Lotttie组件加载

其中参数path和imagePath分别是json文件和图片的路径，支持应用沙箱自定义路径，也可以直接放在代码resource/rawfile路径下，通过$rawfile('')传给path

javascript 复制代码

import { LottieController, LottieView } from '@ohos/lottie-turbo';

@Entry
@Component
struct LottiePage {
  private controller: LottieController = new LottieController();

  build() {
    Column() {
      LottieView({
        lottieId: "lottie1", //动画id，需要保证唯一性
        loop: false, //是否循环播放，非必须，默认为true
        autoplay: false, //是否自动播放，非必须，默认为true
        path: this.getUIContext().getHostContext()?.resourceDir + 'common/lottie/animal.json',
        imagePath: this.getUIContext().getHostContext()?.resourceDir + 'common/lottie/images',
        controller: this.controller, //lottie动画控制器
      })
        .width('50%')
        .height(160)
        .backgroundColor(Color.Gray)
    }
    .height('100%')
    .width('100%')
  }
}

2、组件加载完成后，直接跳转到某一帧，比如跳转到最后一帧图片

首先增加个listener监听对象，在对象中监听onLoadedImages事件，在事件中首先获取到动画的totalFrames即所有帧数，然后调用controller的goToAndStop的方法，跳转到最后一帧，其中注意一点是，第二参数一定要传true，表示立即播放。如果不传的话，表示到下一轮循环时才跳转。

javascript 复制代码

   LottieView({
        lottieId: "lottie1", //动画id，需要保证唯一性
        loop: false, //是否循环播放，非必须，默认为true
        autoplay: false, //是否自动播放，非必须，默认为true
        path: this.getUIContext().getHostContext()?.resourceDir + 'common/lottie/animal.json',
        imagePath: this.getUIContext().getHostContext()?.resourceDir + 'common/lottie/images',
        controller: this.controller, //lottie动画控制器
        listener: new LottieListener({
          onLoadedImages: () => {
            let total = this.controller.totalFrames
            this.controller.goToAndStop(total - 1, true)
          }
        })
      })

3、播放某一段图片，比如播放从第0帧到50%帧

这里调用控制器的playSegments方法，第一个方法是一个二维数组，表示播放的图片范围（这里一定要传二维数组），第二个参数表示立即播放

javascript 复制代码

 listener: new LottieListener({
          onLoadedImages: () => {
            let total = this.controller.totalFrames
            this.controller.playSegments([[0, total/2]], true)
          }
        })

4、反方向播放，比如从最后一帧往前播放到50%帧

调用setDirection，-1表示反方向，1表示正方向。这里还调用了resetSegments方法表示清除上一次的Segments，如果上一次调用过playSegments可能会有影响

javascript 复制代码

listener: new LottieListener({
          onLoadedImages: () => {
            let total = this.controller.totalFrames
            this.controller.setDirection(-1)
            this.controller.resetSegments(true)
            this.controller.playSegments([[total/2, total]], true)
          }
        })

5、在已有的LottieView组件中重新加载path路径

javascript 复制代码

this.controller.reload({
              path: this.getUIContext().getHostContext()?.resourceDir + 'common/lottie/animal.json',
            })