简介
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 //设置动图的高度
})
DD一下：欢迎大家关注工粽号<程序猿百晓生>，可以了解到以下知识点。
`欢迎大家关注工粽号<程序猿百晓生>，可以了解到以下知识点。`
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案）
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......
示例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));
接口说明
| 接口 | 参数 | 功能 |
|---|---|---|
| apng(src: Resource/Uint8Array/string, speedRate: number, apngWidth: string/number/Resource, apngHeight: string/number/Resource, context: Context) | src：图片资源，支持本地资源，网络图片以及Uint8Array三种格式 speedRate：动画倍速，默认值为1,取值范围(0.1~2) apngWidth：图片宽度，默认原图宽度(支持vp及px单位，默认vp) apngHeight：图片高度，默认原图高度(支持vp及px单位，默认vp) context：上下文对象，默认为null | apng图片展示(@Component实现)。 |
| apngV2(src: Resource/Uint8Array/string, speedRate: number, apngWidth: string/number/Resource, apngHeight: string/number/Resource, context: Context) | src：图片资源，支持本地资源，网络图片以及Uint8Array三种格式 speedRate：动画倍速，默认值为1,取值范围(0.1~2) apngWidth：图片宽度，默认原图宽度(支持vp及px单位，默认vp) apngHeight：图片高度，默认原图高度(支持vp及px单位，默认vp) context：上下文对象，默认为null | apng图片展示(@ComponentV2实现)。 |
| GlobalContext.getContext().setObject(key: string,objectClass: Object) | key：上下文对象对应的key,固定值 "MainContext" objectClass:上下文对象(this.context) | 在EntryAbility文件设置上下文对象 |
| Apng.getInstance().setEnableCache(enableCache: boolean) | enableCache：是否开启内存缓存，默认false | 开启或关闭内存缓存 |
| Apng.getInstance().removeAllMemoryCache(); | 清空全部内存缓存 | |
| Apng.getInstance().removeMemoryCache(src?: ResourceStr / Uint8Array); | src：图片资源，支持本地资源，网络图片以及Uint8Array三种格式 | 清除指定图片的内存缓存 |
| Apng.getInstance().initMemoryCache(newMemoryCache: IMemoryCache) | 自定义内存缓存策略，支持设置内存缓存的大小 | 自定义内存缓存策略，设置内存缓存的大小 |
| ApngController.play() | Apng播放控制，播放Apng图片，默认开启播放 | |
| ApngController.puase() | Apng播放控制，暂停播放Apng图片 | |
| ApngController.stop() | Apng播放控制，停止播放Apng图片 |
约束与限制
在下述版本验证通过：
DevEco Studio NEXT Developer Beta3: 5.0 (5.0.3.530), SDK: API12 (5.0.0.35(SP3))
目录结构
|---- apng
| |---- entry # 示例代码文件夹
| |---- library # apng库文件夹
| |---- src
| |---- main
| |---- ets
| |---- components
| |---- apng.ets # 处理apng拆解后的每一帧，每一帧通过canvas绘制成apng,apng的@Component版本
| |---- apngV2.ets # 处理apng拆解后的每一帧，每一帧通过canvas绘制成apng,apng的@ComponentV2版本
| |---- crc32.ets # 用作数据传输和存储中的错误检测
| |---- GlobalContext.ets # 创建了一个全局类，用来获取数据对象或者设置对象的值
| |---- manager.ets # 读取本地apng文件，获取到文件buffer对象
| |---- parser.ets # 对buffer对象进行拆解
| |---- structs.ets # 创建了两个类，APNG类指的是整个APNG动画，包括宽度、高度、播放次数、播放时间和帧列表等属性，Frame类指的是APNG动画中的每一帧
| |---- utils # 工具类相关
| |---- Apng.ets # Apng门面，app持久化类
| |---- ApngDispatcher.ets # Apng图片请求排队分发处理类
| |---- ApngRequest.ets # Apng图片请求参数封装
| |---- README_zh.MD # 安装使用方法
