Mastering APNG on Android: From Format Basics to High‑Performance Playback

What is APNG

APNG (Animated Portable Network Graphics) is an extension of the PNG format that adds animation support, 24‑bit color, and an 8‑bit alpha channel while remaining backward compatible with PNG.

APNG vs GIF Comparison

1. Image Quality – GIF supports only 8‑bit color depth and often shows jagged edges, while APNG supports 24‑bit color depth with better anti‑aliasing.

2. Transparency – GIF is either fully transparent or opaque, lacking alpha gradients; APNG provides an 8‑bit alpha channel.

3. File Size – GIF uses LZW compression, while APNG uses Deflate; for the same 8‑bit color depth, APNG files are typically smaller.

4. Application Scenarios – GIF enjoys universal browser support and mature mobile playback controls; APNG is supported by Chrome, Firefox, Safari, and Opera. Use GIF for low‑quality animation and APNG for high‑quality or alpha‑gradient animations such as live‑stream gifts.

Android Implementation of APNG Playback

1. APNG Format Overview

An APNG file has a .png extension and contains a series of PNG frames. Its structure adds three chunk types to the standard PNG format: acTL (Animation Control), fcTL (Frame Control), and fdAT (Frame Data).

2. APNG Playback Design

The playback process consists of three steps: dispose (clear previous frame), blend (compose current frame), and draw (render to a Canvas). The overall flow is illustrated below.

3. Detailed Design

Step 1 – Parse Frames – The ApngReader loads the entire file into a MappedByteBuffer and reads chunks such as acTL, fcTL, and fdAT to build ApngFrame objects.

public ApngReader(String apngFile) throws IOException, FormatNotSupportException {
    RandomAccessFile f = new RandomAccessFile(apngFile, "r");
    mBuffer = f.getChannel().map(FileChannel.MapMode.READ_ONLY, 0, f.length());
    f.close();
    // validate PNG signature ...
    mChunk = new ApngMmapParserChunk(mBuffer);
    reset();
}

Step 2 – Dispose Operation – Implemented in ApngFrameRender.dispose(), handling three dispose ops: NONE, BACKGROUND, and PREVIOUS.

private void dispose(ApngFrame frame) {
    switch (mLastDisposeOp) {
        case APNG_DISPOSE_OP_NONE: break;
        case APNG_DISPOSE_OP_BACKGROUND:
            mRenderCanvas.clipRect(mDisposeRect);
            mRenderCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
            mRenderCanvas.clipRect(mFullRect, Region.Op.REPLACE);
            break;
        case APNG_DISPOSE_OP_PREVIOUS:
            Bitmap bmp = mRenderFrame;
            mRenderFrame = mDisposedFrame;
            mDisposedFrame = bmp;
            mRenderCanvas.setBitmap(mRenderFrame);
            mDisposeCanvas.setBitmap(mDisposedFrame);
            break;
    }
    mLastDisposeOp = frame.getDisposeOp();
    // cache current dispose rect or bitmap for next frame
}

Step 3 – Blend Operation – Merges the current frame onto the canvas, optionally clearing the area first when blendOp is SOURCE.

private void blend(ApngFrame frame, Bitmap frameBmp) {
    int xOff = frame.getxOff();
    int yOff = frame.getyOff();
    mRenderCanvas.clipRect(xOff, yOff, xOff + frame.getWidth(), yOff + frame.getHeight());
    if (frame.getBlendOp() == APNG_BLEND_OP_SOURCE) {
        mRenderCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
    }
    mRenderCanvas.drawBitmap(frameBmp, xOff, yOff, null);
    mRenderCanvas.clipRect(mFullRect, Region.Op.REPLACE);
}

Step 4 – Draw – The final bitmap is drawn onto a SurfaceView canvas on a background thread, ensuring UI responsiveness.

private void drawFrame(AnimParams animItem, ApngFrame frame, Bitmap frameBmp) {
    if (surfaceEnabled && !isInterrupted()) {
        Matrix matrix = new Matrix();
        matrix.setScale(mScale, mScale);
        Bitmap bmp = mFrameRender.render(frame, frameBmp);
        Canvas canvas = getHolder().lockCanvas();
        canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
        float[] trans = ApngUtils.getTranLeftAndTop(canvas, bmp, animItem.align, mScale, animItem.percent);
        matrix.postTranslate(trans[0], trans[1]);
        canvas.drawBitmap(bmp, matrix, null);
        getHolder().unlockCanvasAndPost(canvas);
    }
}

Advantages of This Approach

All frames are loaded from memory, eliminating disk I/O and preventing stutter.

Rendering runs on a background thread, avoiding UI thread blockage and ANR.

APNG provides higher visual quality and native alpha‑gradient support compared to GIF.

For further information on APNG creation, WebP comparison, and advanced usage, refer to additional APNG resources.