Contents
Jetpack Composeアニメーション実装ガイド：ステップバイステップでUI操作を自然に
Jetpack Composeのアニメーション機能は、ユーザーインターフェース（UI）の操作性と視覚的連続性を高めるために不可欠です。特にリスト要素の展開やナビゲーション遷移ではスムーズな動作が期待されます。本ガイドでは、animateContentSizeやNavigation Compose Transition APIといった実践的な手法をステップバイステップで解説し、GitHubからサンプルコードをダウンロードして実際に試せる環境の構築方法まで網羅します。
Jetpack Composeアニメーションの基本概念
Jetpack Composeでは、UIの状態変化に応じて自動的にアニメーションをトリガーする仕組みが提供されています。このAPIはanimateAsStateやLaunchedEffectといったコアコンポーネントで構成され、開発者は少ないコードで複雑なエフェクトの実装が可能です。
コアコンセプトと主要API
Jetpack Composeアニメーションの基本的なフローは「状態変化 → レイアウト再描画 → アニメーション再生」です。以下の表に代表的なAPIを整理しました。
|
1 2 3 4 5 6 |
| API名 | 説明 | 使用例 | |--------------------|--------------------------------------|----------------------------| | **animateAsState** | 数値型の状態変化に対応するアニメーション | ボタンの拡大/縮小 | | **LaunchedEffect** | タスク実行時にアニメーションをトリガー | リスト読み込み完了時 | | **animateDpAsState**| DP値の変化に対応するアニメーション | コンテンツサイズの調整 | |
注意点: アニメーションは状態管理（State）と密接に関係しています。Stateライフサイクルを正しく理解することが重要です。
animateContentSizeとanimateDpAsStateの実装手順
Jetpack Composeでコンテンツサイズ変化に伴うアニメーションを実装するには、animateContentSizeやanimateDpAsStateを使用します。以下に具体的なコード例を交えながら解説します。
コンテンツサイズ変更時のアニメーション
animateContentSizeは、リストの展開/収縮やカードの表示切り替えなど、動的な領域変化に対応するアニメーションです。基本的な実装手順は以下の通りです。
remember { mutableStateOf(false) }で展開状態を管理- コンテンツサイズに応じた高さ（DP値）を
if-elseで定義 Modifier.height(contentHeight).animateContentSize()を設定- クリックイベントで状態をトグル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@Composable fun ExpandableCard() { var expanded by remember { mutableStateOf(false) } val contentHeight = if (expanded) 100.dp else 50.dp Column( modifier = Modifier .height(contentHeight) .animateContentSize() .clickable { expanded = !expanded }, verticalArrangement = Arrangement.spacedBy(8.dp) ) { Text("クリックで展開") if (expanded) Text("詳細な内容が表示されます。") } } |
ポイント:
animateContentSizeは自動的にサイズ変化を検知し、スムーズなアニメーションを実現します。
Jetpack Composeでナビゲーション遷移のアニメーションをカスタマイズするには、enterTransitionとexitTransitionを使用します。この機能はNavigation Composeバージョン1.0以降で利用可能です。
enterTransitionとexitTransitionのカスタマイズ手順
以下のようにNavHost内でTransition APIを利用することで、スライドやフェード効果を実装できます。
rememberNavController()でナビゲーションコントローラーを作成navControllerにenterTransitionとexitTransitionを設定- アニメーションタイプ（スライド/フェードなど）を指定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
val navController = rememberNavController() NavHost( navController = navController, startDestination = "home", modifier = Modifier.fillMaxSize() ) { composable("home") { Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { Text(text = "ホーム画面") } } } |
| アニメーションタイプ | 説明 | パラメータ例 |
|---|---|---|
| slideAnimation | スライドアニメーション | AnimationDirection.Left |
| fadeIn | フェードイン効果 | tween(durationMillis = 300) |
実践的なヒント: アニメーションのタイミングは、画面遷移に合わせてユーザーの操作を自然に感じさせるのが理想です。
リスト項目の差分アニメーション実装方法
リストアイテムが挿入・削除・更新される際にスムーズなアニメーションを実装するには、DiffUtilとListAnimation API（Jetpack Compose標準）を組み合わせて使用します。
DiffUtilによるアイテム変更検知とListAnimationの連携
リストデータが更新されると、ListAnimationは自動的に差分を計算して、アニメーション付きで反映します。以下に実装手順を示します。
- リストデータクラスを定義し、
DiffUtil.ItemCallback<T>を実装 ListAnimationを使用してリストを表示- データ変更時に
listAdapter.submitData()を呼び出す
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
val listState = rememberLazyListState() val items = remember { mutableStateOf(listOf<Item>()) } ListAnimation( items = items.value, modifier = Modifier.fillMaxSize(), itemContent = { item -> Text(text = item.title) } ) // データ更新処理例 Button(onClick = { items.value = listOf(Item("新しいアイテム1"), Item("新しいアイテム2")) }) { Text("アイテム追加") } |
補足:
ListAnimationは、リストの差分を検知して自動的にアニメーションを適用するので、手動で個別に処理する必要がありません。
Android Studioでのプレビュー機能活用
Android StudioにはJetpack ComposeのPreview機能があり、UIアニメーションをリアルタイムで確認できます。これにより、設計段階での調整効率が劇的に向上します。
Compose Previewでのアニメーション再生手順
- Previewコンポーネントに
@Preview(showAnimation = true)アノテーションを追加 - Android Studioの右サイドバーで「Compose Preview」を開く
- スクロールやクリックなど、UI操作をシミュレートしてアニメーション確認
リアルタイムプレビュー設定
- Live Edit機能をONにすると、コード変更時に自動でPreviewが更新されます。
Modifier.animateContentSize()などのAPIは、Previewでも正しく動作します。
Jetpack Composeアニメーションサンプルコードをダウンロード
本記事で解説した実装方法のコード例はGitHubリポジトリに公開しています。以下からプロジェクト全体をダウンロードし、手元で試してみてください。
Jetpack Composeアニメーションサンプルコードをダウンロード
プロジェクト構成:
-mainディレクトリにナビゲーション遷移のサンプルが含まれる
-list_animationsディレクトリにはリスト差分アニメーションコードが収録
-previewフォルダにはIDEでのプレビュー機能を活用したデモが含まれる
まとめ
Jetpack Composeのアニメーション実装は、State変化とAnimation APIの組み合わせで可能です。
- リストやナビゲーション遷移では
animateContentSizeやTransition APIが有効です。 - IDEのプレビュー機能を活用すれば、デザイン調整が効率的になります。
- GitHubリポジトリからサンプルコードをダウンロードし、自ら手を動かして理解を深めましょう。
補足: Android StudioとJetpack Composeは密接に関連しており、プレビュー機能やLive Editによる開発効率向上が期待できます。企業向けのUI/UX設計では、このツールチェーンの活用が推奨されます。