一、项目介绍

在当今移动互联网时代，GIF 动图凭借体积小、兼容性好、动效生动的特点，被广泛用于表情包、Banner、加载动画、用户引导等场景。Android 应用要想在 UI 层面更具吸引力，往往需要集成 GIF 播放功能。但 Android 原生并不直接支持在 ImageView 中播放 GIF，需要开发者借助多种技术手段实现。

本文将从理论到实战，系统地介绍在 Android 上实现 GIF 播放的八种主流方案：

原生 Movie 类

AnimationDrawable 帧动画

Glide 库

Fresco 库

android-gif-drawable (pl.droidsonroids.gif)

Coil 库

WebView 播放

Jetpack Compose + Coil

每种方案都包含：原理剖析、依赖配置、完整代码示例（所有文件整合在一个代码块中，用注释区分）、要点解读、性能对比与优化建议。通过本篇，你将掌握在各种业务场景中灵活选择 GIF 播放方案的能力。

二、相关知识

Android 资源解析

Movie.decodeStream(InputStream)：Android 原生支持 GIF 解码，但仅适用于 API 1+。

AnimationDrawable：Frame-by-frame 帧动画，通过将多张静态帧打包到 animation-list。

第三方图像加载库

Glide：基于 Bitmap 解码，支持 GIF、WebP 动图，默认将 GIF 解为 GifDrawable。

Fresco：Facebook 开源，使用 DraweeView，对 GIF 与 WebP 有专门支持。

android-gif-drawable：纯 GIF 解码库，性能优异，支持精准控制。

Coil：Kotlin-first，基于 ImageDecoder/GifDecoder，与 Compose 友好。

渲染容器

ImageView：最常用。

SimpleDraweeView：Fresco 专用。

GifImageView：android-gif-drawable 自带。

WebView：可直接加载 HTML 标签的 GIF，成本较高。

Compose：使用 AndroidView 包裹传统 View，或使用 Coil Compose 扩展。

性能考量

内存占用：解码 GIF 会产生多帧位图，需注意回收与缓存。

CPU 与耗电：高帧率动画容易导致主线程卡顿或电量快速消耗。

加载速度：本地 Asset、资源包 vs 网络 URL；可考虑异步预加载。

三、实现思路

方案一：原生 Movie

手动解码 GIF 帧，控制绘制频率。

方案二：AnimationDrawable 帧动画

在 res/drawable/ 中声明 XML，逐帧切换。

方案三：Glide

添加依赖 implementation 'com.github.bumptech.glide:glide:4.x.x'，使用 Glide.with().asGif()。

方案四：Fresco

初始化 Fresco，使用 SimpleDraweeView 并 setController 加载。

方案五：android-gif-drawable

添加依赖 implementation 'pl.droidsonroids.gif:android-gif-drawable:1.x.x'，使用 GifImageView。

方案六：Coil

添加依赖 implementation 'io.coil-kt:coil:2.x.x'，使用 ImageView.load() 自动识别 GIF。

方案七：WebView

在 HTML 中引用 GIF，无需额外解码，兼容性最强，但内存与交互成本高。

方案八：Compose + Coil

在 Compose 中使用 AsyncImage 或 SubcomposeAsyncImage，与 Coil Compose 集成。

四、环境与依赖

// app/build.gradle

plugins {

id 'com.android.application'

id 'kotlin-android'

}

android {

compileSdkVersion 34

defaultConfig {

applicationId "com.example.gifdemo"

minSdkVersion 21

targetSdkVersion 34

}

buildFeatures { viewBinding true }

kotlinOptions { jvmTarget = "1.8" }

}

dependencies {

// Glide

implementation 'com.github.bumptech.glide:glide:4.15.1'

kapt 'com.github.bumptech.glide:compiler:4.15.1'

// Fresco

implementation 'com.facebook.fresco:fresco:2.6.0'

implementation 'com.facebook.fresco:animated-gif:2.6.0'

// android-gif-drawable

implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.27'

// Coil

implementation 'io.coil-kt:coil:2.2.2'

implementation 'io.coil-kt:coil-compose:2.2.2'

// Kotlin Coroutines for Demo

implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.4'

}

五、整合代码

// =======================================================

// 文件: AndroidManifest.xml

// 描述: 声明应用与 Fresco 初始化

// =======================================================

package="com.example.gifdemo">

android:name=".App"

android:allowBackup="true"

android:theme="@style/Theme.App">

android:exported="true">

// =======================================================

// 文件: App.kt

// 描述: Fresco 初始化

// =======================================================

package com.example.gifdemo

import android.app.Application

import com.facebook.drawee.backends.pipeline.Fresco

class App: Application() {

override fun onCreate() {

super.onCreate()

Fresco.initialize(this)

}

}

// =======================================================

// 文件: res/layout/activity_main.xml

// 描述: 首页，跳转到不同方案示例

// =======================================================

android:orientation="vertical" android:padding="16dp"

android:layout_width="match_parent" android:layout_height="match_parent">

// =======================================================

// 文件: MainActivity.kt

// 描述: 跳转到各示例页面

// =======================================================

package com.example.gifdemo

import android.content.Intent

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import com.example.gifdemo.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

private lateinit var b: ActivityMainBinding

override fun onCreate(s: Bundle?) {

super.onCreate(s)

b = ActivityMainBinding.inflate(layoutInflater)

setContentView(b.root)

b.btnMovie .setOnClickListener { startActivity(Intent(this, MovieActivity::class.java)) }

b.btnFrame .setOnClickListener { startActivity(Intent(this, FrameActivity::class.java)) }

b.btnGlide .setOnClickListener { startActivity(Intent(this, GlideActivity::class.java)) }

b.btnFresco .setOnClickListener { startActivity(Intent(this, FrescoActivity::class.java)) }

b.btnGifLib .setOnClickListener { startActivity(Intent(this, GifLibActivity::class.java)) }

b.btnCoil .setOnClickListener { startActivity(Intent(this, CoilActivity::class.java)) }

b.btnWebView .setOnClickListener { startActivity(Intent(this, WebViewActivity::class.java)) }

b.btnCompose .setOnClickListener { startActivity(Intent(this, ComposeActivity::class.java)) }

}

}

// =======================================================

// 方案一：MovieActivity.kt

// Layout: res/layout/activity_movie.xml

// =======================================================

/* activity_movie.xml

android:layout_width="match_parent" android:layout_height="match_parent">

android:id="@+id/movieView"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

*/

// MovieView.kt

package com.example.gifdemo

import android.content.Context

import android.graphics.Canvas

import android.graphics.Movie

import android.os.SystemClock

import android.util.AttributeSet

import android.view.View

class MovieView @JvmOverloads constructor(

ctx: Context, attrs: AttributeSet? = null

): View(ctx, attrs) {

private val movie: Movie? = context.resources.openRawResource(R.raw.sample).use { Movie.decodeStream(it) }

private var start: Long = 0L

override fun onDraw(canvas: Canvas) {

super.onDraw(canvas)

movie?.let {

val now = SystemClock.uptimeMillis()

if (start == 0L) start = now

val relTime = ((now - start) % it.duration()).toInt()

it.setTime(relTime)

canvas.scale(width / it.width().toFloat(), height / it.height().toFloat())

it.draw(canvas, 0f, 0f)

invalidate()

}

}

}

// =======================================================

// 方案二：FrameActivity.kt

// Layout: res/layout/activity_frame.xml + res/drawable/frame_anim.xml

// =======================================================

/* res/drawable/frame_anim.xml

android:oneshot="false">

*/

/* activity_frame.xml */

android:layout_width="match_parent" android:layout_height="match_parent">

android:id="@+id/ivFrame"

android:layout_width="match_parent" android:layout_height="match_parent"

android:src="@drawable/frame_anim"/>

// FrameActivity.kt

package com.example.gifdemo

import android.graphics.drawable.AnimationDrawable

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import com.example.gifdemo.databinding.ActivityFrameBinding

class FrameActivity : AppCompatActivity() {

private lateinit var b: ActivityFrameBinding

override fun onCreate(s: Bundle?) {

super.onCreate(s)

b = ActivityFrameBinding.inflate(layoutInflater)

setContentView(b.root)

val anim = b.ivFrame.drawable as AnimationDrawable

b.ivFrame.post { anim.start() }

}

}

// =======================================================

// 方案三：GlideActivity.kt

// Layout: res/layout/activity_glide.xml

// =======================================================

/* activity_glide.xml */

android:layout_width="match_parent" android:layout_height="match_parent">

android:id="@+id/ivGlide"

android:layout_width="match_parent" android:layout_height="match_parent"/>

// GlideActivity.kt

package com.example.gifdemo

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import com.bumptech.glide.Glide

import com.example.gifdemo.databinding.ActivityGlideBinding

class GlideActivity : AppCompatActivity() {

private lateinit var b: ActivityGlideBinding

override fun onCreate(s: Bundle?) {

super.onCreate(s)

b = ActivityGlideBinding.inflate(layoutInflater)

setContentView(b.root)

Glide.with(this)

.asGif()

.load("https://example.com/sample.gif")

.into(b.ivGlide)

}

}

// =======================================================

// 方案四：FrescoActivity.kt

// Layout: res/layout/activity_fresco.xml

// =======================================================

/* activity_fresco.xml */

xmlns:fresco="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent" android:layout_height="match_parent">

android:id="@+id/drawee"

android:layout_width="match_parent" android:layout_height="match_parent"

fresco:placeholderImage="@drawable/placeholder"/>

// FrescoActivity.kt

package com.example.gifdemo

import android.net.Uri

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import com.facebook.drawee.backends.pipeline.Fresco

import com.facebook.drawee.interfaces.DraweeController

import com.facebook.drawee.view.SimpleDraweeView

import com.facebook.imagepipeline.common.ResizeOptions

import com.facebook.imagepipeline.request.ImageRequestBuilder

import com.example.gifdemo.databinding.ActivityFrescoBinding

class FrescoActivity : AppCompatActivity() {

private lateinit var b: ActivityFrescoBinding

override fun onCreate(s: Bundle?) {

super.onCreate(s)

Fresco.initialize(this)

b = ActivityFrescoBinding.inflate(layoutInflater)

setContentView(b.root)

val uri = Uri.parse("https://example.com/sample.gif")

val request = ImageRequestBuilder.newBuilderWithSource(uri)

.setAutoRotateEnabled(true)

.build()

val controller: DraweeController = Fresco.newDraweeControllerBuilder()

.setImageRequest(request)

.setOldController(b.drawee.controller)

.setAutoPlayAnimations(true)

.build()

b.drawee.controller = controller

}

}

// =======================================================

// 方案五：GifLibActivity.kt

// Layout: res/layout/activity_giflib.xml

// =======================================================

/* activity_giflib.xml */

android:layout_width="match_parent" android:layout_height="match_parent">

android:id="@+id/ivGifLib"

android:layout_width="match_parent" android:layout_height="match_parent"

android:src="@drawable/sample_gif"/>

// GifLibActivity.kt

package com.example.gifdemo

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import com.example.gifdemo.databinding.ActivityGiflibBinding

class GifLibActivity : AppCompatActivity() {

private lateinit var b: ActivityGiflibBinding

override fun onCreate(s: Bundle?) {

super.onCreate(s)

b = ActivityGiflibBinding.inflate(layoutInflater)

setContentView(b.root)

// GifImageView 自动播放，无需额外代码

}

}

// =======================================================

// 方案六：CoilActivity.kt

// Layout: res/layout/activity_coil.xml

// =======================================================

/* activity_coil.xml */

android:layout_width="match_parent" android:layout_height="match_parent">

android:id="@+id/ivCoil"

android:layout_width="match_parent" android:layout_height="match_parent"/>

// CoilActivity.kt

package com.example.gifdemo

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import coil.ImageLoader

import coil.decode.GifDecoder

import coil.load

import coil.request.ImageRequest

import com.example.gifdemo.databinding.ActivityCoilBinding

class CoilActivity : AppCompatActivity() {

private lateinit var b: ActivityCoilBinding

override fun onCreate(s: Bundle?) {

super.onCreate(s)

b = ActivityCoilBinding.inflate(layoutInflater)

setContentView(b.root)

// 自动识别 GIF

b.ivCoil.load("https://example.com/sample.gif")

}

}

// =======================================================

// 方案七：WebViewActivity.kt

// Layout: res/layout/activity_webview.xml

// =======================================================

/* activity_webview.xml */

android:layout_width="match_parent" android:layout_height="match_parent">

android:id="@+id/webView"

android:layout_width="match_parent" android:layout_height="match_parent"/>

// WebViewActivity.kt

package com.example.gifdemo

import android.os.Bundle

import android.webkit.WebSettings

import android.webkit.WebViewClient

import androidx.appcompat.app.AppCompatActivity

import com.example.gifdemo.databinding.ActivityWebviewBinding

class WebViewActivity : AppCompatActivity() {

private lateinit var b: ActivityWebviewBinding

override fun onCreate(s: Bundle?) {

super.onCreate(s)

b = ActivityWebviewBinding.inflate(layoutInflater)

setContentView(b.root)

b.webView.settings.javaScriptEnabled = true

b.webView.settings.cacheMode = WebSettings.LOAD_DEFAULT

b.webView.webViewClient = WebViewClient()

val html = ""

b.webView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null)

}

override fun onDestroy(){

super.onDestroy()

b.webView.apply { loadUrl("about:blank"); removeAllViews(); destroy() }

}

}

// =======================================================

// 方案八：ComposeActivity.kt

// =======================================================

package com.example.gifdemo

import android.net.Uri

import android.os.Bundle

import androidx.activity.compose.setContent

import androidx.appcompat.app.AppCompatActivity

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.runtime.*

import androidx.compose.ui.Modifier

import coil.compose.AsyncImage

import coil.request.ImageRequest

class ComposeActivity : AppCompatActivity() {

override fun onCreate(s: Bundle?) {

super.onCreate(s)

setContent {

Box(Modifier.fillMaxSize()) {

AsyncImage(

model = ImageRequest.Builder(this)

.data("https://example.com/sample.gif")

.allowHardware(false)

.build(),

contentDescription = null,

modifier = Modifier.fillMaxSize()

)

}

}

}

}

六、代码解读

Movie 类方案

直接解码流中的 GIF 帧并绘制，最原生，无第三方依赖；

需手动控制重绘（invalidate()），且只能播放本地资源或打包资源。

AnimationDrawable 方案

将每一帧导出为静态 drawable，并在 XML 中声明帧动画；

简易无依赖，但资源浪费大、帧率不可变。

Glide 方案

支持网络 URL、本地文件、Asset；

自动缓存、回收内存，易用性高；

可通过 RequestListener 监听加载状态。

Fresco 方案

支持更细粒度内存管理与磁盘缓存；

SimpleDraweeView 专用，需额外初始化。

android-gif-drawable

专为 GIF 优化，精确控制播放、暂停、单次播放；

支持回调 GifDrawable.GifDrawableListener。

Coil 方案

Kotlin-first，集成 ImageView.load() 与 Compose 扩展；

依赖 ImageDecoder（API 28+）或补丁库，兼容性好。

WebView 方案

最通用，直接在 HTML 中嵌入 ；

成本高、体积大，一般只在混合 Web 场景使用。

Compose 方案

使用 coil-compose 提供的 AsyncImage，简洁；

需设置 allowHardware(false) 避免硬件加速渲染 GIF 帧失败。

七、性能与优化

帧率与内存

对于高帧率或大分辨率 GIF，可适当降帧或缩放显示视图。

Glide 与 Coil 都支持 .override(width, height) 限制解码尺寸。

缓存策略

网络 GIF 可开启磁盘缓存，减少重下载：Glide .diskCacheStrategy(ALL)，Coil 默认为 ENABLED。

生命周期管理

在 Activity.onPause() 中暂停动画或释放资源，在 onResume() 恢复播放。

对 WebView 和 Fresco 视图需手动销毁。

硬件加速

GIF 解码多使用软件渲染；在大部分方案中无需禁用硬件加速，但 TextureView 或 Compose 需禁用硬件图像解码。

流量监控

对于网络 GIF，可结合 OkHttp／Interceptor 监控流量消耗，并提供用户切换无图模式功能。

八、项目总结与拓展

本文全面介绍了在 Android 上播放 GIF 的八种主流方案，从原生解码到第三方库、从传统 View到Jetpack Compose，并提供完整的示例代码与优化建议。

原生方案：适合无依赖、资源受控场景

Glide/Fresco：大多数应用首选，稳定易用

android-gif-drawable：对 GIF 精准控制与性能最优

Coil：Kotlin/Compose 优先级最高

WebView：在混合 Web 场景下的最后手段

拓展思路

自定义控制器：为 GIF 播放添加暂停、拖动进度等功能

合并多种格式：支持 APNG、WebP 动图

帧导出：结合 android-gif-drawable 导出 GIF 指定帧作为静态图片

跨平台：Kotlin Multiplatform 下统一管理 GIF 解码与播放

九、FAQ

Q1：GIF 会占用大量内存吗？

A1：高分辨率和高帧率的 GIF 会占用多个 Bitmap，建议在加载时限制尺寸，并在后台线程解码。

Q2：如何暂停/继续播放 GIF？

A2：

android-gif-drawable：gifDrawable.pause() / resume()

Glide/Fresco：在视图可见性改变时自动暂停，或使用 .clear() + 重新加载。

Q3：如何获取 GIF 的时长？

A3：

Movie：movie.duration()

android-gif-drawable：gifDrawable.duration

Q4：网络 GIF 加载失败如何处理？

A4：在 Glide/Fresco/Coil 的回调中处理错误并显示占位图。

Q5：Compose 中能否直接使用 GifImage？

A5：目前需要借助 Coil Compose，或等待社区提供专门的 GIF Compose 库。