HarmonyOS 鸿蒙Next中Lottie动画

看你选用哪个 lottie 库来用了

推荐使用 lottie-turbo：声明式调用更加简洁，支持并行加载、内存缓存、子线程渲染，性能优化30%+，多动画/复杂动画场景下UI界面更流畅。

[@ohos/lottie-turbo-OpenHarmony三方库中心仓](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie-turbo)

[@ohos/lottie-OpenHarmony三方库中心仓](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie)

下载安装

ohpm install [@ohos](/user/ohos)/lottie-turbo

快速上手

简易示例

import { LottieController, LottieView } from '[@ohos](/user/ohos)/lottie-turbo';

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

    build() {
        Column() {
            LottieView({
                lottieId: "lottie1", //动画id，需要保证唯一性
                loop: true, //是否循环播放，非必须，默认为true
                autoplay: true, //是否自动播放，非必须，默认为true
                autoSkip: true, //不可见时是否自动跳过渲染，非必须，默认为true
                path: $rawfile('common/lottie/grunt.json'), //通过rawfie文件播放
                // path: "https://cdn.lottielab.com/l/7Zgk9iuQxmZ3tD.json", //通过uri播放
                // 通过动画json的字符串播放(string类型)，该属性优先级 > path
                // animationData: '{"v":"5.5.2","fr":60,"ip":0,"op":60,"w":512,"h":512,"ddd":0,"assets":[{"id":"Aa19853e5c3b98a7b8dde147916d26f78","h":114,"w":114,"u":"","p":"https://raw.gitcode.com/openharmony-sig/lottie_turbo/blobs/205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b/startIcon.png","e":1}],"layers":[{"ddd":0,"ty":2,"sr":1,"ks":{"a":{"k":[0,0],"a":0},"p":{"k":[{"t":0,"s":[0,0,0],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}},{"t":60,"s":[400,400],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"a":1},"s":{"k":[100,100],"a":0},"r":{"k":0,"a":0},"o":{"k":100,"a":0},"sk":{"k":0,"a":0},"sa":{"k":0,"a":0}},"ao":0,"ip":0,"op":60,"st":0,"bm":0,"ind":0,"refId":"Aa19853e5c3b98a7b8dde147916d26f78"}]}',
                controller: this.controller, //lottie动画控制器
            })
                .width('50%')
                .height(160)
                .backgroundColor(Color.Gray)
                .onClick(() => {
                    this.controller.togglePause(); //控制动画播放暂停
                })
        }
        .height('100%')
            .width('100%')
    }
}

补充示例

import { LottieView, LottieController, LottieListener, lottie } from '[@ohos](/user/ohos)/lottie-turbo';

@Entry
@Component
struct Index {
  private controller: LottieController = new LottieController(); //动画控制器
  // 事件监听器
  private listener: LottieListener = new LottieListener({
    onEnterFrame: () => { //开始渲染帧回调
      this.updateAllStates()
    },
    onLoopComplete: () => { //动画循环播放一轮完成时
      console.info("lottie complete");
      this.playCount = this.controller?.playCount;
      this.totalPlayedCount += 1;
    },
    onComplete: () => { //动画播放结束时调用
      this.log += "lottie1 event complete\r\n"
    },
    onDestroy: () => {  //动画删除后回调
      console.info("lottie destroy");
    },
    onDOMLoaded: () => { //动画加载完成，播放之前触发回调
      console.info("lottie DOMLoaded");
    },
    onDataReady: () => { //动画数据初始化完成时调用
      this.log += "lottie1 event data_ready\r\n"
    },
  })

  build() {
  ...
      LottieView({
            loop: true, //是否循环
            autoplay: true, //自动播放
            autoSkip: true, //不可见时是否自动跳过渲染
            lottieId: "lottie1" + this.getUniqueId(), //设置唯一id
            contentMode: 'Contain', //填充模式
            path: $rawfile('common/lottie/animation.json'), //动画路径
            frameRate: 30, //播放帧率,1-120Hz
            controller: this.controller,  //动画控制器
            initialSegment: [30, 150], //初始化动画资源播放时的整体帧范围
            listener: this.listener, //监听事件容器
            useCache: true, //是否使用缓存
            setImageAssetDelegate: [["refid", "uri" ]]//替换图片资源文件，支持Base64和uri
          })
      Button("全局控制")
        .onClick(() => {
           lottie.play(); //全局播放
           lottie.pause(); //全局暂停
           lottie.stop(); //全局停止
           lottie.destroy(); //全局暂停
           lottie.togglePause();//全局切换暂停/播放
           lottie.setSpeed(1); //设置全局播放速度
           lottie.setDirection(1); //设置全局播放方向  1代表正向 -1代表方向
           lottie.setFrameRate(30);//全局设置播放帧率
           lottie.clearFileCache("");//清除单个文件缓存  不传参数为清除所有文件缓存
           lottie.clearCache();//清除内存缓存
           lottie.resizeCache(10, 10 * 1024 * 1024);//重置内存缓存大小
           lottie.resizeFileCache(10, 1024*1024);//重置文件缓存大小
           lottie.removeCache("path")//通过key删除内存缓存
        })
      Button("单个控制")
        .onClick(() => {
           this.controller.play(); //播放
           this.controller.stop(); //停止
           this.controller.pause(); //暂停
           this.controller.destroy(); //销毁
           this.controller.setSpeed(1); //设置播放速度
           this.controller.goToAndPlay(250,true); //跳转到250帧并播放,false单位为ms
           this.controller.goToAndStop(250,true); //跳转到250帧并停止,false单位为ms
           this.controller.setDirection(1); //设置播放方向  1代表正向 -1代表方向
           this.controller.setSegment(350, 0); //限定动画资源播放时的整体帧范围
           this.controller.setSubframe(true); //设置是否插帧播放，默认为true
           this.controller.playSegments([[5,15],[20,30]],false);//下次播放按照片段设置播放，tru立即生效
           this.controller.changeColor("**", [255, 0, 0, 1]); //按照图层名称，修改RGBA动画颜色
           this.controller.togglePause() //切换暂停/播放
           this.controller.setFrameRate(30) //设置播放帧率
           this.controller1.setContentMode("Contain"); //设置填充模式，支持Fill,Cover,Top,Bottom,Contain
           this.controller.reload({
                path: "https://kjstorage.360buyimg.com/cms-file/1_eec97231.zip"
           })
           //添加监听事件
           this.controller.addEventListener('drawFrame', (): void => {
               this.log += "add lottie event " + eventName + "\r\n"
           });
           this.controller.removeEventListener(‘drawFrame’); //移除监听事件
           this.controller.triggerEvent("drawFrame"); //强制触发回调
           //
        })                
   ...      
  }   
  
  // 默认在LottieView组件销毁时自动触发销毁
  aboutToDisappear(): void {
    
  } 
}

鸿蒙Next中Lottie动画通过ArkUI框架的Lottie组件实现。该组件支持加载JSON格式的动画文件，提供自动播放、循环控制、速度调整等基础功能。支持通过属性设置动画进度、尺寸和交互行为。可通过数据绑定动态控制动画状态，与鸿蒙声明式UI无缝集成。性能经过优化，适用于界面动效、加载动画等场景。