Contents
Jetpack Composeにおけるアニメーションと状態管理の関係
Jetpack Composeでアニメーションを実装する際、宣言型UIと状態管理（State Management）は密接に関連しています。宣言型UIでは、UIは状態に応じて自動的に再描画されるため、アニメーションもこの仕組みを利用して構築されます。例えば、ボタンのクリックによって画面が変化する際、状態を更新することでアニメーションがトリガーされます。
本記事では、Jetpack Composeで基本的なアニメーションを実装する方法をステップバイステップで解説します。具体的には、表示/非表示アニメーション、Transition APIによる遷移処理、Fade・Slideアニメーションの実装例、タイムラインアニメーションの構築など、開発者が直面しうる課題に対応する手法を紹介します。
AnimatedVisibilityによる表示/非表示アニメーション
UI要素の表示・非表示切り替えにスムーズなアニメーションを加えるには、AnimatedVisibilityコンポーザブルが効果的です。このAPIは、条件付きでUIを表示する際の「表示/非表示」の遷移を自動的に処理し、ユーザー体験を向上させます。
基本的な使用方法とコード例
以下にAnimatedVisibilityの簡単な実装例を示します。このコードでは、showingという状態変数を使ってボタンの表示/非表示を切り替えています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@Composable fun VisibilityAnimationSample() { var showing by remember { mutableStateOf(false) } Column(modifier = Modifier.padding(16.dp)) { Text(text = "クリックして表示/非表示を切り替え") Spacer(modifier = Modifier.height(8.dp)) Button(onClick = { showing = !showing }) { Text("トグル") } AnimatedVisibility(visible = showing) { Text(text = "このテキストがアニメーションで表示されます") } } } |
状態変化に伴うアニメーションの流れ
showingという状態を定義し、初期値としてfalseを設定- ボタンクリック時に
showingの値を逆転させる AnimatedVisibilityコンポーザブルを使って、visibleプロパティに応じてUI要素を描画
このように、if文で条件分岐する代わりにAnimatedVisibilityを使用することで、アニメーションが自動的に適用されます。
Transition APIを使ったシンプルなアニメーション構築
Transition APIは、UIの状態変化に応じたアニメーションを作成するための強力なツールです。特に、要素の出現や消滅、位置・サイズの変化をスムーズに処理できます。
Transition APIの概要と基本構造
Transition APIは、以下のような流れで動作します：
- 初期状態（
initialState）と終了状態（targetState）を定義 - 両者の差分を検出し、アニメーションの実行をスケジュール
- アニメーションが完了した後、UIを更新
このプロセスにより、ユーザーに自然な視覚的変化を提供できます。
実際のコードサンプルでの実装手順
以下はTransition APIを使ったシンプルなアニメーション例です。ボタンクリック時に要素の位置が移動する仕組みになります：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@Composable fun TransitionSample() { var isExpanded by remember { mutableStateOf(false) } val offset = if (isExpanded) 100.dp else 0.dp Column(modifier = Modifier.padding(16.dp)) { Text(text = "クリックして要素を移動") Spacer(modifier = Modifier.height(8.dp)) Button(onClick = { isExpanded = !isExpanded }) { Text("アニメーション開始") } Transition( enterTransition = fadeIn() + moveInHorizontally(animationSpec = tween(durationMillis = 300)), exitTransition = fadeOut() + moveOutHorizontally(animationSpec = tween(durationMillis = 300)) ) { Box( modifier = Modifier .offset(x = offset) .background(Color.Blue) .size(50.dp) .padding(8.dp) ) } } } |
このコードでは、Transitionコンポーザブルを使用し、表示時のアニメーション（enterTransition）と非表示時のアニメーション（exitTransition）をそれぞれ指定しています。
Fade・Slideアニメーションの具体例とコード実装
Fade（フェードアウト/イン）やSlide（スライド）アニメーションは、UI要素の出現または消失時に視覚的に滑らかに表示するための基本的な手法です。以下にそれぞれの実装方法を示します。
Fadeアニメーションの実装方法
Fadeアニメーションは、要素の透明度を変化させることで実現します。fadeIn()やfadeOut()メソッドを使えば簡単に実装可能です：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@Composable fun FadeAnimationSample() { var visible by remember { mutableStateOf(true) } Column(modifier = Modifier.padding(16.dp)) { Text(text = "クリックしてフェードアウト") Spacer(modifier = Modifier.height(8.dp)) Button(onClick = { visible = !visible }) { Text("トグル") } AnimatedVisibility( visible = visible, enter = fadeIn(animationSpec = tween(durationMillis = 300)), exit = fadeOut(animationSpec = tween(durationMillis = 300)) ) { Text(text = "フェードアニメーションサンプル") } } } |
Slideアニメーションの実装手順
Slideアニメーションは、要素をスライドさせて表示または非表示にします。moveInHorizontally()やmoveOutHorizontally()を使用すれば可能です：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@Composable fun SlideAnimationSample() { var visible by remember { mutableStateOf(true) } Column(modifier = Modifier.padding(16.dp)) { Text(text = "クリックしてスライド") Spacer(modifier = Modifier.height(8.dp)) Button(onClick = { visible = !visible }) { Text("トグル") } AnimatedVisibility( visible = visible, enter = slideInHorizontally(animationSpec = tween(durationMillis = 300)), exit = slideOutHorizontally(animationSpec = tween(durationMillis = 300)) ) { Text(text = "スライドアニメーションサンプル") } } } |
これらのアニメーションは、ユーザーに視覚的なフィードバックを提供し、UIの操作性を向上させます。
withFrameMillisの非推奨と代替方法
Jetpack Compose 1.4以降では、withFrameMillisは非推奨となりました。この関数を使用する代わりに、AnimatableやTransition APIが強く推奨されています。
非推奨の理由と問題点
| 問題点 | 説明 |
|---|---|
| 非推奨 | withFrameMillisは将来のバージョンで削除される可能性があります |
| 可読性低め | フレーム制御が複雑で、エラーのリスクが高まります |
| 性能影響 | 手動でのフレーム制御はUIスムーズさに悪影響を及ぼす場合があります |
代替案: Animatableで時間ベースアニメーション
以下のように、Animatableを使用してフェードイン効果を作成できます：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@Composable fun TimeBasedAnimationSample() { val animatable = remember { Animatable(0f) } Column(modifier = Modifier.padding(16.dp)) { Text(text = "クリックしてフェードイン") Spacer(modifier = Modifier.height(8.dp)) Button(onClick = { animatable.animateTo( targetValue = 1.0f, animationSpec = tween(durationMillis = 300) ) }) { Text("アニメーション開始") } Box( modifier = Modifier .fillMaxWidth() .height(50.dp) .background(Color.Red.copy(alpha = animatable.value)) ) } } |
Animatableは、UIに直接反映される値を管理することで、よりシンプルで信頼性の高い実装が可能です。
Animatableを使用したタイムラインアニメーションの実装手順
AnimatableとState変数の連携方法の注意点
重要:
Animatable.valueはUIに自動的に反映されるため、独立したState変数とは完全に分離する必要があります。
間違った実装例（ScaleAnimationSample）
|
1 2 3 4 5 6 7 8 |
var scale by remember { mutableStateOf(1f) } // ❌ State変数の使用が誤っています val animatable = remember { Animatable(scale) } Button(onClick = { animatable.animateTo(targetValue = 1.5f, ...) }) Box(modifier = Modifier.scale(scale)) // ❌ scale値はanimatable.valueから取得すべきです |
正しい実装例
|
1 2 3 4 5 6 7 |
val animatable = remember { Animatable(1f) } Button(onClick = { animatable.animateTo(targetValue = 1.5f, ...) }) Box(modifier = Modifier.scale(animatable.value)) // ✅ animatable.valueから取得 |
タイムラインアニメーションの実装手順
以下は、ボタンを拡大・縮小させるアニメーションの実装例です：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@Composable fun ScaleAnimationSample() { val scale = remember { Animatable(1f) } Column(modifier = Modifier.padding(16.dp)) { Text(text = "クリックして拡大") Spacer(modifier = Modifier.height(8.dp)) Button(onClick = { scale.animateTo( targetValue = 1.5f, animationSpec = tween(durationMillis = 300) ) }) { Text("アニメーション開始") } Box( modifier = Modifier .size(100.dp) .background(Color.Blue) .scale(scale.value) // ✅ animatable.valueから取得 .pointerInput(Unit) { // タッチイベントの処理（可変性を保つ） } ) } } |
まとめと実践への招待
本記事では、Jetpack Composeでアニメーションを実装するための基本的な手法について解説しました。重要なポイントを以下にまとめます：
- 表示/非表示には
AnimatedVisibilityを使用し、スムーズな遷移を実現 - Transition APIは、UIの変化に応じたアニメーション構築に最適
- Fade・Slideアニメーションは、
fadeIn()やslideInHorizontally()などを使って簡単に作成可能 - withFrameMillisは非推奨で、
AnimatableやTransition APIを代替として使用 - Animatableクラスを使うことで、タイムラインに沿ったUI変化が構築可能
記事内のサンプルコードを参考に、各自のプロジェクトでJetpack Composeアニメーションを試してみましょう。実装を通じて、ユーザー体験向上につなげていけるよう、ぜひ活用してください。