OpenHarmony三方组件:lottieETS
简介
lottie是一个适用于OpenHarmony的动画库,它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画,并在移动设备上进行本地渲染。
下载安裝
OpenHarmony npm环境配置等更多内容,请参考 如何安装OpenHarmony npm包 。
使用说明
前提:数据准备
lottie动画文件是由设计人员使用Adobe After Effects软件通过bodymovin插件导出json格式的文件。
AE软件创建动画时需要设置动画的宽(w)、高(h)、bodymovin插件的版本号(v)、帧率(fr)、开始帧(ip)、 结束帧(op)、静态资源信息(assets)、图层信息(layers)等重要信息。
如果仅是用于demo测试,可以使用工程示例中的json文件 。
1.在相应的类中引入组件:
2.构建渲染上下文
3.將动画需要的json文件放到pages同级别目录下,然后引用。(json路径为entry/src/main/ets/common/lottie/data.json)
注意:json文件路径不能使用 ./ 或者 ../ 等相对路径,相对路径获取不到动画源数据,会导致动画加载不出来,
传递给loadAnimation 方法的路径是相对于pages父文件夹为基准的,而index页面内引入的相对路径的动画是以index.ets文件为基准的,两者基准不一致。
所以如果json文件放置在pages文件夹下,路径应为 'pages/common/data.json' 样式
4.关联画布
5.加载动画
- 加载动画的时机需要注意,点击按钮加载动画可按照正常逻辑放在点击事件内,如果想要实现进入页面自动播放动画,需要结合Canvas组件的onReady()生命回调周期实现,加载动画时机需放置在onReady()生命周期回调内或及之后。
- 同一Canvas组件加载多次/不同动画资源,需要手动销毁动画(lottie.destroy()/animationItem.destroy()),之后才可再次加载其他动画资源。
- 加载动画时,path 参数和 animationData 参数,二者选其一。
- path 参数:只支持加载entry/src/main/ets 文件夹下的相对路径,不支持跨包查找文件。
- animationData 参数:可结合ResourceManager进行读取资源文件内容进行设置。
6.控制动画
- 播放动画
- 停止动画
- 暂停动画
- 切换暂停/播放
- 设置播放速度
注意:speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放
- 设置动画播放方向
注意:direction 1为正向,-1为反向
- 销毁动画
注意:页面不显示或退出页面时,需要销毁动画; 可配合页面生命周期aboutToDisappear()及onPageHide(),或者Canvas组件的onDisAppear()使用
- 控制动画停止在某一帧或某一时刻
注意:根据第二个参数判断按帧还是按毫秒控制,true 按帧控制,false 按时间控制,缺省默认为false
- 控制动画从某一帧或某一时刻开始播放
注意:根据第二参数判断按帧还是按毫秒控制,true 按帧控制,false 按时间控制,缺省默认为false
- 限定动画资源播放时的整体帧范围,即设置动画片段
- 播放动画片段
注意:第二参数值为true立刻生效, 值为false循环下次播放的时候生效
- 重置动画播放片段,使动画从起始帧开始播放完整动画
注意:参数值为true立刻生效, 值为false循环下次播放的时候生效
- 获取动画时长/帧数
注意:参数值为true时获取帧数,值为false时获取时间(单位ms)
- 添加侦听事件
注意:添加和移除的事件监听,回调函数需是同一个,需预先定义,否则将不能正确移除
- 移除侦听事件
接口说明
使用方法 | 类型 | 相关描述 |
play() | name? | 播放 |
stop() | name? | 停止 |
pause() | name? | 暂停 |
togglePause() | name? | 切换暂停 |
destroy() | name? | 销毁动画 |
goToAndStop() | value, isFrame?, name? | 跳到某一时刻并停止 |
goToAndPlay() | value, isFrame?, name? | 跳到某一时刻并播放 |
setSegment() | init,end | 设置动画片段 |
playSegments() | arr, forceFlag | 播放指定片段 |
resetSegments() | forceFlag | 重置动画 |
setSpeed() | speed | 设置播放速度 |
setDirection() | direction | 设置播放方向 |
getDuration() | isFrames? | 获取动画时长 |
addEventListener() | eventName,callback | 添加监听状态 |
removeEventListener() | name,callback? | 移除监听状态 |
兼容性
- DevEco Studio 版本:DevEco Studio 3.1 Beta1及以上版本。
- OpenHarmony SDK版本:API version 9 及以上版本。
目录结构
贡献代码
使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR 。
开源协议
本项目基于 MIT License ,请自由地享受和参与开源。
遗留问题
- 不支持HTML渲染方式
- 不支持SVG渲染中filter效果
- 不支持SVG渲染中mask部分特性
- 不支持渲染本地图片及网络图片资源
- 不支持组件控制动画显示、隐藏、resize
- 不支持注册动画
- 不支持查找动画
- 不支持更新动画数据
- 不支持部分效果
- 不支持含有表达式的动画
文章转载自: https://gitee.com/openharmony-tpc/lottieETS#%E7%AE%80%E4%BB%8B