# LottieC **Repository Path**: tybrave/lottie-c ## Basic Information - **Project Name**: LottieC - **Description**: lottie是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染。该库基于rlottie及c++实现 - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 17 - **Created**: 2025-03-19 - **Last Updated**: 2025-09-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # lottiepro ## 简介 lottiepro是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染。 ## 快速上手 ### 示例 ```js import { LottieView, LottieController, LottieListener, lottie } from '@ohos/lottiepro'; @Entry @Component struct Index { private controller: LottieController = new LottieController(); //动画控制器 private listener: LottieListener | null = 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, //自动播放 lottieId: "lottie1" + this.getUniqueId(),//id contentMode: 'Contain', //填充模式 path: $rawfile('common/lottie/animation.json'), //动画路径 frameRate: 30,//播放帧率 controller: this.controller, //动画控制器 initialSegment: [30, 150],//初始化动画资源播放时的整体帧范围 listener: this.listener //监听事件容器 }) 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.setDirection(1); //设置播放方向 1代表正向 -1代表方向 this.controller.setSegment(350, 0); //限定动画资源播放时的整体帧范围 this.controller.changeColor("**", [255, 0, 0]); //修改动画颜色 this.controller.togglePause()//切换暂停/播放 this.controller.setFrameRate(30)//设置播放帧率 //重载动画 this.controller.reload({ loop: true, autoplay: true, 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’); // }) ... } aboutToDisappear(): void { lottie.destroy(); } } ``` ### 注意事项 - 1.当前默认支持在页面aboutToDisappear事自动触发destroy。 - 2.如果需要在不同ability使用lottieC加载动画，要注意lottieId的唯一性，可调用this.getUniqueId()确保唯一性。 ## 使用说明 前提：数据准备 lottie动画文件是由设计人员使用Adobe After Effects软件通过bodymovin插件导出json格式的文件。 AE软件创建动画时需要设置动画的宽(w)、高(h)、bodymovin插件的版本号(v)、帧率(fr)、开始帧(ip)、结束帧(op)、静态资源信息(assets) 、图层信息(layers)等重要信息。 如果仅是用于demo测试，可以使用[工程示例中的json文件] 。 1.引入组件： ``` import lottie from '@ohos/lottiepro' ``` 2.动画资源位置 注意：json文件路径不能使用 ./ 或者 ../ 等相对路径，相对路径获取不到动画源数据，会导致动画加载不出来, 在build()方法中添加自定义组件添加LottieView (1)通过path属性去定义资源路径。 ```js LottieView({ loop: true, //是否循环 autoplay: true, //自动播放 lottieId: "lottie1" + this.getUniqueId(),//id contentMode: 'Contain', //填充模式 path: $rawfile('common/lottie/animation.json'), //动画路径 frameRate: 30,//播放帧率 controller: this.controller, //动画控制器 initialSegment: [30, 150],//初始化动画资源播放时的整体帧范围 listener: this.listener //监听事件容器 }) ``` path属性可设置为: - $rawfile('common/lottie/animation.json')//Resource 类型 - "https://assets7.lottiefiles.com/packages/lf20_sF7uci.json" // 网络资源类型的 的字符串 (2)通过animationData定义资源json字符串 ```js LottieView({ loop: true, autoplay: true, frameRate: 60, contentMode: 'Contain', animationData: this.netPath, // animationData优先级 > path 优先级 controller: this.controller }) ``` 3.使用组件 参考快速上手中示例 4.控制动画 - 播放动画 ```js lottie.play() //所有动画播放 或 lottie.play('animation1') //animation1动画播放 或 this.controller.play() //this.controller绑定的动画播放 ``` - 停止动画 ```js lottie.stop() //所有动画停止 或 lottie.stop('animation1') //animation1动画停止 或 this.controller.stop() //this.controller绑定的动画停止 ``` - 暂停动画 ```js lottie.pause() //所有动画暂停 或 lottie.pause('animation1') //animation1动画暂停 或 this.controller.pause() //this.controller绑定的动画暂停 ``` - 切换暂停/播放 ```js lottie.togglePause() //所有动画切换暂停/播放 或 lottie.togglePause('animation1') //animation1动画切换暂停/播放 或 this.controller.togglePause() //this.controller绑定的动画切换暂停/播放 ``` - 设置播放速度 > 注意：speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放 ```js lottie.setSpeed(1) //所有动画设置播放速度 或 lottie.setSpeed(1,'animation1') //animation1动画设置播放速度 或 this.controller.setSpeed(1) //this.controller绑定的动画设置播放速度 ``` - 设置动画播放方向 > 注意：direction 1为正向，-1为反向 ```js lottie.setDirection(1) //所有动画设置播放方向 或 lottie.setDirection(1,'animation1') //animation1动画设置播放方向 或 this.controller.setDirection(1) ///this.controller绑定的动画设置播放方向 ``` - 销毁动画 > 注意：页面不显示或退出页面时，需要销毁动画; 默认已在库内aboutToDisappear()调用了this.controller.destroy ```js lottie.destroy() //销毁所有动画 或 lottie.destroy('animation1') //销毁animation1动画 或 this.controller.destroy('animation1') //销毁指定name动画 ``` - 控制动画停止在某一帧或某一时刻 > 注意：根据第二个参数判断按帧还是按毫秒控制，true 按帧控制，false 按时间控制，缺省默认为false ```js this.controller.goToAndStop(250,true) //或 this.controller.goToAndStop(5000,false) ``` - 控制动画从某一帧或某一时刻开始播放 > 注意:根据第二参数判断按帧还是按毫秒控制，true 按帧控制，false 按时间控制，缺省默认为false ```js this.controller.goToAndPlay(250,true) //或 this.controller.goToAndPlay(12000,false) ``` - 限定动画资源播放时的整体帧范围，即设置动画片段 ```js this.controller.setSegment(5,15); ``` - 播放动画片段 > 注意：第二参数值为true立刻生效, 值为false循环下次播放的时候生效 ```js this.controller.playSegments([[5,15],[20,30]],true) ``` - 重置动画播放片段，使动画从起始帧开始播放完整动画 > 注意：参数值为true立刻生效, 值为false循环下次播放的时候生效 ```js this.controller.resetSegments(true); ``` - 获取动画时长/帧数 > 注意：参数值为true时获取帧数，值为false时获取时间(单位ms)，默认为false ```js this.controller.getDuration(true); ``` - 添加侦听事件 > 注意：添加事件监听，回调函数需预先定义 | 序号 | 事件名称 | 说明 | |----|---------------|-----------------| | 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 | 图片数据获取失败 | ```js AnimationEventName = 'drawFrame' | 'enterFrame' | 'loopComplete' | 'complete' | 'segmentStart' | 'destroy' | 'config_ready' | 'data_ready' | 'DOMLoaded' | 'data_failed' | 'loaded_images'; this.controller.addEventListener('loopComplete', (): void => { console.info("loopComplete"); }) ``` - 删除侦听事件 > 注意：移除事件监听，可选择设置执行完成后的回调函数 ```js AnimationEventName = 'drawFrame' |'enterFrame' | 'loopComplete' | 'complete' | 'segmentStart' | 'destroy' | 'config_ready' | 'data_ready' | 'DOMLoaded' | 'data_failed' | 'loaded_images'; this.controller.removeEventListener('loopComplete', (): void => { console.info("loopComplete"); }) ``` - 更改动画渲染颜色 > 注意：第一个参数代码图层名称，第二个参数是颜色的RGB或者RGBA值。 > 颜色取值0-255,透明度取值0-1.0 ```js this.controller.changeColor("**.Layer 1 Outlines.**",[255,150,203]) //修改某一个元素的颜色,不带透明度 //或 this.controller.changeColor("**.Layer 1 Outlines.**",[255,150,203,1.0]) //修改某一个元素的颜色,带透明度 ``` - 更改关键帧动画渲染颜色 > 注意：第一个参数代码图层名称，第二和第三个参数是关键帧的起始和结束RGB或者RGBA值。 > 颜色取值0-255,透明度取值0-1.0 ```js this.controller.changeColor("**.Layer 1.**",[255,0,0],[0,0,255]) //修改某一个关键帧的颜色,不带透明度 或 this.controller.changeColor("**.Layer 1.**",[255,0,0,0],[0,0,255,1]) //修改某一个关键帧的颜色,带透明度 ``` - 动画填充模式 > 注意：动画填充模式共有5种：Fill,Cover,Top,Bottom,Contain，其中默认的填充模式是：Contain ```js this.controller.setContentMode('Fill'); ``` - 设置动画的刷帧率 > 注意：设置动画animator的刷帧率，范围是1~120 帧率越大，功耗越严重 ```js this.controller.setFrameRate(30); ``` - 清除缓存文件 > 注意：container是与canvas组件绑定的上下文CanvasRenderingContext2D,用于本地资源路径json文件 ```js lottie.clearFileCache() //清除所有动画缓存文件 或 lottie.clearFileCache('https://p3-dcd.byteimg.com/obj/motor-mis-img/5ec2c8af22bc17aedafe147a1d38f21d.json') //清除指定动画缓存文件 或 lottie.clearFileCache('common/lottie/data_url.json') //清除指定本地动画中网络资源缓存文件 ``` - 设置资源文件替换 > 在 lottieView中setImageAssetDeleGate参数使用，可替换带有image资源的动画，支持base64和uri替换 ```js LottieView({ loop: false, autoplay: true, path: $rawfile('common/lottie/data_url.json'), contentMode: 'Contain', controller: this.controller, setImageAssetDeleGate: [ ["Aa19853e5c3b98a7b8dde147916d26f78", "data:image/png;base64,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" ], ["A03f28381d26fd5395bd21ce286baa307", "https://mdn.alipayobjects.com/promo_creative/afts/img/A*MATXSZwDLqwAAAAAAAAAAAAAAVR1AQ/original" ], ] }) ``` - 设置动画重载 > 销毁后执行重载无效，支持的参数如下 * path?: string | Resource * animationData?: string; * loop?: boolean | number * autoplay?: boolean * initialSegment?: AnimationSegment * contentMode?: string * frameRate?: number * setImageAssetDeleGate?: ImageAssetDeleGate[]; ```js this.controller.reload({ loop: true, autoplay: true, path: $rawfile('common/lottie/animation.json') }) ``` - 设置尽可能更新动画帧率 > 默认为true，实现小数帧插值 ```js this.controller.setSubframe(true) ``` ## LottieView参数说明 | 参数名称 | 参数类型 | 参数说明 | |------------------------------------|----------|----------------------------------------| | lottieId | 字符串 | 应用内的唯一id | | path | 字符串/资源文件 | 应用内的动画数据文件路径, 仅限json格式 | | animationData | 字符串 | json格式的动画数据, 仅限json字符串格式，优先级高于path | | loop?: boolean｜number | 布尔值/正整数 | 是否循环播放/循环次数 | | autoplay?: boolean; | 布尔值 | 是否自动播放 | | initialSegment?: AnimationSegment; | 数组 | 初始化动画资源播放时的整体帧范围:[1-60] | | contentMode?: string; | 字符串 | 动画填充模式，取值Fill,Cover,Top,Bottom,Contain | | 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] | ## LottieView接口说明 ```js LottieView({ loop: true, //是否循环 autoplay: true, //自动播放 lottieId: "lottie1" + this.getUniqueId(),//id contentMode: 'Contain', //填充模式 path: $rawfile('common/lottie/animation.json'), //动画路径 animationData: "",//仅限json字符串格式，优先级高于path frameRate: 30,//播放帧率 useCache: false,//不使用缓存 autoSkip: false,//不可见时继续绘制，默认为true controller: this.controller, //动画控制器 initialSegment: [30, 150],//初始化动画资源播放时的整体帧范围 listener: this.listener, //监听事件容器 setImageAssetDeleGate: [ ["A03f28381d26fd5395bd21ce286baa307", "https://mdn.alipayobjects.com/promo_creative/afts/img/A*MATXSZwDLqwAAAAAAAAAAAAAAVR1AQ/original" ], ]//替换图片资源文件 }) ``` ## 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 为时间ms | | 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 (缓存键) | 通过缓存键移除缓存 | ## 与LottieArkts特性对比 - 方法对比 | 接口 | 描述 | **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 | 动画填充模式 | 是 | 是 | ## 约束与限制 在下述版本可验证使用： DevEco Studio: 5.0.4 Release(5.0.11.100), SDK: API16(5.0.0.150) ## 目录结构 ```` /lottiePro # 项目根目录 ├── entry # 示例代码文件夹 ├── library # lottiePro库文件夹 │ └─ src/main │ └─ cpp/types │ └─ napi_init.cpp # │ └─ ets │ ├── components # LottieView组件 │ ├── model # 类型定义 │ ├── Lottie.ets # lottiePro全局lottie声明 ├── README.md # 安装使用方法 ├── README_zh.md # 安装使用方法 ```` ## 贡献代码 使用过程中发现任何问题都可以提交 [Issue](https://gitee.com/openharmony-tpc-incubate/lottie-c/issues) ，当然，也非常欢迎提交 [PR](https://gitee.com/openharmony-tpc-incubate/lottie-c/pulls) 。 ## 开源协议 本项目遵循 [MIT License](https://gitee.com/openharmony-tpc-incubate/lottie-c/blob/master/LICENSE)。