アニメーション画像を表示する

ドローアブル ファイルを読み込んでアニメーション画像を表示すると、アプリでよりインタラクティブで魅力的なユーザー エクスペリエンスを実現できます。アニメーション イメージは、読み込みインジケーター、成功またはエラーのインジケーター、ゲーム開発の促進、その他のさまざまな UI 機能の作成に役立ちます。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

アニメーション画像を表示する

次のコードは、2 つの状態を自動的に切り替えるアニメーション ベクトルを表示します。

@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
    )
}

コードに関する主なポイント

  • ベクター リソースを読み込み、時間の経過とともに描画属性をアニメーション化します。
  • rememberAnimatedVectorPainter() 関数によって AnimatedImageVector 状態と boolean 状態から作成され、Painter インスタンスを使用してアニメーションを実行する Image インスタンス。
  • atEndtrue の場合、Painter インスタンスのアニメーションは停止します。

結果

砂時計のコンテンツがアニメーション化され、回転している
図 1. Compose のアニメーション化されたベクター型ドローアブル。

このガイドを含むコレクション

このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

明るく魅力的なビジュアルを使用して、Android アプリの外観を美しくする手法について学びます。

ご質問やフィードバックがある場合

よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。

Jetpack Compose is Android's recommended modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

更新日時: Mar 4, 2025