ohos-gif-drawable

ohpm install @ohos/gif-drawable

import { GIFComponent, ResourceLoader } from '@ohos/gif-drawable'
// gif绘制组件用户属性设置
@State model:GIFComponent.ControllerOptions = new GIFComponent.ControllerOptions();
// 是否自动播放
@State gifAutoPlay:boolean = true;
// 重置GIF播放，每次取反都能生效
@State gifReset:boolean = true;

// 在ARKUI的其他容器组件中添加该组件 如果需要绑定滚动组件内部可见/不可见状态 gif自动暂停开始播放能力,只需要加上bindScroller字段即可。
GIFComponent({model:$model, autoPlay:$gifAutoPlay, resetGif: $gifReset})

// 关闭动画			
this.gifAutoPlay = false;
// 销毁上一次资源
this.model.destroy();
// 新创建一个modelx，用于配置用户参数
let modelx = new GIFComponent.ControllerOptions()
modelx
  // 配置回调动画结束监听，和耗时监听	
  .setLoopFinish((loopTime) => {
   this.gifLoopCount++;
   this.loopHint = '当前gif循环了' + this.gifLoopCount + '次,耗时=' + loopTime + 'ms'
   })
  // 设置图像和组件的适配类型
  .setScaleType(this.scaleType)
  // 设置播放速率
  .setSpeedFactor(this.speedFactor)
// 加载网络图片,getContext(this)中的this指向page页面或者组件都可以
ResourceLoader.downloadDataWithContext(getContext(this), {
   url: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700'
   }, (sucBuffer) => {
    // 网络资源sucBuffer返回后处理
   modelx.loadBuffer(sucBuffer, () => {
   
   console.log('网络加载解析成功回调绘制！')
    // 开启自动播放   
   this.gifAutoPlay = true;
    // 给组件数据赋新的用户配置参数，达到后续gif动画效果   
   this.model = modelx;
   })
}, (err) => {
   // 用户根据返回的错误信息，进行业务处理(展示一张失败占位图、再次加载一次、加载其他图片等)
})

export class GIFFrame {

    // 显示帧 width 宽  height 高 top上边距 left左边距
    dims: { width: number; height: number; top: number; left: number}

    // 当前帧的像素数据指向的颜色数组
    colorTable?: [number, number, number][]

    // 当前帧到下一帧的间隔时长
    delay: number

    // 当前帧绘制要求 0保留 1在上一帧绘制此帧 2恢复画布背景 3.将画布恢复到绘制当前图像之前的先前状态
    disposalType: number

    // Uint8CampedArray颜色转换后的补片信息用于绘制
    patch: Uint8ClampedArray
    
    // 由patch生成的pixelmap图像
    drawPixelMap

    // 当前帧每个像素的颜色表查找索引
    pixels?: number[]

    // 表示透明度的可选颜色索引
    transparentIndex: number
}

|---- ohos-gif-drawable
|     |---- entry  # 示例代码文件夹
			|----pages # 页面测试代码
				|----index.ets #测试文件列表
				|----sample1TestCasePage.ets 		#硬解码GIF范例demo
				|----sample2TestCasePage.ets 		#软解码GIF范例demo
				|----networkLoadTestCasePage.ets	#软解码测试网络文件下载
				|----loadResourceAndRawFilePage.ets #软解码测试工程文件加载
				|----loadStringAndBufferPage.ets	#软解码测试app文件路径加载
|     |---- screenshots #截图
|     |---- library  # ohos-gif-drawble库文件夹
|           |---- src  # ohos-gif-drawble gif解析渲染核心代码
				|---- display #组件展示渲染相关
				|---- parse   #gif解析相关
				|---- utils   #工具方法相关
|           |---- index.ets  # ohos-gif-drawble 对外暴露接口
|     |---- README.MD  # 安装使用方法