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

Glide.with(classcontext)
     .asGif()
     .load(uri)
     .into(image);
1.
2.
3.
4.

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;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

/* GIFs */
.append(
        Registry.BUCKET_GIF,
        InputStream.class,
        GifDrawable.class,
        new StreamGifDecoder(imageHeaderParsers, byteBufferGifDecoder, arrayPool))
ByteBufferGifDecoder byteBufferGifDecoder =
        new ByteBufferGifDecoder(context, imageHeaderParsers, bitmapPool, arrayPool);
1.
2.
3.
4.
5.
6.
7.
8.

// 生成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);
1.
2.
3.
4.
5.
6.
7.
8.
9.

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

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

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();
    }
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

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);
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

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);
    }
1.
2.
3.
4.
5.
6.
7.

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;
    }
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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();
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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{
        }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

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);
        }
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

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();
        }
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.