浅谈HarmonyOS Glide组件的GIF能力 原创 精华

HarmonyOS Glide组件是一款非常优秀的图片处理工具，不仅支持多种格式图片的加载，而且采用磁盘缓存和内存缓存方式实现图片的预加载，同时还能指定图片缓存大小，节省内存。本文将通过介绍Glide组件的GIF能力，来解读Glide加载资源的过程。

通过以上GIF可以看到，一张网络上的GIF图片已经被成功下载，并且展示到Image控件上了。
 
我们到底做了什么？实际上核心的代码就只有这一段而已：

Glide.with(classcontext)
     .asGif()
     .load(uri)
     .into(image);

虽说只有这简简单单的一段代码，但大家可能不知道的是，Glide在背后帮我们默默执行了成吨的工作。下面，我们将围绕着这段简单的代码，来解读Glide加载GIF的过程。

一、加载过程与数据转换

在开始解读Glide加载GIF的过程之前，先说明一下图片的加载过程以及图片加载过程中的数据转换，便于后面对整个过程的理解。如下所示，是GIF的加载过程：

如下所示，是GIF加载过程中的数据转换：

1、load状态传入的model类型
 
2、request状态获取的数据类型
 
3、原数据经过decoder和transcode之后的数据类型
 
4、transformation变换
 
5、animation加载动画实现

二、Glide.With()

with()方法是Glide类中的一组静态方法，用于获取RequestManager对象。Glide.with(Context)流程如下所示：

 
1.通过Glide.get(context)初始化Glide
 
2.通过GlideBuilder初始化各项配置
 
3.返回requestManagerRetriever对象
 
4.调用RequestManagerRetriever中的get方法，通过RequestManagerFactory中的build()方法创建并返回了RequestManager，用于管理Glide的请求。

三、Glide.asGif()

通过asGif()方法，规定了最后资源转化类型为 GifDrawable。如果加载的资源不是GIF，则将操作失败。
 
这里需要注意的是如果加载的是GIF文件，即使没有使用asGif()方法，但只要配合DraweeView使用，最终解析还是会走GIF流程。如果用户希望解析的GIF显示为一张单帧图片，那么一定要在asBitmap ()方法中声明需求，让Glide知道需要的仅仅是一张单帧图片而非GIF。

四、Glide.load()

load()方法用于创建一个目标为Drawable的图片加载请求，传入需要加载的资源（String,URL,URI等）。由于with()方法返回的是一个RequestManager对象，那么很容易就能想到，load()方法是在RequestManager类当中。通过调用asDrawable()方法，创建一个目标为Drawable的图片加载请求RequestBuilder。
 
load方法比较简单，流程也比较清晰，主要是保存用户传入的参数,包括load传入的model和RequestOption构建的参数都会被记录保存，用于后续构建Request使用。如下所示：

五、Glide.into()

如果说前面都是在准备开胃小菜的话，那么现在终于要进入主菜了，因为into()方法是整个Glide图片加载流程中逻辑最复杂的地方，into()方法的作用是在子线程中网络请求解析图片，并回到主线程中绘制图片。由于into()过程非常复杂，所以我们将这部分拆分为三个小节进行讲解。

1.资源加载

Into()方法从load()创建的图片加载请求RequestBuilder开始。资源加载过程中，通过onSizeReady()函数获取image控件的宽和高。如果已知控件宽、高则直接进入onSizeReady函数执行后续任务。如果控件宽、高未知，则会在ViewTarget中进行监听回调，待控件拥有宽高之后再执行onSizeReady函数和后续任务。

进入engine.load函数后。首先通过loadFromMemory()函数,加载activeResource中的缓存资源，如果activeResource没有找到资源，则会通过loadFromLruCache()方法，到LruCache缓存中寻找资源。
 
如果通过以上方法都没有找到缓存资源，则会开启新的任务进行加载。在waitForExistingOrStartNewJob()方法中创建EngineJob和DecodeJob，然后通过EngineJob执行DecodeJob，解析任务。如下图所示：

2.资源解析

完成资源加载之后，Glide会进入资源解析，通过decodeResourceWithList()方法获取对应的解析器。代码如下所示

private Resource<ResourceType> decodeResourceWithList( DataRewinder<DataType> rewinder,int width,int height,Options options,List<Throwable> exceptions) throws GlideException {
  Resource<ResourceType> result = null;
  for (int i = 0, size = decoders.size(); i < size; i++) {
    // 循环去获取对应的解析器
    ResourceDecoder<DataType, ResourceType> decoder = decoders.get(i);
    try {
      DataType data = rewinder.rewindAndGet();
      if (decoder.handles(data, options)) {
        data = rewinder.rewindAndGet();
        result = decoder.decode(data, width, height, options);
      }
    } catch (IOException | RuntimeException | OutOfMemoryError e) {
    }
  }
  return result;
}

然后通过DataType、ResourceType来寻找具体实现类，发现byteBufferGifDecoder的decode才是真正的执行者。

/* GIFs */
.append(
        Registry.BUCKET_GIF,
        InputStream.class,
        GifDrawable.class,
        new StreamGifDecoder(imageHeaderParsers, byteBufferGifDecoder, arrayPool))
ByteBufferGifDecoder byteBufferGifDecoder =
        new ByteBufferGifDecoder(context, imageHeaderParsers, bitmapPool, arrayPool);

下面是ByteBufferGifDecoder的资源解析过程，解析完成后会生成一个GifDrawable回调资源。

// 生成GifDecoder GIF的解析工作是GifDecoder承担的      
GifDecoder gifDecoder = gifDecoderFactory.build(provider, header, byteBuffer, sampleSize);
        gifDecoder.setDefaultBitmapConfig(config);
        gifDecoder.advance();
        PixelMap firstFrame = gifDecoder.getNextFrame();
      // 此处生成 gifDrawable
      GifDrawable gifDrawable =
          new GifDrawable(context, gifDecoder, unitTransformation, width, height, firstFrame);
      return new GifDrawableResource(gifDrawable);

如果成功获取resource就执行回调通知，onResourceReady()用于将图片显示到DraweeView上。

public void onResourceReady(@NotNull Z resource, @Nullable Transition<? super Z> transition) {
    if (transition == null || !transition.transition(resource, this)) {
        setResourceInternal(resource);
    } else {        
        maybeUpdateAnimatable(resource);
    }
}

如果resource继承了Animatable，就会触发animatable.start()进行GIF的加载和绘制。

private void maybeUpdateAnimatable(@Nullable Z resource) {
    if (resource instanceof Animatable) {
        animatable = (Animatable) resource;
        // GIFDrawable继承了Animatable所以接下来GIF流程查看GIFDrawable.java
        animatable.start();
    } else {
        animatable = null;
    }
}

3.GIF加载和绘制

GIF的加载和绘制就是通过将GIF解析成一张张的单帧图片，然后再将单帧图片循环不停地绘制到canvas上，从而实现动画效果。
 
GIF加载和绘制的序列图如下：

3.1GIF加载

Glide 加载 GIF 的原理就是将GIF 解码成多张图片进行无限轮播，每帧切换都是一次图片加载请求，当加载到新的一帧数据时会对旧的一帧数据进行清除，然后再继续下一帧数据的加载请求，以此类推。
 
在GIF加载和绘制的序列图中可以看到，ImageViewTarget中的onResourceReady触发onStart() =>realStart()=>startRunning()。当GIF为单张图片的时候就直接绘制。当GIF为多张图片就先加载第一张，然后注册frameLoader的回调。

private void startRunning() {
    if (state.frameLoader.getFrameCount() == 1) {
      invalidateSelf();
    } else if (!isRunning) {
      isRunning = true;
      state.frameLoader.subscribe(this);
      invalidateSelf();
    }else{
    }
  }
 // 注册frameLoader的回调
 void subscribe(FrameCallback frameCallback) {
    boolean start = callbacks.isEmpty();
    callbacks.add(frameCallback);
    if (start) {
      start();
    }
  }

到这里，就是整个GIF加载的关键了，通过loadNextFrame加载GIF的下一帧。

private void loadNextFrame() {
    isLoadPending = true;
    // 获取解析器当前帧到下一帧的延迟时间
    int delay = gifDecoder.getNextDelay();
    // 获取系统当前时间+延时时间
    long targetTime = SystemClock.uptimeMillis() + delay;
    // 将GIF的当前帧往后+1
    gifDecoder.advance();
    // 创建出DelayTarget任务
    next = new DelayTarget(handler, gifDecoder.getCurrentFrameIndex(), targetTime); 
    // 启动DelayTarget
    requestBuilder.apply(signatureOf(getFrameSignature())).load(gifDecoder).into(next);
  }

然后进入DelayTarget类中执行onSourceReady()方法，使用EventHandler将PixelMap的resource传到主线程上，用于定时发送解析好的资源。

public void onResourceReady(
        PixelMap resource, @Nullable Transition<? super PixelMap> transition) {
      this.resource = resource;
      InnerEvent innerEvent = InnerEvent.get(FrameLoaderCallback.MSG_DELAY, this);
      // 使用handler发送消息，此处会将解析好的资源定时发送FrameLoaderCallback
      handler.sendTimingEvent(innerEvent, targetTime);
    }

FrameLoaderCallback是EventHandler的实现类，用于接收EventHandler发送过来的任务，并触发onFrameReady函数。

private class FrameLoaderCallback extends EventHandler{
    static final int MSG_DELAY = 1;
    static final int MSG_CLEAR = 2;
    @Synthetic
    FrameLoaderCallback() {
      super(EventRunner.getMainEventRunner());
    }
    @Override
    protected void processEvent(InnerEvent event) {
      if (event.eventId == MSG_DELAY) {
        DelayTarget target = (DelayTarget) event.object
        // 接收到消息，触发onFrameReady函数
        onFrameReady(target);
        return;
      } else if (event.eventId == MSG_CLEAR) {
        DelayTarget target = (DelayTarget) event.object;
        requestManager.clear(target);
      }
      return;
    }
    }

当上一帧加载完成后， GifFrameLoader类中的onFrameReady(target)方法触发绘制的回调操作，然后进入加载GIF的下一帧。同时，会通过FrameLoaderCallback.MSG_CLEAR对旧的一帧数据进行清除。清除完后再次通过loadNextFrame()加载下一帧，实现了GIF循环不停去加载下一帧的这个流程，直到加载完整个GIF。

void onFrameReady(DelayTarget delayTarget) {
    // 触发了 GifDrawable.java的绘制回调操作
    if (delayTarget.getResource() != null) {
      recycleFirstFrame();
      DelayTarget previous = current;
      current = delayTarget;
      for (int i = callbacks.size() - 1; i >= 0; i--) {
        FrameCallback cb = callbacks.get(i);
        // 注册在GifFrameLoader的GifDrawable会接收onFrameReady回调通知
        cb.onFrameReady();
      }
      if (previous != null) {
       // 这里将上一个target给清理了
        InnerEvent innerEvent = InnerEvent.get(FrameLoaderCallback.MSG_CLEAR, previous); 
       handler.sendEvent(innerEvent);
      }
    }
    // 加载下一帧，构成了gif的循环不停的地去执行这个流程
    loadNextFrame();
  }

3.2GIF绘制

GIF绘制，就是将解析后的图片通过invalidateSelf()方法通知DraweeView进行重绘。
 
在绘制过程中invalideDraweeView通过调用GifDrawable的drawToCanvas()方法将图片绘制到Canvas上。
 
GifDrawable类中的onFrameReady()调用的invalidateSelf()函数用于执行绘制任务

public void onFrameReady() {
    // 如果没有找到Callback的实现控件就停止绘制最后一帧
    if (findCallback() == null) {
      stop();
      invalidateSelf();
      return;
    }
    // 执行绘制流程
    invalidateSelf();
    if (getFrameIndex() == getFrameCount() - 1) {
    // 循环次数计数
      loopCount++;
    }
    // 非无限循环并且达到设置最大值停止gif
    if (maxLoopCount != LOOP_FOREVER && loopCount >= maxLoopCount) {
      stop();
    }
  }
public void invalidateSelf(){
        final Callback callback = getHmCallback();
        if(callback!=null){
            // 这里的callback就是注册Callback函数的组件，此处是DraweeView  
            callback.invalidateDrawable(this);
        }else{
        }
}

通过调用setImageElement(((RootShapeElement) resource))方法，实现Callback接口。

protected void setResource(@Nullable Element resource) {
    if(resource instanceof PixelMapElement) {
      view.setPixelMap(((PixelMapElement) resource).getPixelMap());
    }else if(resource instanceof RootShapeElement){
      view.setImageElement(((RootShapeElement) resource));
    }
  }public void setImageElement(Element element) {
        if(element == null){
            // 如果设置的内容为null 则去刷新图片并且清空之前的东西
            invalidate();
            return;
        }
        super.setImageElement(element);
        element.setCallback(this::onChange);
        if(element instanceof RootShapeElement){
            // 将组件注册到RootShapeElement中
            ((RootShapeElement) element).setHmCallback(this);
        }
    }

最后通过drawToCanvas()方法生成空白PixelMap交给GifDrawable绘制，并根据scaleMode()方法重新设置最后生成图像的位置。

private void init(Context context) {
    setBindStateChangedListener(this);
    addDrawTask(this::drawToCanvas);
    setTouchEventListener(this::onTouchEvent);
    }
    private void drawToCanvas(Component component, Canvas canvas) {
        if(getImageElement() instanceof RootShapeElement){
         RootShapeElement rootShapeElement = (RootShapeElement) getImageElement();
         int rw = rootShapeElement.getIntrinsicWidth();
         int rh = rootShapeElement.getIntrinsicHeight();
         int cw = component.getWidth();
         int ch = component.getHeight();
         PixelMap.InitializationOptions opts = new PixelMap.InitializationOptions();
            opts.size = new Size(rw, rh);
            opts.pixelFormat = PixelFormat.ARGB_8888;
            opts.editable = true;
            PixelMap gifmap = PixelMap.create(opts);
            // 生成空白PixelMap交给GifDrawable绘制
            applyDrawToCanvas(gifmap);
            RectFloat src = new RectFloat(0,0,cw,ch);
            // 根据scaleMode重新设置最后生成图像的位置
            RectFloat dst = scaleTypeFixed(gifmap,component);
            PixelMapHolder pixelMapHolder = new PixelMapHolder(gifmap);
            canvas.drawPixelMapHolderRect(pixelMapHolder, src, dst, getGifDrawPaint());
        }
    }
private void applyDrawToCanvas(PixelMap targetBitmap){
        BITMAP_DRAWABLE_LOCK.lock();
        try {
            Canvas canvasRootShape = new Canvas(new Texture(targetBitmap));
            // 将canvas交给RootShapeElement，gifDrawable会调用RootShapeElement的drawToCanvas 进行绘制
            getImageElement().drawToCanvas(canvasRootShape);
            clear(canvasRootShape);
        } finally {
            BITMAP_DRAWABLE_LOCK.unlock();
        }
    }

至此，整个GIF的流程就走了一遍。

六、课题延伸

因为GIF加载过程其实是无限循环加载单张图片的过程，其实对系统的性能消耗还是非常大的。所以在使用GIF的时候，一定要坚持用完之后及时释放资源。在这里因为HarmonyOS的生命周期和Android有所不同，所以在DraweeView开放了stopGif()方法，当你的GIF不打算用之后，请务必先调用stopGif()，防止内存泄露。

重要提示：

1、目前必须配合DraweeView使用GIF。

2、如果Glide使用了生命周期较长的上下文，例如applicationContext，则在GIF页面结束时调用绘制视图的stopGif方法停止Glide，以减少资源浪费。

3.如果您想使用Glid的GIF能力，但原生Image不支持此功能，因为Image和Element是独立的，不能使用Element重绘。要支持GIF，您需要自定义Image。具体可以参考DraweeView的实现

源码地址：https://gitee.com/openharmony-tpc/glide