鸿蒙高性能动画库——lottie-turbo

liuhaikang2026-01-05 10:12

lottie-turbo

简介

lottie-turbo是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染，使用声明式语法创建和使用，具备并行化能力，适用于应用加载lottie动画的场景。

下载安装

复制代码 
ohpm install @ohos/lottie-turbo

额外注意

1.0.2-rc.1版本以下仅支持API16及以上的设备，1.0.2版本兼容API12及以上设备

快速上手

简易示例

复制代码 
import { LottieController, LottieView } from '@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/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 {
    
  } 
}

注意事项

  • 1.当前默认在页面aboutToDisappear时自动触发destroy进行销毁。
  • 2.需要注意lottieId的唯一性，不配置时将自动随机生成。

使用说明

前提：数据准备

lottie动画文件是由设计人员使用Adobe After Effects软件通过bodymovin插件导出json格式的文件。

AE软件创建动画时需要设置动画的宽(w)、高(h)、bodymovin插件的版本号(v)、帧率(fr)、开始帧(ip)、结束帧(op)、静态资源信息(assets) 、图层信息(layers)等重要信息。

如果仅是用于demo测试，可以使用工程示例中的json文件。

1.引入组件：

复制代码 
import lottie from '@ohos/lottie-turbo'

2.动画资源导入

(1)通过本地文件加载动画

复制代码 
LottieView({
      path: $rawfile('common/lottie/animation.json'), //动画路径
    })

路径资源在工程entry/src/main/resources/rawfile下

(2)通过网络资源加载动画

复制代码 
LottieView({
      path: "https://cdn.lottielab.com/l/7Zgk9iuQxmZ3tD.json", //网络路径
    })

(3)通过json字符串加载动画

复制代码 
LottieView({
  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"}]}',
  // animationData优先级 > path 优先级
})

(4)通过沙箱路径加载动画

复制代码 
LottieView({
    path: '/data/storage/el2/base/haps/entry/files/xxxx.json', //沙箱路径
}

3.LottieView组件设置

LottieView支持常规ArkUI通用设置

复制代码 
LottieView({
  path: $rawfile('common/lottie/grunt.json'), //通过rawfie文件播放
})
  .width('50%') //设置宽度
  .height(160) //设置高度
  .backgroundColor(Color.Gray) // 设置背景颜色
  // 设置点击事件
  .onClick(() => {
    
  })

4.LottieView组件使用

可参考快速上手中简易示例

LottieView配置项

参数名称 参数类型 参数说明
lottieId 字符串 应用内的唯一id
path 字符串/资源文件 应用内的动画数据文件路径, 支持json文件和zip文件
radius?: number 数值 设置Xcomponent的边框圆角
bgColor?: number 数值 设定xcomponent的背景颜色，默认为 0
animationData 字符串 json格式的动画数据, 仅限json字符串格式，优先级高于path
useImageCache?: boolean 布尔值 仅适用于显示面积小的动画,默认为 false
loop?: boolean｜number 布尔值/正整数 是否循环播放/循环次数
autoplay?: boolean; 布尔值 是否自动播放
initialSegment?: AnimationSegment; 数组 初始化动画资源播放时的整体帧范围:1-60
contentMode?: string; 字符串 动画填充模式，取值Fill,Cover,Top,Bottom,Contain,ContainCrop
frameRate?: number; 数值 设置animator的刷帧率，范围1~120
useCache?: boolean 布尔值 是否使用缓存，默认true，使用缓存
autoSkip?: boolean; 布尔值 当动画不可见时，是否跳过绘制：设为true则跳过绘制，默认为 true
controller?: LottieController; 控制器 控制动画操作，通过new LottieController()创建
listener?: LottieListener; 监听 监听事件，通过new LottieListener()创建
setImageAssetDelegate(interface\[\]) object 设置Assets资源替换功能，图片资源id，base64/uri
imagePath?:string 字符串 设置资源目录路径

单个动画控制 LottieController参数说明

参数名称 相关描述
lottieId: string 唯一id
isLoaded: boolean; 是否加载
currentFrame: number; 当前帧号，默认为浮点数，调用setSubframe(false) 后为整数
currentRawFrame: number; 当前帧数，浮点数
firstFrame: number; 当前播放片段的第一帧帧号
totalFrames: number; 当前播放片段的总帧数
frameRate: number; 帧率 frame/s
frameMult: number; 帧率 frame/ms
playSpeed: number; 播放速度
playDirection: number; 播放方向
playCount: number; 动画完成播放的次数
isPaused: boolean; 是否已暂停
autoplay: boolean; 是否自动播放
loop: boolean 是否自动循环
timeCompleted: number = 0; 当前动画片段完成单次播放的帧数
segmentPos: number = 0; 当前动画片段序号
isSubframeEnabled: boolean; 是否尽可能更新动画帧率
segments: AnimationSegment 当前动画播放片段

单个动画控制 LottieController接口说明

使用方法 输入参数 相关描述
play() null 播放
stop() null 停止
pause() null 暂停
togglePause() null 切换暂停
destroy() null 销毁动画
goToAndStop() value: number, isFrame?: boolean 跳到某一时刻并停止
goToAndPlay() value: number, isFrame?: boolean 跳到某一时刻并播放
setSegment() init: number, end: number 设置动画片段
playSegments() segments: AnimationSegment ｜ AnimationSegment\[\], forceFlag?: boolean 播放指定片段
resetSegments() forceFlag 重置动画
setSpeed() speed: number 设置播放速度
setDirection() direction: number 设置播放方向
setSubframe() useSubFrames: boolean 设置尽可能更新动画帧率
getDuration() inFrames?: boolean 默认获取播放时间,入参为true 时获取帧数，false 为时间
triggerEvent() name: string 强制触发指定事件
addEventListener() name: string, callback: Function 添加监听状态
removeEventListener() name: string, callback?: Function 移除监听状态，移除后触发回调
changeColor() layer: string, startColor: number\[\], endColor?: number\[\] 更改动画颜色
setContentMode() contentMode: string 设置填充模式
setFrameRate() frameRate: number 设置动画刷帧率
reload() config: ConfigType 重载动画

全局动画控制 lottie全局api说明

使用方法 参数类型 相关描述
lottie.play() lotteId ?: string (动画名) 播放动画，可通过设置lotteId 指定动画操作
lottie.stop() lotteId ?: string (动画名) 停止动画，可通过设置lotteId 指定动画操作
lottie.pause() lotteId ?: string (动画名) 暂停动画，可通过设置lotteId 指定动画操作
lottie.togglePause() lotteId ?: string (动画名) 切换暂停动画，可通过设置lotteId 指定动画操作
lottie.destroy() lotteId ?: string (动画名) 销毁动画，可通过设置lotteId 指定动画操作
lottie.setSpeed() speed: number (播放方向) , lotteId ?: string (动画名) 全局动画播放方向控制，speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放
lottie.setDirection() direction: 1 或 -1, lotteId ?: string (动画名) 全局设置播放方向，可通过设置lotteId 指定动画操作; 1为正向, -1为反向; 当设置为反向时, 从当前播放进度开始回播直到首帧, loop值为true时可无限倒放, speed<0叠加时也是倒放
lottie.setFrameRate() frameRate: number 全局设置播放帧率
lottie.clearFileCache() url?: string (路径path或者网络uri) 全局文件缓存清除，可通过设置url指定清除文件.
lottie.resizeCache() size: number, capacity: number (缓存总量大小) 设置内存缓存容器大小
lottie.resizeFileCache() size: number, capacity: number (缓存总量大小) 设置文件缓存容器大小
lottie.clearCache() 无 清空缓存容器
lottie.removeCache() key: string (缓存键) 通过缓存键移除缓存
lottie.renderToImage() lottie: string / Resource, frameNum: number, width: number, height: number, resManager?: resmgr.ResourceManager 将lottie动画的某帧离屏渲染为图像数据

场景使用指南

1.动画播放暂停

复制代码 
lottie.play() //所有动画播放
lottie.play('animation1') //animation1动画播放
this.controller.play() //this.controller绑定的动画播放

lottie.stop() //所有动画停止
lottie.stop('animation1') //animation1动画停止
this.controller.stop() //this.controller绑定的动画停止

lottie.pause() //所有动画暂停
lottie.pause('animation1') //animation1动画暂停
this.controller.pause() //this.controller绑定的动画暂停

lottie.togglePause() //所有动画切换暂停/播放
lottie.togglePause('animation1') //animation1动画切换暂停/播放
this.controller.togglePause() //this.controller绑定的动画切换暂停/播放

2.设置播放速度

注意：speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放

复制代码 
lottie.setSpeed(1) //所有动画设置播放速度
lottie.setSpeed(1,'animation1') //animation1动画设置播放速度
this.controller.setSpeed(1) //this.controller绑定的动画设置播放速度

3.设置播放方向

注意：direction 1为正向，-1为反向

复制代码 
lottie.setDirection(1) //所有动画设置播放方向
lottie.setDirection(1,'animation1') //animation1动画设置播放方向
this.controller.setDirection(1) ///this.controller绑定的动画设置播放方向

4.销毁动画

注意：页面不显示或退出页面时，需要销毁动画
默认已在LottieView的aboutToDisappear()中调用了this.controller.destroy

复制代码 
lottie.destroy() //销毁所有动画
lottie.destroy('animation1') //销毁animation1动画
this.controller.destroy('animation1') //销毁指定name动画

5.动画跳转

注意：根据第二个参数判断按帧还是按毫秒控制，true 按帧控制，false 按时间控制，缺省默认为false

复制代码 
this.controller.goToAndPlay(250,true) //跳转到250帧并播放
this.controller.goToAndPlay(12000,false) //跳转到5000ms并播放

this.controller.goToAndStop(250,true) //跳转到250帧并停止
this.controller.goToAndStop(5000,false) //跳转到5000ms并停止

6.动画片段播放

复制代码 
// 限定动画资源播放时的整体帧范围，即设置动画片段
this.controller.setSegment(5,15);

// 播放动画片段,第二参数值为true立刻生效, 值为false循环下次播放的时候生效
this.controller.playSegments([[5,15],[20,30]],true)

// 重置动画播放片段，使动画从起始帧开始播放完整动画
// 参数值为true立刻生效, 值为false循环下次播放的时候生效
this.controller.resetSegments(true);

7.动画事件监听

可监听事件说明

序号 事件名称 说明
1 enterFrame 渲染一帧开始
2 drawFrame 渲染一帧完成
3 loopComplete 循环一次
4 complete 播放完成
5 segmentStart 片段开始播放
6 destroy 销毁
7 config_ready 数据准备
8 data_ready 数据解析
9 DOMLoaded 组件添加完成回调
10 data_failed 数据加载失败，json文件异常
11 loaded_images 图片数据获取完成
（1）创建 LottieView时设置
复制代码 
// 设置监听器
private listener: LottieListener = new LottieListener({
  onDrawFrame: () => {
    onsole.info("onDrawFrame");
  }
})

//绑定监听器
LottieView({
  listener: this.listener
})
（2）动态添加
复制代码 
// 添加监听
this.controller.addEventListener('loopComplete', (): void => {
                    console.info("loopComplete");
                  })
（3）动态移除
复制代码 
// 移除事件监听，可选择设置执行完成后的回调函数
this.controller.removeEventListener('loopComplete', (): void => {
                    //执行移除后，调用此处函数
                    console.info("loopComplete");
                  })
（4）注意事项

1、DOMLoaded事件

  • 采用并行化加载方案后，DOMLoaded事件触发时动画数据的解析未完成，此时对动画的控制会失效。

  • 如果动画开始播放之前需要触发事件，可使用loaded_images事件。

8.更改动画渲染颜色

当前只支持填充图层与形状图层

（1）非关键帧
复制代码 
// 注意：第一个参数代码图层名称，第二个参数是颜色的RGB或者RGBA值
// 颜色取值0-255,透明度取值0-1.0
// 当需要修改所有图层颜色时，可使用 "**."
this.controller.changeColor("**.Layer 1 Outlines.**",[255,150,203])  //修改某一个元素的颜色,不带透明度
this.controller.changeColor("**.Layer 1 Outlines.**",[255,150,203,1.0]) //修改某一个元素的颜色,带透明度
（2）关键帧，渐变色修改
复制代码 
// 注意：第一个参数代码图层名称，第二和第三个参数是关键帧的起始和结束RGB或者RGBA值
// 颜色取值0-255,透明度取值0-1.0
// 当需要修改所有图层颜色时，可使用 "**."
this.controller.changeColor("**.Layer 1.**",[255,0,0],[0,0,255])  //修改某一个关键帧的颜色,不带透明度
this.controller.changeColor("**.Layer 1.**",[255,0,0,0],[0,0,255,1]) //修改某一个关键帧的颜色,带透明度

9.设置资源文件替换

针对需要在加载前修改json动画中图片资源的场景，提供接口进行修改

复制代码 
"assets": [
  {
    "id": "blep",
    "h": 114,
    "w": 114,
    "u": "",
    "p": "data:image/png;",
    "e": 1
  }
]
// 在 lottieView中setImageAssetDelegate参数使用，可替换带有image资源的动画，支持base64、uri和沙箱路径替换
// refId为json动画中"assets"字段下的"id"属性，如上例

LottieView({
  path: $rawfile('common/lottie/data_url.json'),
  setImageAssetDelegate: [
      ["refid", "base64"],
      ["refid", "uri"],
      ["refid", "/data/storage/el2/base/haps/entry/files/xxxx.png"],

  ]
})

10.加载跨module动画

针对多个module，资源调用需要跨包的场景，提供跨module读取资源的能力

（1）加载module

在oh-package.json下dependencies中添加对指定module

（2）LottieView加载

在path属性中设置$rawfile，中括号内为moduleName，该资源文件可被系统索引

复制代码 
LottieView({
    loop: true,
    autoplay: true,
    path: $rawfile('[entry].robotYoga.json') // 此处entry换成对应的moduleName
})

11.更改动画

针对相同组件需要播放不同动画的场景，提供更改显示动画的接口

  • path?: string | Resource
  • animationData?: string;
  • loop?: boolean | number
  • autoplay?: boolean
  • initialSegment?: AnimationSegment
  • contentMode?: string
  • frameRate?: number
  • setImageAssetDelegate?: ImageAssetDelegate\[\];
  • resManager?: resmgr.ResourceManager;

其余参数可参考LottieView介绍，新增参数resManager

resManager：资源管理器，可选参数，当与初始动画不在同一个module时使用，使用方式如下：

（1）更改的动画与原本动画在同一个module

复制代码 
this.controller.reload({
  loop: true,
  autoplay: true,
  path: $rawfile('common/lottie/animation.json')
})

（2）更改的动画与原本动画在不同的module

复制代码 
this.controller.reload({
  loop: true,
  autoplay: true,
  path: $rawfile('[lalhan].robotYoga.json'),
  resManager: (await application.createModuleContext(getContext(this),'lalhan')).resourceManager // 此处entry换成对应的moduleName
})

12.动画复杂度判断

lottie动画播放时的功耗和复杂度与绘制指令数量强相关，lottie-turbo提供demo可计算单个动画单帧的绘制指令个数

使用debug模式编译，在RenderInfo页面中切换动画，手动点击单帧渲染，可在 log日志中使用RenderInfo关键词进行检索，可得到以下信息：

本工程默认为release模式，如果需要调整为debug，需要在library/build-profile.json5路径下将"arguments": "-DCMAKE_BUILD_TYPE=Release"注释

复制代码 
Lottie RenderInfo::Number of Render Path:75         // 路径绘制
Lottie RenderInfo::Number of Render Text:0          // 字符文本绘制
Lottie RenderInfo::Number of Render Image:0         // 图片绘制
Lottie RenderInfo::Number of Render SaveLayer:1     // 图层保存
Lottie RenderInfo::Number of Render Mask:0          // 蒙版绘制
Lottie RenderInfo::Number of Render StrokeEff:0     // 描边绘制
Lottie RenderInfo::Number of Render TritoneEff:0    // 三色调绘制
Lottie RenderInfo::Number of Render TintEff:0       // 色调绘制
Lottie RenderInfo::Number of Render FillEff:0       // 填充绘制
Lottie RenderInfo::Number of Render BlurEff:0       // 模糊绘制

注意：BlurEff指令为高斯模糊，对性能影响极大，对效果影响不大，可参考对应效果进行优化。

13.离屏渲染为图像数据

lottie-turbo提供离屏渲染接口将lottie动画渲染为图像数据，可查看Page RenderToImage

lottie离屏渲染为bitmap, 返回值为ArrayBuffer，包括以下参数：

  • lottie：要渲染的lottie动画，支持Rawfile\Url\Stirng
  • frameNum：帧号，支持小数
  • width：宽度
  • height：高度
  • resManager?：当使用Rawfile时设置ResourceManager
（1）Rawfile类型

使用资源路径时，resManager属性必须设置，entry设置为资源所在的moduleName，使用如下：

复制代码 
lottie.renderToImage($rawfile('common/lottie/float Test.json'), 1, 200, 200,
    (await application.createModuleContext(getContext(this), 'entry')).resourceManager)
（2）url类型
复制代码 
lottie.renderToImage('https://cdn.lottielab.com/l/7Zgk9iuQxmZ3tD.json', 1, 300, 300)
（3）String类型
复制代码 
lottie.renderToImage('{"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"}]}',
    1, 300, 300)

14.useImageCache图像缓存说明

该属性仅适用于展示动画面积小，数量多的场景（1vp 约等于 3.5px）

以100px x 100px 共 180帧的图片为例，一个动画需要消耗100x100x4x180=7,200,000B≈7MB

即100vp*100vp的图会占350x350x4x180≈84MB内存,具体展示可查看demo:UseImageCache.ets

与LottieArkts特性对比

更换说明

LottieArkts的使用流程是先创建canvas,再手动调用播放，Lottie-turbo使用LottieView组件可直接实现加载播放

最小替换部分可参考上图

配置对比

方法对比

接口 描述 lottieArkTS lottieC
play() 播放 是 是
stop() 停止 是 是
pause() 暂停 是 是
togglePause() 切换暂停 是 是
destroy() 销毁动画 是 是
goToAndStop() 跳到某一时刻并停止 是 是
goToAndPlay() 跳到某一时刻并播放 是 是
setSegment() 设置动画片段 是 是
playSegments() 播放指定片段 是 是
resetSegments() 重置动画 是 是
setSpeed() 设置播放速度 是 是
setDirection() 设置播放方向 是 是
getDuration() 获取动画时长 是 是
addEventListener() 添加监听状态 是 是
removeEventListener() 移除监听状态 是 是
changeColor() 更改动画颜色 是 否 (layer?: string, Color: number\[\]) layer表示图层，Color 代表颜色
setContentMode() 设置填充模式 是 是
setFrameRate() 设置动画刷帧率 是 是
cacheFileClear() 清除文件缓存 是 是
bindContext2dToCoordinator() 跟踪 lottie动画, CanvasRenderingContext2D, Canvas 三者之间的动态关联关系 是 废弃
unbindContext2dFromCoordinator() 解除追踪关系 是 废弃
setAttachedCanvasHasVisibleArea() 支持强制修正context2d所关联的canvas节点状态 是 废弃

属性对比

属性 描述 lottieArkts lottieC
animationID 动画名称 是 否 lottieId
isLoaded 动画是否已加载 是 是
currentFrame 当前帧 是 是
currentRawFrame 当前帧数（浮点） 是 是
firstFrame 第一帧索引 是 是
totalFrames 总帧数 是 是
frameRate 帧率 frame/s 是 是
frameMult 帧率 frame/ms 是 是
playSpeed 播放速度 是 是
playDirection 播放方向 是 是
playCount 完成播放的次数 是 是
isPaused 是否暂停 是 是
isNetLoad 是否网络加载 是 废弃
autoplay 自动播放 是 是
loop 是否循环 是 是
timeCompleted 当前动画片段完成单次播放的帧数 是 是
segmentPos 当前动画片段序号 是 是
isSubframeEnabled 是否尽可能更新动画帧率 是 是
segments 当前动画播放片段 是 是
packageName 包名 废弃 废弃
autoSkip 当动画不可见时，是否跳过绘制：设为true则跳过绘 是 是
uri 网络资源加载路径 是 否 （合并到path）
initialSegment 初始化动画资源播放时的整体帧范围 是 是
animationData json格式的动画数据 是 是
contentMode 动画填充模式 是 是

目录结构

复制代码 
/lottie_turbo        # 项目根目录
├── entry      # 示例代码文件夹
├── library    # lottie_turbo库文件夹
│    └─ src/main   
│          └─ CPP  # CPP代码     
│          └─ ETS  # ETS代码  
│       └─index.d.ts                
├── README.md     # 安装使用方法    
├── README_zh.md  # 安装使用方法

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR 。

开源协议

本项目遵循 Apache-2.0 License。

不支持能力

  • 不支持含有表达式的动画
相关推荐
wangbing11251 小时前
springboot应用关闭时触发动作
java·spring boot·后端
weixin_460443564 小时前
2026年新修订《网络安全法》实施：Java私有化考试系统如何做好SBOM、漏洞治理与安全升级？
java·开发语言·在线考试系统·企业培训考试系统·宏远培训考试系统·国企培训考试系统·国产化培训系统
海鸥-w7 小时前
什么是AOP
java
Cc.Y7 小时前
Java零基础入门：可变字符串与包装类：StringBuilder、StringBuffer 与 通讯录管理系统实战
java·开发语言·python
paopaokaka_luck8 小时前
基于springboot+vue的智慧家政管理系统（AI问答、 WebSocket实时沟通、ECharts运营分析、订单规则与服务追踪）
java·javascript·spring boot·数据分析·echarts·mybatis
sm_926787058 小时前
RFID 标签打印的技术实现要点与二次开发实践
java·大数据·前端·c++·编辑器
阿森_dev8 小时前
2027 届毕设选题怎么选：30 个 Java 方向选题的实现难度排序
java·开发语言·spring boot·毕业设计·课程设计
by209998 小时前
C++ 多态：同一个基类接口，调用不同的函数
开发语言·c++·经验分享·多态
笔墨登场说说8 小时前
flink bin/start-cluster.sh 帮我做成开机启动
开发语言·python
Sarvartha8 小时前
Lambda 表达式和函数式接口
java·开发语言
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地08Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10Telegram APK 下载安装完整指南 — 2026年最新