Zenn
🫧

AnimatedVisibilityを使って表示/非表示可能なUIを実装する

2024/12/22に公開
animation
tech

はじめに

ユーザーへのレコメンドなどをより良いものにするために、ユーザーからのフィードバックを受け取ることは良い手段の一つだと思います。今回は、レコメンドに対して「興味がない」などのフィードバックを受け取る施策を開発した際に、アニメーションを伴ったUIの実装を行ったのでその実装についてです。
アニメーションのない単純な切り替えは、ユーザーに突然の視覚的変化を与えてしまい、どのような変化が起きたのか理解するのに時間がかかることがあります。一方、適切なアニメーションを実装することで、ユーザーは変化の過程を視覚的に理解でき、より直感的な操作感を得ることができます。

今回は、Jetpack ComposeのAnimatedVisibilityを使用して、縦方向へのスムーズな収縮アニメーションを実装する方法についてまとめました。
実際のUIは以下のような動きになります。

AnimatedVisibilityとは

AnimatedVisibilityは、Jetpack Composeが提供するアニメーションコンポーネントの1つです。このコンポーネントを使用することで、コンテンツの表示/非表示の切り替えに様々なアニメーション効果を簡単に適用することができます。

主な特徴は以下の通りです：

  • 表示/非表示の状態管理が簡単
  • 複数のアニメーション効果を組み合わせることが可能
  • カスタマイズ性が高い
  • 宣言的な記述でアニメーションを実装可能

AnimatedVisibilityの基本パラメータ

AnimatedVisibilityの主要なパラメータについて説明します：

AnimatedVisibility(
    visible: Boolean,  // 表示/非表示の状態を制御
    modifier: Modifier = Modifier,  // モディファイア
    enter: EnterTransition = fadeIn() + expandIn(),  // 表示時のアニメーション
    exit: ExitTransition = shrinkOut() + fadeOut(),  // 非表示時のアニメーション
    content: @Composable AnimatedVisibilityScope.() -> Unit  // 表示するコンテンツ
)

実装例

今回は、レコメンドビューの表示/非表示を切り替えるUIを実装します。以下のコードでは、shrinkVerticallyとfadeOutを組み合わせて、コンテンツが中央から縮小しながらフェードアウトする効果を実現しています。

AnimatedVisibility(
    visible = isSectionViewVisible,
    exit = shrinkVertically(shrinkTowards = Alignment.CenterVertically) + fadeOut()
) {
    Column {
        Box {
            フィードバックを送るUIComposable(
                onRevertButton = onRevertButton,
                (省略)
            )
            レコメンドのComposable(
                modifier = Modifier,
                (省略)
            )
        }
    }
}

実装のポイント

  1. アニメーション効果の指定

    • shrinkVerticallyで縦方向の収縮を指定
    • shrinkTowards = Alignment.CenterVerticallyで中央から収縮するように設定
    • fadeOut()との組み合わせでより自然な遷移を実現
    • 複数のアニメーション効果を+演算子で組み合わせることが可能

  2. レイアウトの構成

    • Boxを使用してフィードバックを送るUIComposableとレコメンドのComposableを重ねて配置することで自然なフェードアウト/フェードイン表示を実現

カスタマイズのオプション

AnimatedVisibilityには、様々なカスタマイズオプションが用意されています：

// アニメーション時間の調整
shrinkVertically(
    animationSpec = tween(
        durationMillis = 300,
        easing = FastOutSlowInEasing
    )
)

// 複数のアニメーション効果の組み合わせ
exit = fadeOut() + shrinkVertically() + slideOutVertically()

// アニメーションの開始位置の指定
shrinkVertically(shrinkTowards = Alignment.Top)  // 上から縮小
shrinkVertically(shrinkTowards = Alignment.Bottom)  // 下から縮小

まとめ

Jetpack ComposeのAnimatedVisibilityを使用することで、少ないコード量でありながら洗練された表示/非表示のアニメーションを実装することができます。

特に今回紹介した実装では：

  • 中央からの収縮アニメーション
  • フェードアウト効果
  • コンポーネントの状態管理

これらの要素を組み合わせることで、ユーザーにとって自然で理解しやすいUIを実現しています。

アニメーションは単なる見た目の装飾ではなく、ユーザーとアプリケーションのインタラクションを円滑にする重要な要素の一つだと思います。

参考文献

上記の実装やカスタマイズオプションを参考に、プロジェクトの要件に合わせた最適なアニメーション実装を検討してみてください。

Discussion