apng4cj

简介

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

Feature

• 🚀 支持本地上传apng文件
• 🚀 支持解析apng文件并播放

使用说明

编译构建

1. 通过module引入
   1. 克隆下载项目
   2. 将library模块拷贝到应用项目下
   3. 修改自身应用 entry 下的 oh-package.json5 文件，在 dependencies 字段添加 "apng": "file:../apng"

      {
         "name": "entry",
         "version": "1.0.0",
         "description": "Please describe the basic information.",
         "main": "",
         "author": "",
         "license": "",
        "dependencies": {
            "recyclerview": "file:../apng"
        }
      }
      

   4. 修改自身应用 entry/src/main/cangjie 下的 cjpm.toml 文件，在 [dependencies] 字段下添加

      [dependencies.apng]
        path = "../../../../apng/src/main/cangjie"
        version = "1.0.0"
      

      toml变为

      [dependencies]
        [dependencies.cj_res_entry]
          path = "./cj_res"
          version = "1.0.0"
        [dependencies.apng]
          path = "../../../../apng/src/main/cangjie"
          version = "1.0.0"
      

   5. 在项目中使用 import recyclerview.* 引用该项目

      import apng.*
      

接口说明

主要类和函数接口说明详见 API

预览效果

功能示例

@Entry
@Component
class SingleApngV1 {
    var scroller: Scroller = Scroller()

    func build() {
        Flex(FlexParams(direction: FlexDirection.Column)) {
            Flex(FlexParams(justifyContent: FlexAlign.SpaceBetween)) {
                Button("back").onClick({
                    _ => Router.back()
                })
            }.margin(20)

            Column() {
                Scroll() {
                    Column() {
                        Text("资源文件图片")
                        Row() {
                          ApngComponent(
                                apngWidth : 100.0,
                                apngHeight : 100.0,
                                src: @r(app.media.stack),
                                speedRate: 1,
                                controller: ApngController(),
                          )
                        }
                        .width(100.percent)
                        .height(30.percent)
                        .justifyContent(FlexAlign.Center)
                    }
                }
            }.margin(left: 16, right: 16)
        }
    }
}

约束与限制

当前基于 deveco-studio-5.0.3.910 版本实现

目录结构

|---- apng
|     |---- entry # 示例代码文件夹
|     |---- apng # apng库文件夹
|           |---- src
|                 |---- main
|                       |---- cangjie
|                             |---- src
|                                   |---- apng_component.ets # 处理apng拆解后的每一帧，每一帧通过canvas绘制成apng,apng的@Component版本
|                                   |---- crc32.ets # 用作数据传输和存储中的错误检测
|                                   |---- global_context.ets # 创建了一个全局类，用来获取数据对象或者设置对象的值
|                                   |---- apng_manager.ets # 读取本地apng文件，获取到文件buffer对象
|                                   |---- parser.ets # 对buffer对象进行拆解
|                                   |---- structs.ets # 创建了两个类，APNG类指的是整个APNG动画，包括宽度、高度、播放次数、播放时间和帧列表等属性，Frame类指的是APNG动画中的每一帧
|                                   |---- utils # 工具类相关
|                                   |---- apng.ets  # Apng门面，app持久化类
|                                   |---- apng_dispatcher.ets # Apng图片请求排队分发处理类
|                                   |---- apng_request.ets # Apng图片请求参数封装
|     |---- README_zh.MD # 安装使用方法

贡献代码

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

开源协议

本项目基于 Apache License 2.0 ，请自由地享受和参与开源。