🧞‍♂️

Jetpack Composeを使用したアニメーションの実装

2024/05/22に公開

Android

animation

tech

はじめに

Jetpack Composeを使用すると、Androidアプリにアニメーションを簡単に追加できます。この記事では、基本的なアニメーションから少し複雑なものまで、いくつかの一般的なアニメーションを実装する方法を解説します。

今までのAnimationとJetpack Compose Animation

AndroidのAnimationは大きく下記の8種類に分けられていました

View Animations
Value Animator
Object Animator
View Property Animator
Transitions
Animated Vector Drawable
Physics
Motion Layout

これらのAPIの選択方法がJetpack Composeではわかりやすくなり下記のようなフローチャートで目的のアニメーションにたどり着けるようになっております。

https://youtu.be/7yY2OocGiQU

1. フェードイン・フェードアウト

要素の表示と非表示を滑らかにする基本的なアニメーションです。

@Composable
fun FadeInFadeOut(visible: Boolean) {
    AnimatedVisibility(
        visible = visible,
        enter = fadeIn(),
        exit = fadeOut()
    ) {
        Text("Hello, World!", Modifier.padding(16.dp))
    }
}

2. サイズ変更アニメーション

サイズを動的に変更するアニメーションを追加します。

@Composable
fun SizeChangeAnimation(expanded: Boolean) {
    val size by animateDpAsState(if (expanded) 200.dp else 40.dp)
    Box(Modifier.size(size).background(Color.Blue))
}

3. 色変更アニメーション

色を滑らかに変更します。

@Composable
fun ColorChangeAnimation(red: Boolean) {
    val color by animateColorAsState(if (red) Color.Red else Color.Blue)
    Box(Modifier.size(100.dp).background(color))
}

4. 移動アニメーション

コンポーネントを水平に移動させます。

@Composable
fun MoveAnimation(moved: Boolean) {
    val offsetX by animateDpAsState(if (moved) 100.dp else 0.dp)
    Text("Move me!", Modifier.offset(x = offsetX))
}

5. 回転アニメーション

コンポーネントの回転アニメーションです。

@Composable
fun RotateAnimation(rotated: Boolean) {
    val angle by animateFloatAsState(if (rotated) 360f else 0f)
    Box(Modifier.rotate(angle).background(Color.Green).size(50.dp))
}