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
    )
}
AnimationSnippets.kt

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

前へ
価値ベースのアニメーション
次へ
アニメーションをカスタマイズする