Jetpack compose で Indicator をなめらかにする

今回は、Jetpack compose でなめらかに Indicator を表示する方法についてメモしておきます。

なお、今回の内容は『Android DevSummit "5 quick animations to make your Compose app stand out"』から学んだものとなります。

[目次]

環境
実装方法
- 通常の Indicator
- animate*AsState を使う
リンク
おわりに

環境

- compose "1.3.0-rc01"
- kotlin "1.7.1"

実装方法

今回は LinearProgressIndicator でやってますが、特にこれに限った話ではありません。
（今回のソースコードは github においてます。）

通常の Indicator

比較のため、まずは通常の LinearProgressIndicator を実装します。

var idx by remember {
    mutableStateOf(1)
}
val progress = idx.toFloat() / 5

LinearProgressIndicator(
    modifier = Modifier
        .padding(32.dp)
        .fillMaxWidth(),
    progress = progress,
    color = Color.Red,
)

（gif ってのもありますが）カクカクしています。

animate*AsState を使う

progressの定義を以下のように変更するだけです。
非常に簡単でありがたいです。

val progress by animateFloatAsState(targetValue = idx.toFloat()/5)

また、animationSpec を細かく変更することも可能です。

var idx by remember {
    mutableStateOf(1)
}
val progress by animateFloatAsState(
    targetValue = idx.toFloat() / 5,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioLowBouncy,
        stiffness = Spring.StiffnessLow,
    )
)

LinearProgressIndicator(
    modifier = Modifier
        .padding(32.dp)
        .fillMaxWidth(),
    progress = progress,
    color = Color.Red,
)

gif に変更してるので多少分かりにくいかもですが、通常の時に比べてなめらかに変化していることがわかります。