顯示 GIF 動畫

GIF 動畫可以促進溝通和自我表達,為觀眾提供生動活潑的 透過引人入勝的元素傳達情緒 也會更有效率地回應及幽默影片,甚至比單獨使用靜態圖片或文字更有效。 GIF 在網路上廣受好評,因此在整合時扮演舉足輕重的角色 就具備相關性和吸引力, 互動式多媒體體驗。

使用圖片載入程式庫顯示 GIF 動畫

圖片載入程式庫可為您處理大部分的繁瑣作業, 回溯相容的支援,例如 GIF 動畫。下列 程式碼展示如何使用 Coil 圖片載入程式庫

為 GIF 新增 Coil 依附元件:

implementation("io.coil-kt:coil-gif:2.6.0")

使用我們新增的平台 ImageDecoder 建立支援 GIF 的載入器 (已新增 ,以及 Coil 的 GifDecoder,以提供回溯相容性:

val gifEnabledLoader = ImageLoader.Builder(this)
    .components {
        if ( SDK_INT >= 28 ) {
            add(ImageDecoderDecoder.Factory())
        } else {
            add(GifDecoder.Factory())
        }
    }.build()

在 Coil AsyncImage 可組合函式中使用 gifEnabledLoader:

AsyncImage(
    imageLoader = gifEnabledLoader,
    ...
)

使用 Android 平台支援功能顯示 GIF 動畫

AsyncImage(
     model = request,
     imageLoader = videoEnabledLoader,
     contentDescription = null
 )

Android 9 以上版本 (API 級別 28) 已內建支援 GIF 動畫檔案。內建 Accompanist 程式庫的輔助,Jetpack Compose 可以 只需幾行程式碼就能播放這些動畫

新增 Accompanist 程式庫依附元件,支援可繪項目繪圖工具:

implementation("com.google.accompanist:accompanist-drawablepainter:0.35.0-alpha")

建立將 GIF 動畫載入 AnimatedImageDrawable 的方法 方法是使用 ImageDecoder

private fun createAnimatedImageDrawableFromImageDecoder(context: Context, uri: Uri): AnimatedImageDrawable {
    val source = ImageDecoder.createSource(context.contentResolver, uri)
    val drawable = ImageDecoder.decodeDrawable(source)
    return drawable as AnimatedImageDrawable
}

rememberDrawablePainter 搭配 AnimatedImageDrawable

Image(
    painter = rememberDrawablePainter(
        drawable = createAnimatedImageDrawableFromImageDecoder(applicationContext, mediaUri)),
     contentDescription = "animated gif"
)

支援圖片鍵盤和其他多媒體內容的 GIF 檔案

GIF 動畫檔案是許多 Android 鍵盤的熱門功能,包括 Google 推出的 Gboard。目前建議的做法是使用 OnReceiveContentListener,無論是來自輸入法還是其他應用程式,都能支援任何類型的貼圖或動畫。

如要進一步瞭解如何導入 在您的應用程式中接收 GIF 動畫和其他互動式多媒體。