harmony_flutter APNG 用法
作者:flfljh
- 2024-12-19 湖南
本文字数:1851 字
阅读完需:约 6 分钟
简介
ohos_apng 是以开源库apng-js为参考,基于 1.1.2 版本,通过重构解码算法,拆分出 apng 里各个帧图层的数据;使用 arkts 能力,将每一帧数据组合成 imagebitmap,使用定时器调用每一帧数据 通过 canvas 渲染,从而达到帧动画效果.对外提供解码渲染能力。
下载安装
ohpm install @ohos/apng
复制代码
使用说明
1、如果是在HSP模块中使用,可以使用两种方式传入Context上下文对象:
1).在EntryAbility文件引入 import { GlobalContext } from '@ohos/apng'
在onCreate函数中调用,传入上下文对象,用作后续读取本地图片资源文件
示例:
GlobalContext.getContext().setObject('MainContext',this.context);
2).在使用组件的时候通过参数传入Context对象:
示例:
apngV2({
src: $r('app.media.stack'),
speedRate: this.speedRate,
context: getContext()
})
apng({
src: $r('app.media.stack'),
speedRate: this.speedRate,
context: getContext()
})
复制代码
2、引入 import {apng, ApngController} from '@ohos/apng';
示例1:
apngV2({
src: $r('app.media.stack'), //图片资源
speedRate: 1 //动画倍速
})
apng({
src: $r('app.media.stack'), //图片资源
speedRate: 1 //动画倍速
})
示例2:
apngV2({
src: 'https://gitee.com/openharmony-sig/ohos_apng/raw/master/entry/src/main/resources/base/media/stack.png', // 网络资源连接
speedRate: 1 //动画倍速
})
apng({
src: 'https://gitee.com/openharmony-sig/ohos_apng/raw/master/entry/src/main/resources/base/media/stack.png', // 网络资源连接
speedRate: 1 //动画倍速
})
示例3:
apngV2({
src: this.srcUint8Array, // Uint8Array对象资源
speedRate: 1 //动画倍速
})
apng({
src: this.srcUint8Array, // Uint8Array对象资源
speedRate: 1 //动画倍速
})
示例4:
apngV2({
src: getContext().filesDir + '/stack.png', // 沙箱路径
speedRate: 1 //动画倍速
})
apng({
src: getContext().filesDir + '/stack.png', // 沙箱路径
speedRate: 1 //动画倍速
})
示例5:
apngV2({
src: $r('app.media.stack'), //设置图片资源
speedRate: this.speedRate, //设置动画倍速
apngWidth: 200, //设置动图的宽度
apngHeight: 200 //设置动图的高度
})
apng({
src: $r('app.media.stack'), //设置图片资源
speedRate: this.speedRate, //设置动画倍速
apngWidth: 200, //设置动图的宽度
apngHeight: 200 //设置动图的高度
})
示例6:
controller: ApngController = new ApngController();
apngV2({
src: $r('app.media.stack'), //设置图片资源
speedRate: this.speedRate, //设置动画倍速
apngWidth: 200, //设置动图的宽度
apngHeight: 200 //设置动图的高度
controller: this.controller
})
apng({
src: $r('app.media.stack'), //设置图片资源
speedRate: this.speedRate, //设置动画倍速
apngWidth: 200, //设置动图的宽度
apngHeight: 200 //设置动图的高度
controller: this.controller
})
this.controller.pause();
this.controller.stop();
示例7:
aboutToAppear() {
emitter.on("ohos-apng", (data) => {
console.log('data', JSON.stringify(data))
})
}
复制代码
3、自定义内存缓存使用
支持自定义内存缓存策略,支持设置内存缓存的大小(默认LRU策略)。
Apng.getInstance().initMemoryCache()
内存缓存默认关闭,开启/关闭内存缓存:
Apng.getInstance().setEnableCache(enableCache: boolean)
清空全部内存缓存:
Apng.getInstance().removeAllMemoryCache();
清空指定内存缓存:
Apng.getInstance().removeMemoryCache(src);
自定义内存缓存大小:
Apng.getInstance().initMemoryCache(new MemoryLruCache(200, 128 * 1024 * 1024));
复制代码
划线
评论
复制
发布于: 2024-12-19阅读数: 3
flfljh
关注
还未添加个人签名 2024-10-29 加入
还未添加个人简介
评论