Compose でのアニメーション化されたベクター画像

Compose でベクターをアニメーション化するには、いくつかの方法があります。次のいずれかを使用できます。

  • AnimatedVectorDrawable ファイル形式
  • ImageVector と Compose アニメーション API(こちらの Medium の記事を参照)
  • Lottie などのサードパーティ ソリューション

アニメーション化ベクター型ドローアブル(試験運用版)

内容がアニメーションで回転する砂時計
図 1. Compose のアニメーション化されたベクター型ドローアブル

AnimatedVectorDrawable リソースを使用するには、animatedVectorResource を使用してドローアブル ファイルを読み込み、boolean を渡してドローアブルの開始状態と終了状態を切り替えて、アニメーションを実行します。

@Composable
fun AnimatedVectorDrawable() {
    val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = rememberAnimatedVectorPainter(image, atEnd),
        contentDescription = "Timer",
        modifier = Modifier.clickable {
            atEnd = !atEnd
        },
        contentScale = ContentScale.Crop
    )
}

ドローアブル ファイルの形式について詳しくは、ドローアブル グラフィックをアニメーションにするをご覧ください。