# ohos_apng **Repository Path**: NucleusUI/ohos_apng ## Basic Information - **Project Name**: ohos_apng - **Description**: ohos_apng是基于apng-js 1.1.2版本，通过重构解码算法，拆分出apng里各个帧图层的数据；使用arkts能力，将每一帧数据组合成imagebitmap，使用定时器调用每一帧数据 通过canvas渲染，从而达到帧动画效果.对外提供解码渲染能力。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: https://gitee.com/openharmony-sig/ohos_apng - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 17 - **Created**: 2024-09-27 - **Last Updated**: 2024-09-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # APNG ## 简介 ohos_apng是以开源库[apng-js](https://github.com/davidmz/apng-js)为参考，基于1.1.2版本，通过重构解码算法，拆分出apng里各个帧图层的数据；使用arkts能力，将每一帧数据组合成imagebitmap，使用定时器调用每一帧数据 通过canvas渲染，从而达到帧动画效果.对外提供解码渲染能力。 #### 效果图如下： ![演示示例](./preview.gif) ## 下载安装 ``` ohpm install @ohos/apng ``` OpenHarmony ohpm 环境配置等更多内容，请参考 [如何安装 OpenHarmony ohpm 包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md) ## 使用说明 ``` 1、如果是在HSP模块中使用，可以使用两种方式传入Context上下文对象： 1).在EntryAbility文件引入 import { GlobalContext } from '@ohos/apng' 在onCreate函数中调用，传入上下文对象，用作后续读取本地图片资源文件 示例： GlobalContext.getContext().setObject('MainContext',this.context); 2).在使用组件的时候通过参数传入Context对象： 示例： apng({ src: $r('app.media.stack'), speedRate: this.speedRate, context: getContext() }) ``` ``` 2、引入 import {apng, ApngController} from '@ohos/apng'; 示例1： apng({ src: $r('app.media.stack'), //图片资源 speedRate: 1 //动画倍速 }) 示例2： apng({ src: 'https://gitee.com/openharmony-sig/ohos_apng/raw/master/entry/src/main/resources/base/media/stack.png', // 网络资源连接 speedRate: 1 //动画倍速 }) 示例3： apng({ src: this.srcUint8Array, // Uint8Array对象资源 speedRate: 1 //动画倍速 }) 示例4： apng({ src: getContext().filesDir + '/stack.png', // 沙箱路径 speedRate: 1 //动画倍速 }) 示例5： apng({ src: $r('app.media.stack'), //设置图片资源 speedRate: this.speedRate, //设置动画倍速 apngWidth: 200, //设置动图的宽度 apngHeight: 200 //设置动图的高度 }) 示例6： controller: ApngController = new ApngController(); 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,frequency:number,animationEndStatus: PlayStatus.PAUSE \| PlayStatus.STOP) | src：图片资源，支持本地资源，网络图片以及Uint8Array三种格式
speedRate：动画倍速，默认值为1,取值范围(0.1~2)
apngWidth：图片宽度，默认原图宽度(支持vp及px单位，默认vp)
apngHeight：图片高度，默认原图高度(支持vp及px单位，默认vp)
context：上下文对象，默认为null 。 ,
`frequency`:用来控制播放动画次数，默认为0，0是循环播放，>0 按照设置的次数来播放,
`animationEndStatus`:当到达最大播放次数时，动画是需要暂停保持现状，还是要恢复到初始状态。默认是 PlayStatus.STOP,恢复初始状态 | apng图片展示 | | 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 | |---- 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 # 安装使用方法 ``` ## 贡献代码 使用过程中发现任何问题都可以给我们提[Issue](https://gitee.com/openharmony-sig/ohos_apng/issues)，当然，我们也非常欢迎你给我们提[PR](https://gitee.com/openharmony-sig/ohos_apng/pulls)。 ## 开源协议 本项目基于 [MIT](https://gitee.com/openharmony-sig/ohos_apng/blob/master/LICENSE.txt) ，请自由地享受和参与开源。