OpenHarmony轻松玩转GIF数据渲染

OpenAtom OpenHarmony（以下简称“OpenHarmony”）提供了Image组件支持GIF动图的播放，但是缺乏扩展能力，不支持播放控制等。今天介绍一款三方库——ohos-gif-drawable三方组件，带大家一起玩转GIF的数据渲染，搞定GIF动图的各种需求。

效果演示

本文将从5个小节来带领大家使用ohos-gif-drawable这一款三方库，其中1、2、3这3个小节，主要介绍了ohos-gif-drawable的核心能力、GIF软解码和GIF绘制。4和5小节主要是扩展讨论，如何添加滤镜效果和软解码遇到的耗时问题。

1.GIF的文件格式理论基础

工欲善其事必先利其器。首先我们需要为自己打下理论基础。了解GIF的数据格式，为后续解码GIF提供理论支持。

通过学习GIF的文件格式，我们对于GIF的组成格式有了一定的了解，并且有助于理解后面GIF的解码。

在开始介绍之前，我想让大家了解一下整体的结构思路如下图：

其中gifuct-js三方库主要完成了解码的工作。

ohos-gif-drawable三方库则是在gifuct-js的三方库之上，进行了封装。并结合了OpenHarmony的Canvas绘制能力，达到了播放和控制GIF的能力。

2.GIF软解码：gifuct-js三方库介绍

GIF解码我们使用了gifuct-js这个库，它是一个纯JavaScript的GIF解码库。首先我们需要了解基础用法。

2.1 参考样例将一个文件ArrayBuffer转换为GIF解码后的帧数据数组。

//javascript
var gif = parseGIF(arraybuffer)
var frames = decompressFrames(gif, true)

2.2 由于OpenHarmony的Image生成PixelMap需要的数据是BGRA数据，而2.1生成的frames所有数组中的patch字段则是RGBA数据，所以我们需要使用

//javascript
var gif = parseGIF(arraybuffer)
var frames = decompressFrames(gif, false)

然后将frame目前还未生成的patch字段数据，通过generatePatch 函数，将RGBA的数据更换为BGRA即可，如下代码所示：

//javascript
const generatePatch = image => {
  const totalPixels = image.pixels.length
  const patchData = new Uint8ClampedArray(totalPixels * 4)
  for (var i = 0; i < totalPixels; i++) {
    const pos = i * 4
    const colorIndex = image.pixels[i]
    const color = image.colorTable[colorIndex] || [0, 0, 0]
    patchData[pos] = color[2] // B
    patchData[pos + 1] = color[1]// G
    patchData[pos + 2] = color[0] // R
    patchData[pos + 3] = colorIndex !== image.transparentIndex ? 255 : 0//A
  }
  return patchData
}

generatePatch函数，在这里会根据颜色表colorTable和基于颜色表的图像数据pixels以及透明度transparentIndex生成BGRA格式的patchData，这个数据和Canvas中getImageData获取的ImageData数据是一致的，都是Uint8ClampedArray类型，可以直接使用putImageData让canvas绘制。

最后，生成的patchData赋值给Frame的patch字段。

这里我们并没有直接使用Canvas的putImageData直接绘制。为了提升扩展性，我们使用了Image的能力来生成PixelMap，这样处理为后续滤镜效果提供了可能，也方便后续绘制流程。

好了，到这里我们就基本上把gifuct-js库的基础使用简单介绍完了。

如何使用GIF：ohos-gif-drawable三方库的介绍。

我们先来看看整个ohos-gif-drawable组件的模型图，通过模型图，我们可以看到，用户只要关注GIFComponent组件，和GIFComponent.ControllerOptions配置参数以及控制参数autoPlay和resetGif即可，非常简单！

1. 支持的功能列表如下

● 支持播放GIF图片。
● 支持控制GIF播放/暂停。
● 支持重置GIF播放动画。
● 支持调节GIF播放速率。
● 支持监听GIF所有帧显示完成后的回调。
● 支持设置显示大小。
● 支持7种不同的展示类型。
● 支持设置显示区域背景颜色。

2. 如何使用ohos-gif-drawable

首先需要使用npm下载ohos-gif-drawable三方库

npm install @ohos/ohos-gif-drawable --save

接下来我们需要配置一个worker给gifuct-js解码使用。

配置worker，在应用工程的entry/src/main/ets/pages目录下新建workers文件夹，并且创建文件 gifParseWorker.ts ，文件内容如下：

import arkWork