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

ドローアブル ファイルを読み込んでアニメーション画像を表示すると、アプリでよりインタラクティブで魅力的なユーザー エクスペリエンスを実現できます。アニメーション イメージは、読み込みインジケーター、成功またはエラーのインジケーター、ゲーム開発の促進、その他のさまざまな 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 アプリの外観を美しくする手法について学びます。

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

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