はじめに
Navigation Compose を使った際のアニメーションが気になったので、勉強がてらまとめてみました。
Navigation Compose でのアニメーションについて
以前までは Accompanist Navigation Animation というライブラリが利用されていたそうですが、version 2.7.0 以降では Navigation Compose 自体でアニメーションがサポートされるようになったそうです。
AnimatedContent が安定版になったため、コードを Accompanist Navigation Animation から Navigation Compose 自体に戻せるようになりました。
Navigation version 2.7.0
Navigation では以下のようにして、 composable() の引数を指定することでアニメーションを指定できます。
composable(
route = "Screen",
enterTransition = {
fadeIn(animationSpec = tween(durationMillis = 500), initialAlpha = 0.5f)
},
exitTransition = {
fadeOut(animationSpec = tween(durationMillis = 500), targetAlpha = 0.5f)
},
) {
Screen()
}
enterTransition などの説明はこちらの記事でよくまとめらているのでここでは省略します。この記事では Navigation で指定できるアニメーションの種類をまとめます。Navigation で指定できるアニメーションの種類は以下のようになっています。
| EnterTransition | ExitTransition | |
|---|---|---|
| フェード | fadeIn | fadeOut |
| スケール | scaleIn | scaleOut |
| スライド | slideIn, slideInHorizontally, slideInVertically | slideOut, slideOutHorizontally, slideOutVertically |
| 拡大・縮小 | expandIn, expandHorizontally, expandVertically | shrinkOut, shrinkHorizontally, shrinkVertically |
以降では各アニメーションについて述べていきます。
フェード
fadeIn(fadeOut)
fun fadeIn(
animationSpec: FiniteAnimationSpec<Float> = spring(stiffness = Spring.StiffnessMediumLow),
initialAlpha: Float = 0.0f
): EnterTransition
initialAlphaで指定した値から1fまで、animationSpecで指定されたアニメーションスペックを使用して、遷移先の内容をフェードインさせる。
動作
スケール
scaleIn(scaleOut)
fun scaleIn(
animationSpec: FiniteAnimationSpec<Float> = spring(stiffness = Spring.StiffnessMediumLow),
initialScale: Float = 0.0f,
transformOrigin: TransformOrigin = TransformOrigin.Center
): EnterTransition
遷移先をinitialScaleから1fまでスケールさせる。transformOriginは全体のサイズの割合でスケールする中心点を定義する。
scaleInは+演算子を使用してほかのEnterTransitionと組み合わせることができる。
動作
スライド
slideIn(slideOut)
fun slideIn(
animationSpec: FiniteAnimationSpec<IntOffset> = spring(
stiffness = Spring.StiffnessMediumLow,
visibilityThreshold = IntOffset.VisibilityThreshold
),
initialOffset: (fullSize: IntSize) -> IntOffset
): EnterTransition
遷移先をinitialOffsetからIntOffset(0, 0)までスライドさせる。正のx値は右から左へ、負のx値は遷移先を右にスライドさせる。正のy値は上方向、負のy値は下方向に対応している。
動作
slideInHorizontally(slideOutHorizontally)
fun slideInHorizontally(
animationSpec: FiniteAnimationSpec<IntOffset> = spring(
stiffness = Spring.StiffnessMediumLow,
visibilityThreshold = IntOffset.VisibilityThreshold
),
initialOffsetX: (fullWidth: Int) -> Int = { -it / 2 }
): EnterTransition
slideInの水平方向限定の遷移。
動作
slideInVertically(slideOutVertically)
fun slideInVertically(
animationSpec: FiniteAnimationSpec<IntOffset> = spring(
stiffness = Spring.StiffnessMediumLow,
visibilityThreshold = IntOffset.VisibilityThreshold
),
initialOffsetY: (fullHeight: Int) -> Int = { -it / 2 }
): EnterTransition
slideInの垂直方向限定の遷移。
動作
拡大・縮小
expandIn(shrinkOut)
fun expandIn(
animationSpec: FiniteAnimationSpec<IntSize> = spring(
stiffness = Spring.StiffnessMediumLow,
visibilityThreshold = IntSize.VisibilityThreshold
),
expandFrom: Alignment = Alignment.BottomEnd,
clip: Boolean = true,
initialSize: (fullSize: IntSize) -> IntSize = { IntSize(0, 0) }
): EnterTransition
initialSizeで指定した大きさから、フルサイズまで拡大される。同時に、expandFromは遷移先のどの部分が初めに表示されるかをしていする。
clipはアニメーション境界の外側のコンテンツを表示するかを決める。clipがtrueの時はアニメーション境界内のコンテンツのみが表示される。
動作
expandHorizontally(shrinkHorizontally)
fun expandHorizontally(
animationSpec: FiniteAnimationSpec<IntSize> = spring(
stiffness = Spring.StiffnessMediumLow,
visibilityThreshold = IntSize.VisibilityThreshold
),
expandFrom: Alignment.Horizontal = Alignment.End,
clip: Boolean = true,
initialWidth: (fullWidth: Int) -> Int = { 0 }
): EnterTransition
動作
expandVertically(shrinkVertically)
fun expandVertically(
animationSpec: FiniteAnimationSpec<IntSize> = spring(
stiffness = Spring.StiffnessMediumLow,
visibilityThreshold = IntSize.VisibilityThreshold
),
expandFrom: Alignment.Vertical = Alignment.Bottom,
clip: Boolean = true,
initialHeight: (fullHeight: Int) -> Int = { 0 }
): EnterTransition
ExpandInの垂直版。
動作
作成したアプリ