Jetpack Compose で TextField にエラー時のシェイクアニメーションを実装する方法

Jetpack Compose で TextField にエラー時のシェイクアニメーションを実装する方法

ユーザーに入力ミスなどのエラーを視覚的に伝えるため、入力フィールドを左右にシェイクさせるアニメーションは有効です。
本記事では、Jetpack Compose を使用して、TextField にエラーが発生した場合にブルっと振る（シェイク）アニメーションを実装する方法を紹介します。

実装例

以下のコードは、エラー発生時に TextField が左右にシェイクするアニメーションを実装したサンプルです。

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.keyframes
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.TextField
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.graphicsLayer
import androidx.compose.ui.unit.dp

@Composable
fun ShakeableTextField(
    value: String,
    onValueChange: (String) -> Unit,
    // 入力エラーを示すフラグ
    isError: Boolean,
    modifier: Modifier = Modifier,
    label: @Composable (() -> Unit)? = null
) {
    // 水平方向のアニメーション用の値（ピクセル単位）
    val shakeOffset = remember { Animatable(0f) }

    // エラーが発生したときにシェイクアニメーションを再生
    LaunchedEffect(isError) {
        if (isError) {
            // 初期位置にリセット
            shakeOffset.snapTo(0f)
            shakeOffset.animateTo(
                targetValue = 0f, // 終了時は元の位置に戻る
                animationSpec = keyframes {
                    durationMillis = 300
                    // 左右に振れる値（ピクセル単位）を設定
                    -20f at 50
                    20f at 100
                    -20f at 150
                    20f at 200
                    0f at 250
                }
            )
        }
    }

    // graphicsLayer を使って translationX をアニメーション値に連動させる
    TextField(
        value = value,
        onValueChange = onValueChange,
        label = label,
        modifier = modifier
            .graphicsLayer { translationX = shakeOffset.value }
            .padding(16.dp)
    )
}

コードの解説

1. Animatable の生成

• remember { Animatable(0f) } を使い、水平方向のオフセット（translationX）を管理するための Animatable を生成しています。
• 初期値は 0f とし、TextField は初期状態では動かないようにしています。

2. エラー発生時にアニメーションをトリガー

• LaunchedEffect を使用し、isError が true になったタイミングでシェイクアニメーションを実行します。
• keyframes を利用して、指定した時間内に左右に振れるようなアニメーションのキーフレームを定義しています。

3. graphicsLayer を用いたアニメーションの適用

• Modifier.graphicsLayer を使用し、TextField の translationX に対してアニメーションの値を適用します。
• これにより、TextField が左右に移動するシェイク効果を実現しています。

まとめ

Jetpack Compose を活用することで、Animatable と Modifier を組み合わせたシンプルな実装で、エラー時に TextField をシェイクさせるアニメーションが実現できます。
この手法は、ユーザーに対して入力エラーを直感的に伝えるための有効な手段となるでしょう。

---

この記事が参考になったら、いいねやシェアをお願いします！