🍲

ComposeのCoilでgifアニメをループさせたくなくて悩んだ話し

2022/12/09に公開

いらっしゃいませ、あなたの街のそば屋でございます。

本日のお題はループ設定になっていないgifアニメをCoilでAsyncImageに設定したら無限ループしてしまって泣いた話しになります。

初期設定

公式の設定に合わせてCoilのlibrary設定などを行ってください
https://coil-kt.github.io/coil/gifs/

ループ回数の指定

val imageRequest = ImageRequest.Builder(LocalContext.current)
    .data("gifアニメのURLやリソース")
    .repeatCount(0)
    .build()
AsyncImage(
    model = imageRequest,
    contentDescription = null,
    contentScale = ContentScale.FillWidth,
    modifier = Modifier.fillMaxWidth()
    imageLoader = ImageLoader.Builder(context = LocalContext.current)
        .components {
            if (SDK_INT >= 28) {
                add(ImageDecoderDecoder.Factory())
            } else {
                add(GifDecoder.Factory())
            }
        }
        .build()
)

modelにImageRequestを渡すようにします。
ImageRequestの中にrepeatCountが存在するので、
繰り返す回数を指定します。

動作は以下です。

0 -> 1回アニメーションしたら終了
1 -> 2回アニメーションしたら終了

調査の流れ

参考までにどう調べたかも載せておきます。

  1. 公式Githubでloopと検索して以下のISSUEを発見
    https://github.com/coil-kt/coil/issues/127
  2. 上記ISSUEの対応したPRからRepeatCountを把握
    https://github.com/coil-kt/coil/pull/133/files#diff-36eadfceb488daa860677452469e52e52e375807b46252d40faf8ab76f72744dR122-R125
  3. RepeatCountが含まれるソースコードを検索してImageRequestに存在を確認
株式会社ゆめみ

Discussion