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

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

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

前回

前回はアニメーションさせる方法で終わりました。今回はEnterTransition と ExitTransitionを設定をしてみようと思います。

fadeIn fadeOut　slideIn　slideOut　を今回は実装していきます。

表示非表示のアニメーションカスタム

詳しいコードは前回を見てください。
※今回はAnimatedVisibilityからしか記載しません。

fadeIn fadeOut
こちらは透明からだんだんと見えるようになり、だんだん透明になって消えていく方法です。
追加で秒数指定をしております。1000ミリ表でアニメーションをするようになっております。

AnimatedVisibilityView.kt

AnimatedVisibility(
    isExtended,
    enter = fadeIn(
        animationSpec = tween(durationMillis = 1000)
    ),
    exit = fadeOut(
        animationSpec = tween(durationMillis = 1000)
    )
) {
    Text(
        text = name,
        Modifier
            .padding(start = 8.dp, end = 12.dp)
            .background(Color.Red)
    )
}

slideIn slideOut
こちらは横から見えるように動きます。横へ動いて消えていく方法です。
追加で秒数指定とアニメーションの速度を指定してますtween(1000, easing = LinearOutSlowInEasing)をしております。1000ミリ表でアニメーションをするようになっております。
IntOffset(fullSize.width, fullSize.height)はズラす位置です。今回はTextの大きさ分右下にズレてます。

AnimatedVisibilityView.kt

AnimatedVisibility(
    isExtended,
    enter = slideIn(tween(1000, easing = LinearOutSlowInEasing)) { fullSize ->
        IntOffset(fullSize.width, fullSize.height)
    },
    exit = slideOut(tween(1000, easing = LinearOutSlowInEasing)) { fullSize ->
        IntOffset(fullSize.width, fullSize.height)
    },
) {
    Text(
        text = name,
        Modifier
            .background(Color.Red)
    )
}

以上です。