AndroidのJetpack Composeアニメーションを触ってみる（AnimatedVisibility）

Jetpack Composeアニメーション使用して動かしてみようと思います。

今回は高レベル アニメーション API　の　AnimatedVisibilityについてやっていこうと思います。

AnimatedVisibilityコンテンツの表示と非表示をアニメーション化

AnimatedVisibilityView.kt

@Composable
fun AnimatedVisibilityView(name: String) {
    var isExtended by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) {
        Button(modifier = Modifier
            .width(200.dp)
            .height(200.dp), onClick = { isExtended = !isExtended }) {
            Row(
                modifier = Modifier
                    .width(100.dp)
                    .height(100.dp),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {
                AnimatedVisibility(isExtended) {
                    Text(
                        text = name,
                        Modifier
                            .padding(start = 8.dp, end = 12.dp)
                            .background(Color.Red)
                    )
                }
            }
        }
    }
}

AnimatedVisibility

重要なのはここの部分ですAnimatedVisibility(isExtended)表示、非表示の切り替えたいViewをこの中に記載します。
渡す引数ですが、false非表示trueが表示です。

EnterTransition と ExitTransitionを設定することで、表示時、非表示時のアニメーションの方向などカスタムする事ができるみたいです。
こちらはまた今度触ってみようと思います。