🍲
ComposeのCoilでgifアニメをループさせたくなくて悩んだ話し
いらっしゃいませ、あなたの街のそば屋でございます。
本日のお題はループ設定になっていないgifアニメをCoilでAsyncImageに設定したら無限ループしてしまって泣いた話しになります。
初期設定
公式の設定に合わせてCoilのlibrary設定などを行ってください
ループ回数の指定
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回アニメーションしたら終了
調査の流れ
参考までにどう調べたかも載せておきます。
- 公式Githubでloopと検索して以下のISSUEを発見
https://github.com/coil-kt/coil/issues/127 - 上記ISSUEの対応したPRからRepeatCountを把握
https://github.com/coil-kt/coil/pull/133/files#diff-36eadfceb488daa860677452469e52e52e375807b46252d40faf8ab76f72744dR122-R125 - RepeatCountが含まれるソースコードを検索してImageRequestに存在を確認
Discussion