面试官：Glide 是如何加载 GIF 动图的？

前言

最近在一个群里看到有人说面试遇到一个问题是 “Glide 是如何加载 GIF 动图的？”，他说没看过源码回答不出来...

好家伙！现在面试都问的这么细了？我相信很多人即使看过源码也很难回答出来，包括我自己。比如之前自己虽然写了两篇 Glide 源码的文章，但是只分析了整个加载流程和缓存机制，关于 GIF 那里只是粗略的看了一下，想要回答的好还是有难度的。那么这篇文章就好好分析一下吧，这篇依然采用 4.11.0 版本来分析。

系列文章：

• Android 主流开源框架（一）OkHttp 铺垫-HttpClient 与 HttpURLConnection 使用详解
• Android 主流开源框架（二）OkHttp 使用详解
• Android 主流开源框架（三）OkHttp 源码解析
• Android 主流开源框架（四）Retrofit 使用详解
• Android 主流开源框架（五）Retrofit 源码解析
• Android 主流开源框架（六）Glide 的执行流程源码解析
• Android 主流开源框架（七）Glide 的缓存机制
• Android 主流开源框架（八）EventBus 源码解析
• Android 主流开源框架（九）LeakCanary 源码解析
• Android 主流开源框架（十）Glide 加载 GIF 动图原理
• 更多框架持续更新中...

更多干货请关注 AndroidNotes

一、区分图片类型

我们知道使用 Glide 只需要下面一行简单代码就可以将静态图和 GIF 动图加载出来。

Glide.with(this).load(url).into(imageView);

加载静态图与 GIF 动图原理肯定是不同的，所以在加载之前需要先区分出图片类型。我们先看下源码是怎么区分的。

在 Glide 的执行流程源码解析 这篇文章中，我们知道网络请求拿到 InputStream 后会执行一个解码操作，也就是调用 DecodePath#decode() 进行解码。我们看一下这个方法：

  /*DecodePath*/
  public Resource<Transcode> decode(
      DataRewinder<DataType> rewinder,
      int width,
      int height,
      @NonNull Options options,
      DecodeCallback<ResourceType> callback)
      throws GlideException {
    Resource<ResourceType> decoded = decodeResource(rewinder, width, height, options);

    ...
  }

这里又调用了 decodeResource 方法，继续跟踪：

  /*DecodePath*/
  private Resource<ResourceType> decodeResource(
      DataRewinder<DataType> rewinder, int width, int height, @NonNull Options options)
      throws GlideException {
    List<Throwable> exceptions = Preconditions.checkNotNull(listPool.acquire());
    try {
      return decodeResourceWithList(rewinder, width, height, options, exceptions);
    } finally {
      listPool.release(exceptions);
    }
  }

  /*DecodePath*/
  private Resource<ResourceType> decodeResourceWithList(
      DataRewinder<DataType> rewinder,
      int width,
      int height,
      @NonNull Options options,
      List<Throwable> exceptions)
      throws GlideException {
    Resource<ResourceType> result = null;
    //noinspection ForLoopReplaceableByForEach to improve perf
    for (int i = 0, size = decoders.size(); i < size; i++) {
      ResourceDecoder<DataType, ResourceType> decoder = decoders.get(i);
      try {
        DataType data = rewinder.rewindAndGet();
        //（1）
        if (decoder.handles(data, options)) {
          data = rewinder.rewindAndGet();
          //（2）
          result = decoder.decode(data, width, height, options);
        }
      } catch (IOException | RuntimeException | OutOfMemoryError e) {

        ...

      }

      if (result != null) {
        break;
      }
    }

 ...

    return result;
  }

可以看到，这里还不知道图片是什么类型，所以会遍历 decoders 集合找到合适的资源解码器（ResourceDecoder）进行解码。decoders 集合可能包含 ByteBufferGifDecoder，也可能包含 ByteBufferBitmapDecoder 与 VideoDecoder 等。解码后 result 不为空，说明解码成功，则跳出循环。

那么怎样才算是找到了合适的资源解码器呢？看一下上面的关注点（1），这里有个判断，只有满足这个判断才能进行解码，所以满足这个判断时的解码器就是合适的解码器。当加载 GIF 动图的时候，这里遍历首先拿到的资源解码器是 ByteBufferGifDecoder，所以我们看下 ByteBufferGifDecoder 的 handles 方法是怎么判断的：

  /*ByteBufferGifDecoder*/
  @Override
  public boolean handles(@NonNull ByteBuffer source, @NonNull Options options) throws IOException {
    return !options.get(GifOptions.DISABLE_ANIMATION)
        && ImageHeaderParserUtils.getType(parsers, source) == ImageType.GIF;
  }

第一个条件是满足的，我们主要看下第二个条件。没错，这个就是用来区分图片是不是 GIF 动图的。

ImageType 是一个枚举，里面有多种图片格式：

  enum ImageType {
    GIF(true),
    JPEG(false),
    RAW(false),
    /** PNG type with alpha. */
    PNG_A(true),
    /** PNG type without alpha. */
    PNG(false),
    /** WebP type with alpha. */
    WEBP_A(true),
    /** WebP type without alpha. */
    WEBP(false),
    /** Unrecognized type. */
    UNKNOWN(false);

    private final boolean hasAlpha;

    ImageType(boolean hasAlpha) {
      this.hasAlpha = hasAlpha;
    }

    public boolean hasAlpha() {
      return hasAlpha;
    }
  }

我们看下 ImageHeaderParserUtils#getType() 是怎么获取图片类型的：

   /**ImageHeaderParserUtils**/
  @NonNull
  public static ImageType getType(
      @NonNull List<ImageHeaderParser> parsers, @Nullable final ByteBuffer buffer)
      throws IOException {
    if (buffer == null) {
      return ImageType.UNKNOWN;
    }

    return getTypeInternal(
        parsers,
        new TypeReader() {
          @Override
          public ImageType getType(ImageHeaderParser parser) throws IOException {
            // 调用 DefaultImageHeaderParser#getType()
            return parser.getType(buffer);
          }
        });
  }

  /*DefaultImageHeaderParser*/
  @NonNull
  @Override
  public ImageType getType(@NonNull ByteBuffer byteBuffer) throws IOException {
    return getType(new ByteBufferReader(Preconditions.checkNotNull(byteBuffer)));
  }

  /*DefaultImageHeaderParser*/
  private static final int GIF_HEADER = 0x474946;

  @NonNull
  private ImageType getType(Reader reader) throws IOException {
    try {
      final int firstTwoBytes = reader.getUInt16();
      // JPEG.
      if (firstTwoBytes == EXIF_MAGIC_NUMBER) {
        return JPEG;
      }

      // 关注点
      final int firstThreeBytes = (firstTwoBytes << 8) | reader.getUInt8();
      if (firstThreeBytes == GIF_HEADER) {
        return GIF;
      }

      ...

  }

可以看到，这里是从流里读取前 3 个字节进行判断的，若为 GIF 文件头，则返回图片类型为 GIF。这样第二个条件 ImageHeaderParserUtils.getType(parsers, source) == ImageType.GIF 也是满足的，所以这里找到的合适的资源解码器就是 ByteBufferGifDecoder。找到后就会跳出循环，不会继续寻找其他解码器。

GIF 文件头为 0x474946

到这里，我们就已经区分出图片类型了，接下来就分析下是加载 GIF 动图的原理。

二、加载原理

前面已经找到合适的资源解码器了，即 ByteBufferGifDecoder，那么下一步就是解码，我们看下 DecodePath#decodeResourceWithList() 中标记的关注点（2）。贴一下之前的代码吧：

  /*DecodePath*/
  private Resource<ResourceType> decodeResourceWithList(
      DataRewinder<DataType> rewinder,
      int width,
      int height,
      @NonNull Options options,
      List<Throwable> exceptions)
      throws GlideException {
    Resource<ResourceType> result = null;
    //noinspection ForLoopReplaceableByForEach to improve perf
    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) {

        ...

      }

      if (result != null) {
        break;
      }
    }

    ...

    return result;
  }

进入 ByteBufferGifDecoder#decode() 看看：

  /*ByteBufferGifDecoder*/
  @Override
  public GifDrawableResource decode(
      @NonNull ByteBuffer source, int width, int height, @NonNull Options options) {
    final GifHeaderParser parser = parserPool.obtain(source);
    try {
      // 关注点
      return decode(source, width, height, parser, options);
    } finally {
      parserPool.release(parser);
    }
  }

调用了 decode() 的另一个重载方法：

  /*ByteBufferGifDecoder*/
  @Nullable
  private GifDrawableResource decode(
      ByteBuffer byteBuffer, int width, int height, GifHeaderParser parser, Options options) {
    long startTime = LogTime.getLogTime();
    try {
      // 获取 GIF 头部信息
      final GifHeader header = parser.parseHeader();
      if (header.getNumFrames() <= 0 || header.getStatus() != GifDecoder.STATUS_OK) {
        // If we couldn't decode the GIF, we will end up with a frame count of 0.
        return null;
      }

      // 根据 GIF 背景是否有透明通道来确定 Bitmap 的类型
      Bitmap.Config config =
          options.get(GifOptions.DECODE_FORMAT) == DecodeFormat.PREFER_RGB_565
              ? Bitmap.Config.RGB_565
              : Bitmap.Config.ARGB_8888;

      // 获取 Bitmap 的采样率
      int sampleSize = getSampleSize(header, width, height);
      //（1）
      GifDecoder gifDecoder = gifDecoderFactory.build(provider, header, byteBuffer, sampleSize);
      gifDecoder.setDefaultBitmapConfig(config);
      gifDecoder.advance();
      //（2）
      Bitmap firstFrame = gifDecoder.getNextFrame();
      if (firstFrame == null) {
        return null;
      }

      Transformation<Bitmap> unitTransformation = UnitTransformation.get();
      //（3）
      GifDrawable gifDrawable =
          new GifDrawable(context, gifDecoder, unitTransformation, width, height, firstFrame);
      //（4）
      return new GifDrawableResource(gifDrawable);
    } finally {
      if (Log.isLoggable(TAG, Log.VERBOSE)) {
        Log.v(TAG, "Decoded GIF from stream in " + LogTime.getElapsedMillis(startTime));
      }
    }
  }

源码中我标记了 4 个关注点，分别如下：

• （1）：进入 GifDecoderFactory#build() 看看：

  /*ByteBufferGifDecoder*/
  @VisibleForTesting
  static class GifDecoderFactory {
    GifDecoder build(
        GifDecoder.BitmapProvider provider, GifHeader header, ByteBuffer data, int sampleSize) {
      return new StandardGifDecoder(provider, header, data, sampleSize);
    }
  }

这里创建了一个 StandardGifDecoder 的实例，所以关注点（1）的 gifDecoder 实际是一个 StandardGifDecoder。它的作用是从 GIF 图像源读取帧数据，并将其解码为单独的帧用在动画中。

• （2）：获取下一帧。这里获取的是第一帧的 Bitmap，内部就是将 GIF 中第一帧的数据转成 Bitmap 返回。

• （3）：创建 GifDrawable 的实例，看一下创建的时候做了什么：

public class GifDrawable extends Drawable
    implements GifFrameLoader.FrameCallback, Animatable, Animatable2Compat {
  public GifDrawable(
      Context context,
      GifDecoder gifDecoder,
      Transformation<Bitmap> frameTransformation,
      int targetFrameWidth,
      int targetFrameHeight,
      Bitmap firstFrame) {
    this(
        new GifState(
            // 关注点
            new GifFrameLoader(
                Glide.get(context),
                gifDecoder,
                targetFrameWidth,
                targetFrameHeight,
                frameTransformation,
                firstFrame)));
  }
}

  /*GifFrameLoader*/
  GifFrameLoader(
      Glide glide,
      GifDecoder gifDecoder,
      int width,
      int height,
      Transformation<Bitmap> transformation,
      Bitmap firstFrame) {
    this(
        glide.getBitmapPool(),
        Glide.with(glide.getContext()),
        gifDecoder,
        null /*handler*/,
        getRequestBuilder(Glide.with(glide.getContext()), width, height),
        transformation,
        firstFrame);
  }

  /*GifFrameLoader*/
  @SuppressWarnings("PMD.ConstructorCallsOverridableMethod")
  GifFrameLoader(
      BitmapPool bitmapPool,
      RequestManager requestManager,
      GifDecoder gifDecoder,
      Handler handler,
      RequestBuilder<Bitmap> requestBuilder,
      Transformation<Bitmap> transformation,
      Bitmap firstFrame) {
    this.requestManager = requestManager;
    if (handler == null) {
      // 关注点
      handler = new Handler(Looper.getMainLooper(), new FrameLoaderCallback());
    }
    this.bitmapPool = bitmapPool;
    this.handler = handler;
    this.requestBuilder = requestBuilder;

    this.gifDecoder = gifDecoder;

    setFrameTransformation(transformation, firstFrame);
  }

可以看到，GifDrawable 是一个实现了 Animatable 的 Drawable，所以 GifDrawable 可以播放 GIF 动图。
创建 GifDrawable 的时候还创建了 GifFrameLoader 的实例，它的作用是帮助 GifDrawable 实现 GIF 动图播放的调度。GifFrameLoader 的构造函数中还创建了一个主线程的 Handler，这个后面会用到。

• （4）：将 GifDrawable 包装成 GifDrawableResource 进行返回，GifDrawableResource 主要用来停止 GifDrawable 的播放，以及 Bitmap 的回收等。

接下来分析下 GifDrawable 是怎么播放 GIF 动图的。我们都知道 Animatable 播放动画的方法是 start 方法，那么 GifDrawable 肯定是重写了这个方法：

  /*GifDrawable*/
  @Override
  public void start() {
    isStarted = true;
    resetLoopCount();
    if (isVisible) {
      startRunning();
    }
  }

那么这个方法是在哪里调用的呢？
其实在 Glide 的执行流程源码解析 这篇文章中，在最后显示图片之前那里调用了，即 ImageViewTarget#onResourceReady()，我再贴一下代码：

  /*ImageViewTarget*/
  @Override
  public void onResourceReady(@NonNull Z resource, @Nullable Transition<? super Z> transition) {
    if (transition == null || !transition.transition(resource, this)) {
      // 调用下面的 setResourceInternal 方法
      setResourceInternal(resource);
    } else {
      maybeUpdateAnimatable(resource);
    }
  }

  /*ImageViewTarget*/
  private void setResourceInternal(@Nullable Z resource) {
    setResource(resource);
    // 调用下面的 maybeUpdateAnimatable 方法
    maybeUpdateAnimatable(resource);
  }

  /*ImageViewTarget*/
  private void maybeUpdateAnimatable(@Nullable Z resource) {
    // 关注点
    if (resource instanceof Animatable) {
      animatable = (Animatable) resource;
      animatable.start();
    } else {
      animatable = null;
    }
  }

也就是如果加载的是 GIF 动图，那么关注点那里的 resource 其实就是 GifDrawable，然后调用了它的 start 方法开始播放动画。

那现在回去继续看 GifDrawable#start() 中的 startRunning 方法吧：

  /*GifDrawable*/
  private void startRunning() {

    ...

    if (state.frameLoader.getFrameCount() == 1) {
      invalidateSelf();
    } else if (!isRunning) {
      isRunning = true;
      state.frameLoader.subscribe(this);
      invalidateSelf();
    }
  }

可以看到，如果 GIF 只有一帧的时候会直接调用绘制方法，否则调用 GifFrameLoader#subscribe() 进行订阅，然后再调用绘制方法。

看一下 subscribe 方法：

  /*GifFrameLoader*/
  void subscribe(FrameCallback frameCallback) {

    ...

    boolean start = callbacks.isEmpty();
    // 将 FrameCallback 添加到集合中
    callbacks.add(frameCallback);
    if (start) {
      // 调用下面的 start 方法
      start();
    }
  }

  /*GifFrameLoader*/
  private void start() {
    if (isRunning) {
      return;
    }
    isRunning = true;
    isCleared = false;

    loadNextFrame();
  }

继续看 loadNextFrame 方法：

  /*GifFrameLoader*/
  private void loadNextFrame() {
    ...

    //（1）
    if (pendingTarget != null) {
      DelayTarget temp = pendingTarget;
      pendingTarget = null;
      onFrameReady(temp);
      return;
    }
    isLoadPending = true;
    // Get the delay before incrementing the pointer because the delay indicates the amount of time
    // we want to spend on the current frame.
    int delay = gifDecoder.getNextDelay();
    long targetTime = SystemClock.uptimeMillis() + delay;
    //（2）
    gifDecoder.advance();
    //（3）
    next = new DelayTarget(handler, gifDecoder.getCurrentFrameIndex(), targetTime);
    //（4）
    requestBuilder.apply(signatureOf(getFrameSignature())).load(gifDecoder).into(next);
  }

源码中我标记了 4 个关注点，分别如下：

• （1）：如果存在未绘制的帧数据（例如正在播放，然后熄屏再亮屏就会走这里），则调用 onFrameReady 方法，这个方法放到后面再分析。

• （2）：向前移动帧。

• （3）：创建了 DelayTarget 的实例，看一下这个类是干嘛的：

  /*GifFrameLoader*/
  @VisibleForTesting
  static class DelayTarget extends CustomTarget<Bitmap> {
    private final Handler handler;
    @Synthetic final int index;
    private final long targetTime;
    private Bitmap resource;

    DelayTarget(Handler handler, int index, long targetTime) {
      this.handler = handler;
      this.index = index;
      this.targetTime = targetTime;
    }

    Bitmap getResource() {
      return resource;
    }

    @Override
    public void onResourceReady(
        @NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
      this.resource = resource;
      Message msg = handler.obtainMessage(FrameLoaderCallback.MSG_DELAY, this);
      handler.sendMessageAtTime(msg, targetTime);
    }

    @Override
    public void onLoadCleared(@Nullable Drawable placeholder) {
      this.resource = null;
    }
  }

它继承了 CustomTarget，CustomTarget 的父类又是一个 Target，所以可以用在关注点（4）的 into 方法中。

在 “Glide 的执行流程源码解析” 这篇文章中已经知道当执行 into(imageView) 的时候会将传入的 imageView 转成 Target，所以这里直接传一个 Target 到 into 方法也是一样的。

而 onResourceReady 方法是资源加载完成的回调，这里首先进行了 Bitmap 的赋值，然后利用传进来的 Handler 发送了一个延迟消息。

• （4）：这句是不是很熟悉？其实他就相当于执行了我们熟悉的这句：

Glide.with(this).load(url).into(imageView);

这句执行后就会回调关注点（2）的 onResourceReady 方法。

刚刚发送了一个延迟消息，那么我们现在继续看下是怎么处理消息的：

  private class FrameLoaderCallback implements Handler.Callback {
    static final int MSG_DELAY = 1;
    static final int MSG_CLEAR = 2;

    @Synthetic
    FrameLoaderCallback() {}

    @Override
    public boolean handleMessage(Message msg) {
      if (msg.what == MSG_DELAY) {
        GifFrameLoader.DelayTarget target = (DelayTarget) msg.obj;
        // 关注点
        onFrameReady(target);
        return true;
      } else if (msg.what == MSG_CLEAR) {
        GifFrameLoader.DelayTarget target = (DelayTarget) msg.obj;
        requestManager.clear(target);
      }
      return false;
    }
  }

收到延迟消息后，调用了 onFrameReady 方法：

  /*GifFrameLoader*/
  @VisibleForTesting
  void onFrameReady(DelayTarget delayTarget) {

    ...

    if (delayTarget.getResource() != null) {
      recycleFirstFrame();
      DelayTarget previous = current;
      current = delayTarget;
      // 关注点
      for (int i = callbacks.size() - 1; i >= 0; i--) {
        FrameCallback cb = callbacks.get(i);
        cb.onFrameReady();
      }
      if (previous != null) {
        handler.obtainMessage(FrameLoaderCallback.MSG_CLEAR, previous).sendToTarget();
      }
    }
    // 继续加载下一帧
    loadNextFrame();
  }

可以看到，这里遍历 callbacks 集合拿到 FrameCallback，callbacks 集合是前面订阅的时候添加的数据。因为 GifDrawable 实现了 FrameCallback 接口，所以这里会回调到 GifDrawable#onFrameReady()：

  /*GifDrawable*/
  @Override
  public void onFrameReady() {
    if (findCallback() == null) {
      stop();
      invalidateSelf();
      return;
    }

    // 关注点
    invalidateSelf();

    if (getFrameIndex() == getFrameCount() - 1) {
      loopCount++;
    }

    if (maxLoopCount != LOOP_FOREVER && loopCount >= maxLoopCount) {
      notifyAnimationEndToListeners();
      stop();
    }
  }

调用了绘制方法，所以会调用 draw 方法：

  /*GifDrawable*/
  @Override
  public void draw(@NonNull Canvas canvas) {
    if (isRecycled) {
      return;
    }

    if (applyGravity) {
      Gravity.apply(GRAVITY, getIntrinsicWidth(), getIntrinsicHeight(), getBounds(), getDestRect());
      applyGravity = false;
    }

    Bitmap currentFrame = state.frameLoader.getCurrentFrame();
    canvas.drawBitmap(currentFrame, null, getDestRect(), getPaint());
  }

使用 GifFrameLoader 获取到当前帧的 Bitmap，然后使用 Canvas 将 Bitmap 绘制到 ImageView 上。就这样循环将每一帧的 Bitmap 都通过 Canvas 绘制到 ImageView 上，就形成了 GIF 动图。

三、总结

面试官： Glide 是如何加载 GIF 动图的？

小明：
首先需要区分加载的图片类型，即网络请求拿到输入流后，获取输入流的前三个字节，若为 GIF 文件头，则返回图片类型为 GIF。

确认为 GIF 动图后，会构建一个 GIF 的解码器（StandardGifDecoder），它可以从 GIF 动图中读取每一帧的数据并转换成 Bitmap，然后使用 Canvas 将 Bitmap 绘制到 ImageView 上，下一帧则利用 Handler 发送一个延迟消息实现连续播放，所有 Bitmap 绘制完成后又会重新循环，所以就实现了加载 GIF 动图的效果。

关于我

我是 wildma，CSDN 认证博客专家，简书程序员优秀作者，擅长屏幕适配。
如果文章对你有帮助，点个赞就是对我最大的认可！