克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

APNG

简介

ohos_apng是以开源库apng-js为参考,基于1.1.2版本,通过重构解码算法,拆分出apng里各个帧图层的数据;使用arkts能力,将每一帧数据组合成imagebitmap,使用定时器调用每一帧数据 通过canvas渲染,从而达到帧动画效果.对外提供解码渲染能力。

效果图如下:

演示示例

下载安装

ohpm install @ohos/apng

OpenHarmony ohpm 环境配置等更多内容,请参考 如何安装 OpenHarmony ohpm 包

使用说明

  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) src:图片资源,支持本地资源,网络图片以及Uint8Array三种格式
speedRate:动画倍速,默认值为1,取值范围(0.1~2)
apngWidth:图片宽度,默认原图宽度(支持vp及px单位,默认vp)
apngHeight:图片高度,默认原图高度(支持vp及px单位,默认vp)
context:上下文对象,默认为null
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.MD # 安装使用方法

贡献代码

使用过程中发现任何问题都可以给我们提Issue,当然,我们也非常欢迎你给我们提PR

开源协议

本项目基于 MIT ,请自由地享受和参与开源。

The MIT License (MIT) Copyright (c) 2016 David Mzareulyan Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

ohos_apng是基于apng-js 1.1.2版本,通过重构解码算法,拆分出apng里各个帧图层的数据;使用arkts能力,将每一帧数据组合成imagebitmap,使用定时器调用每一帧数据 通过canvas渲染,从而达到帧动画效果.对外提供解码渲染能力。 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化