Jetpack Compose アニメーション入門：Visibility・State・Transition・Infinite の全体像と実装例

Contents

1 アニメーションのカテゴリと公式ドキュメント
2 単一プロパティのアニメーション
- 2.1 1. AnimatedVisibility で if 文を書き換える
- 2.2 2. animate*AsState 系関数で単一プロパティを補間
3 複数状態遷移 – updateTransition
- 3.1 実装例：カードの 4 状態管理
4 無限・繰り返しアニメーション
5 デバッグと Layout Inspector の活用法
- 5.1 Layout Inspector でアニメーションを可視化
- 5.2 デバッグ時のベストプラクティス
6 XML から Compose への移行チェックリスト
- - 6.0.1 実装サンプル比較
7 サンプルコードの入手先とセットアップ手順
- 7.1 公開リポジトリ
- 7.2 ローカル環境構築手順
8 まとめ

スポンサードリンク

アニメーションのカテゴリと公式ドキュメント

Compose のアニメーションは 4 つの大分類 に分かれます。公式ガイド（Android Developers – Compose Animation）では、各カテゴリごとのサンプルとベストプラクティスが網羅されています。

カテゴリ	主な API	用途の例
Visibility	`AnimatedVisibility`	条件に応じた表示・非表示のフェードやスライド
State	`animate*AsState`（`animateDpAsState` など）	単一プロパティの変化を自動補間
Transition	`updateTransition`	複数状態・複数プロパティを同時に遷移
Infinite	`rememberInfiniteTransition`	永続的なローディングやバウンスエフェクト

単一プロパティのアニメーション

1. `AnimatedVisibility` で if 文を書き換える

@Composable
fun GreetingCard(visible: Boolean) {
    AnimatedVisibility(
        visible = visible,
        enter = fadeIn(tween(300)),
        exit = fadeOut(tween(200))
    ) {
        Card(modifier = Modifier.padding(16.dp)) {
            Text(&quot;Hello&quot;)
        }
    }
}

@Composable

fun GreetingCard(visible: Boolean) {

AnimatedVisibility(

visible = visible,

enter = fadeIn(tween(300)),

exit = fadeOut(tween(200))

) {

Card(modifier = Modifier.padding(16.dp)) {

Text("Hello")

}

効果：条件分岐だけでフェードイン・アウトが自動付与され、コード量が約 30 % 削減。
ポイント：enter/exit に好きなアニメーション（スライドや拡大縮小）を組み合わせられる。

2. `animate*AsState` 系関数で単一プロパティを補間

@Composable
fun AnimatedBox(isExpanded: Boolean) {
    val size by animateDpAsState(
        targetValue = if (isExpanded) 200.dp else 100.dp,
        animationSpec = tween(400, easing = LinearOutSlowInEasing)
    )
    val color by animateColorAsState(
        targetValue = if (isExpanded) Color(0xFF4CAF50) else Color(0xFFF44336),
        animationSpec = spring(stiffness = Spring.StiffnessLow)
    )
    val alpha by animateFloatAsState(
        targetValue = if (isExpanded) 1f else 0.5f,
        animationSpec = tween(500)
    )

    Box(
        Modifier
            .size(size)
            .background(color)
            .alpha(alpha)
    )
}

@Composable

fun AnimatedBox(isExpanded: Boolean) {

val size by animateDpAsState(

targetValue = if (isExpanded) 200.dp else 100.dp,

animationSpec = tween(400, easing = LinearOutSlowInEasing)

)

val color by animateColorAsState(

targetValue = if (isExpanded) Color(0xFF4CAF50) else Color(0xFFF44336),

animationSpec = spring(stiffness = Spring.StiffnessLow)

)

val alpha by animateFloatAsState(

targetValue = if (isExpanded) 1f else 0.5f,

animationSpec = tween(500)

)

Box(

Modifier

.size(size)

.background(color)

.alpha(alpha)

)

}

利点：状態 (isExpanded) が変わるたびに自動でアニメーションが走り、animationSpec を自由に差し替え可能。
公式サンプル：Compose Animation Samples – animate*AsState

複数状態遷移 – `updateTransition`

実装例：カードの 4 状態管理

enum class CardState { Idle, Loading, Success, Error }

@Composable
fun StatefulCard(state: CardState) {
    val transition = updateTransition(targetState = state, label = &quot;CardTransition&quot;)

    // 背景色
    val bgColor by transition.animateColor(
        transitionSpec = {
            when {
                CardState.Loading isTransitioningTo CardState.Success -&gt; tween(500)
                else -&gt; spring()
            }
        }, label = &quot;bg&quot;
    ) { s -&gt;
        when (s) {
            CardState.Idle   -&gt; Color.LightGray
            CardState.Loading-&gt; Color.Yellow
            CardState.Success-&gt; Color(0xFF4CAF50)
            CardState.Error  -&gt; Color(0xFFF44336)
        }
    }

    // サイズ
    val size by transition.animateDp(
        transitionSpec = { spring(stiffness = Spring.StiffnessMedium) }, label = &quot;size&quot;
    ) { s -&gt;
        when (s) {
            CardState.Idle   -&gt; 120.dp
            CardState.Loading-&gt; 140.dp
            else             -&gt; 180.dp
        }
    }

    // 透明度
    val alpha by transition.animateFloat(
        transitionSpec = { tween(300) }, label = &quot;alpha&quot;
    ) { s -&gt; if (s == CardState.Loading) 0.6f else 1f }

    Box(
        Modifier
            .size(size)
            .background(bgColor)
            .alpha(alpha),
        contentAlignment = Alignment.Center
    ) {
        Text(state.name, color = Color.White)
    }
}

enum class CardState { Idle, Loading, Success, Error }

@Composable

fun StatefulCard(state: CardState) {

val transition = updateTransition(targetState = state, label = "CardTransition")

// 背景色

val bgColor by transition.animateColor(

transitionSpec = {

when {

CardState.Loading isTransitioningTo CardState.Success -> tween(500)

else -> spring()

}

}, label = "bg"

) { s ->

when (s) {

CardState.Idle -> Color.LightGray

CardState.Loading-> Color.Yellow

CardState.Success-> Color(0xFF4CAF50)

CardState.Error -> Color(0xFFF44336)

}

// サイズ

val size by transition.animateDp(

transitionSpec = { spring(stiffness = Spring.StiffnessMedium) }, label = "size"

) { s ->

when (s) {

CardState.Idle -> 120.dp

CardState.Loading-> 140.dp

else -> 180.dp

}

// 透明度

val alpha by transition.animateFloat(

transitionSpec = { tween(300) }, label = "alpha"

) { s -> if (s == CardState.Loading) 0.6f else 1f }

Box(

Modifier

.size(size)

.background(bgColor)

.alpha(alpha),

contentAlignment = Alignment.Center

) {

Text(state.name, color = Color.White)

}

ポイント
updateTransition が状態遷移を検知し、各プロパティごとに別々のイージングやスプリングを設定できる。
transitionSpec は「状態 A → 状態 B」だけに特化した仕様を書けるため、細かい UX チューニングが可能。
参考：公式ドキュメントの Transition API

無限・繰り返しアニメーション

1. `rememberInfiniteTransition`（永続的なエフェクト）

@Composable
fun PulsingCircle() {
    val infinite = rememberInfiniteTransition(label = &quot;Pulse&quot;)
    val scale by infinite.animateFloat(
        initialValue = 0.8f,
        targetValue = 1.2f,
        animationSpec = infiniteRepeatable(
            animation = tween(800, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        ),
        label = &quot;scale&quot;
    )

    Box(
        Modifier
            .size(100.dp)
            .graphicsLayer(scaleX = scale, scaleY = scale)
            .background(Color.Cyan, shape = CircleShape)
    )
}

@Composable

fun PulsingCircle() {

val infinite = rememberInfiniteTransition(label = "Pulse")

val scale by infinite.animateFloat(

initialValue = 0.8f,

targetValue = 1.2f,

animationSpec = infiniteRepeatable(

animation = tween(800, easing = LinearEasing),

repeatMode = RepeatMode.Reverse

label = "scale"

)

Box(

Modifier

.size(100.dp)

.graphicsLayer(scaleX = scale, scaleY = scale)

.background(Color.Cyan, shape = CircleShape)

)

}

備考：Compose 1.6 では内部実装が最適化され、CPU 使用率は従来と同程度かやや低減されています（公式リリースノート参照）。

2. `repeatable` で回数限定のアニメーション

@Composable
fun ShakeOnError(isError: Boolean) {
    val offsetX by rememberInfiniteTransition().animateFloat(
        initialValue = 0f,
        targetValue = if (isError) 16f else 0f,
        animationSpec = if (isError)
            repeatable(
                iterations = 3,
                animation = tween(100, easing = FastOutLinearInEasing),
                repeatMode = RepeatMode.Reverse
            )
        else snap(),
        label = &quot;shake&quot;
    )

    Box(
        Modifier
            .offset(x = offsetX.dp)
            .size(80.dp)
            .background(Color.Red, shape = RoundedCornerShape(8.dp)),
        contentAlignment = Alignment.Center
    ) {
        Text(&quot;Error&quot;, color = Color.White)
    }
}

@Composable

fun ShakeOnError(isError: Boolean) {

val offsetX by rememberInfiniteTransition().animateFloat(

initialValue = 0f,

targetValue = if (isError) 16f else 0f,

animationSpec = if (isError)

repeatable(

iterations = 3,

animation = tween(100, easing = FastOutLinearInEasing),

repeatMode = RepeatMode.Reverse

)

else snap(),

label = "shake"

)

Box(

Modifier

.offset(x = offsetX.dp)

.size(80.dp)

.background(Color.Red, shape = RoundedCornerShape(8.dp)),

contentAlignment = Alignment.Center

) {

Text("Error", color = Color.White)

}

iterations で回数を明示でき、完了後は自動的に停止します。

3. デフォルト設定の変更点（Compose 1.6）

Spec	従来 (≤ 1.5)	1.6 以降
`tween` のデフォルト duration	300 ms	250 ms（公式リリースで調整）
`spring` のデフォルト dampingRatio	`MediumBouncy`	LowBouncy

※ 必要に応じて旧バージョンと同等の挙動を保ちたい場合は、animationSpec = tween(300) などと明示してください。
詳細は Compose 1.6 Release Notes を参照。

デバッグと Layout Inspector の活用法

Layout Inspector でアニメーションを可視化

公式ツールの Animation タブは、実行中の Transition のパラメータや現在のフレームをスローモーションで確認できます。手順は次の通りです。

デバイス／エミュレータで対象アプリを起動
Run > Attach debugger to Android Process でデバッグ接続
メニュー View → Tool Windows → Layout Inspector を開く
左上の Refresh ボタンで UI ツリー取得
任意の Compose 要素を選択し、右ペインの Animation タブへ切替
「Play」ボタンでスローモーション再生、各アニメーションの duration・easing が一覧表示される

公式ガイド: Inspect Compose UI with Layout Inspector

デバッグ時のベストプラクティス

手法	内容
State ログ	`Log.d("Anim", "alpha=$alpha")` で状態遷移を可視化
テストタグ	`Modifier.testTag("myBox")` → Layout Inspector の検索に利用
プレビューのスローモーション	Android Studio の「Preview」画面右上で速度調整可能

XML から Compose への移行チェックリスト

項目	XML の書き方	Compose への変換例
開始タイミング	`animator.start()`	状態 (`visible = true`) が変化した瞬間に自動開始
イージング	`<interpolator>` タグ	`tween(easing = ...)` または `spring`
繰り返し回数	`repeatCount` 属性	`infiniteRepeatable` / `repeatable(iterations = n)`
キャンセル	`animator.cancel()`	状態が変わらなくなると自動停止（例: `visible = false`）
スコープ管理	`AnimatorSet`	`updateTransition` で複数プロパティを同時遷移

実装サンプル比較

&lt;objectAnimator
    android:propertyName=&quot;alpha&quot;
    android:valueFrom=&quot;0&quot;
    android:valueTo=&quot;1&quot;
    android:duration=&quot;300&quot;/&gt;

<objectAnimator

android:propertyName="alpha"

android:valueFrom="0"

android:valueTo="1"

android:duration="300"/>

val alpha by animateFloatAsState(
    targetValue = 1f,
    animationSpec = tween(300)
)
Box(modifier = Modifier.alpha(alpha)) { /* ... */ }

val alpha by animateFloatAsState(

targetValue = 1f,

animationSpec = tween(300)

)

Box(modifier = Modifier.alpha(alpha)) { /* ... */ }

サンプルコードの入手先とセットアップ手順

公開リポジトリ

GitHub: https://github.com/androidx/compose-samples
animation ディレクトリに本稿で紹介した各サンプル（AnimatedVisibility、State、Transition、Infinite）が収録されています。
README に Compose 1.6 用の Gradle 設定例と Layout Inspector の有効化手順が記載。

ローカル環境構築手順

リポジトリをクローン

bash git clone https://github.com/androidx/compose-samples.git cd compose-samples/animation

Android Studio でプロジェクトを開く
File > Open → 上記フォルダを選択。
依存関係の確認（build.gradle.kts）

kotlin implementation("androidx.compose.ui:ui:1.6.0") implementation("androidx.compose.animation:animation:1.6.0") implementation("androidx.activity:activity-compose:1.8.0")

Sync 後にデバイス／エミュレータで実行
DemoApp の各画面からサンプルを確認でき、同時に Layout Inspector でアニメーションを検証可能。

まとめ

Compose のアニメーションは Visibility / State / Transition / Infinite の四カテゴリに整理されており、公式ガイドが充実している。
AnimatedVisibility と animate*AsState は最もシンプルで、条件分岐や単一プロパティの変化をすぐにアニメーション化できる。
複数状態・複数プロパティは updateTransition で一括管理し、transitionSpec を使って細かいイージングやスプリングを個別指定できる。
無限アニメーションは rememberInfiniteTransition と repeatable の組み合わせで実装し、Compose 1.6 の最適化によりパフォーマンスへの影響は低減。
デバッグは Layout Inspector の Animation タブが最も直感的で、状態遷移の可視化に有効。
XML からの移行は「開始タイミング・イージング・繰り返し回数」の三点をチェックすればスムーズに完了できる。
実装例は androidx/compose-samples に公開されているので、クローンしてそのまま Android Studio で試せる。

次のステップ：上記リポジトリをローカルにクローンし、DemoApp の各画面を操作しながら自分の UI に適用できるパターンを見つけてみましょう。

本稿の情報は 2024 年 11 月時点の公式資料に基づいています。Compose のバージョンが上がった際は、リリースノートで API の変更点をご確認ください。

スポンサードリンク

Jetpack Compose アニメーション入門：Visibility・State・Transition・Infinite の全体像と実装例

アニメーションのカテゴリと公式ドキュメント

単一プロパティのアニメーション

1. AnimatedVisibility で if 文を書き換える

2. animate*AsState 系関数で単一プロパティを補間

複数状態遷移 – updateTransition

実装例：カードの 4 状態管理

無限・繰り返しアニメーション

1. rememberInfiniteTransition（永続的なエフェクト）

2. repeatable で回数限定のアニメーション

3. デフォルト設定の変更点（Compose 1.6）

デバッグと Layout Inspector の活用法

Layout Inspector でアニメーションを可視化

デバッグ時のベストプラクティス

XML から Compose への移行チェックリスト

実装サンプル比較

サンプルコードの入手先とセットアップ手順

公開リポジトリ

ローカル環境構築手順

まとめ

1. `AnimatedVisibility` で if 文を書き換える

2. `animate*AsState` 系関数で単一プロパティを補間

複数状態遷移 – `updateTransition`

1. `rememberInfiniteTransition`（永続的なエフェクト）

2. `repeatable` で回数限定のアニメーション

3. デフォルト設定の変更点（Compose 1.6）