animate*AsState を使ってComposeのアニメーションに最短で入門

Composeでアニメーションする方法はたくさんありますが、本記事では初心者に使いやすいanimate*AsStateを使って最短で入門することを目指します。

公式ドキュメント(animate*AsState以外も載ってます)

https://developer.android.com/jetpack/compose/animation?hl=ja

アニメーションしないコード

  var flg by remember { mutableStateOf(true) }
  val backColor = if (flg) Color.Red else Color.Blue

  Column {
    Box(
      modifier = Modifier
        .size(100.dp)
        .background(backColor)
    )
    Button(onClick = {
      flg = !flg
    }) {
      Text("change")
    }
  }

アニメーションするコード

  var flg by remember { mutableStateOf(true) }
+ val backColor by animateColorAsState(if (flg) Color.Red else Color.Blue)

  Column {
    Box(
      modifier = Modifier
        .size(100.dp)
        .background(backColor)
    )
    Button(onClick = {
      flg = !flg
    }) {
      Text("change")
    }
  }

※ GIF画像にしたら少し分かりにくくなってしまいましたごめんなさい...

ポイント

animateColorAsStateでColorインスタンスを囲っただけです。色の場合はanimateColorAsState,数値の場合はanimateIntAsState,animateFloatAsStateなど,Dpの場合はanimateDpAsStateを使うなどして簡単に値をアニメーション(値を少しずつ変化)させられます。

また各animate*AsStateは第2引数にtween(ミリ秒)を指定することで簡単にアニメーションにかかる時間を指定できます。

tween()

val backColor by animateColorAsState(
  if (flg) Color.Red else Color.Blue,
  tween(3_000),
)