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

2026年5月9日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

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 の変更点をご確認ください。

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-Kotlin

comment コメントをキャンセル

: Kotlin

Kotlin Multiplatform導入ガイド：プロジェクト設定とCI手順

Kotlin Multiplatform (KMP) を使い、Android・iOS・JS・JVM間でビジネスロジックを共有するための実務ガイド。環境整備、Gradle設定、ターゲット別統合、CIと公開までの手順を段階的に示します。

: Kotlin

Android Studio Electric Eelで始めるJetpack Compose入門ガイド

Android Studio Electric Eel と Gradle Kotlin DSL を用いた Jetpack Compose 開発環境の構築手順と、基本コンポーザブル・状態管理・ナビゲーション実装を解説します。

: Kotlin

Kotlin Multiplatform 最新安定版とIDE設定・Gradle構築ガイド (2024年4月)

Kotlin Multiplatformの最新安定版確認方法からIDE設定、プロジェクト作成、Gradle構成、共通ロジック実装までを網羅した2024年4月版ガイドです。

: Kotlin

Android Studio Giraffeで始めるJetpack Compose環境構築ガイド

Android Studio Giraffe以上なら、数クリックでJetpack Composeの開発環境が整います。

: Kotlin

Kotlin Compose Desktop 完全ガイド：開発から配布まで

Compose Multiplatform（Compose Desktop）を用いたデスクトップアプリ開発の実務ガイドです。LTS系OpenJDKやIntelliJ、Gradle（Kotlin DSL）による環境構築から最小サンプルの実行、ステート管理（remember/StateFlow）、リソース管理、AWTを使ったネイティブ連携、nativeDistributions/jpackageによるパッケージング、コード署名・Notarization、CI/CD自動化、パフォーマンス最適化、運用チェックリストまでを網羅します。

PHP 8.3 新機能と安全なアップグレード手順【型定数・Enum・readonly】

SwiftUI カスタムトランジション入門と実務活用ガイド

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）