0Pricing
Android Academy · レッスン

アニメーションとトランジション

ViewPropertyAnimator、ObjectAnimator、AnimatorSetでViewをアニメーションさせます。Fragmentのトランジション、共有要素アニメーション、ばね物理を追加します。

「アニメーションとトランジション」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン4/5です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全5レッスンが含まれています。

アニメーションが重要な理由

アニメーションによって、アプリは生き生きとした、反応のよいものになります。アニメーションには次の効果があります：

  • ユーザーの操作に視覚的なフィードバックを提供する
  • 画面同士の関係を示す
  • データの変更による違和感を軽減する
  • 何が変わったのか、なぜ変わったのかをユーザーが理解しやすくする

重要な原則は、アニメーションはUIを引き立てるためのものであり、気を散らすものであってはならないということです。300ms未満に抑えてください。

ViewPropertyAnimator — 簡単なアニメーション

Viewをアニメーションさせる最も簡単な方法です。呼び出しをチェーンし、start()を呼び出します：

// Fade a view out:
binding.tvMessage
    .animate()
    .alpha(0f)
    .setDuration(300)
    .withEndAction { binding.tvMessage.visibility = View.GONE }
    .start()

// Slide in from bottom:
binding.cardView.translationY = 200f
binding.cardView.alpha = 0f
binding.cardView
    .animate()
    .translationY(0f)
    .alpha(1f)
    .setDuration(250)
    .setInterpolator(DecelerateInterpolator())
    .start()

ObjectAnimator

ObjectAnimatorは、名前を指定して任意のオブジェクトの任意のプロパティをアニメーションさせます。ViewPropertyAnimatorより柔軟です：

// Rotate an image:
val rotateAnimator = ObjectAnimator.ofFloat(
    binding.ivLogo,
    "rotation",
    0f, 360f
).apply {
    duration = 600
    repeatCount = ObjectAnimator.INFINITE
    interpolator = LinearInterpolator()
    start()
}

// Stop it:
rotateAnimator.cancel()

AnimatorSet — 順次実行と並列実行

AnimatorSetは、複数のアニメーターを同時に実行したり、順番に実行したりするよう制御します：

val fadeIn  = ObjectAnimator.ofFloat(binding.card, "alpha", 0f, 1f).setDuration(300)
val scaleX  = ObjectAnimator.ofFloat(binding.card, "scaleX", 0.8f, 1f).setDuration(300)
val scaleY  = ObjectAnimator.ofFloat(binding.card, "scaleY", 0.8f, 1f).setDuration(300)
val slideUp = ObjectAnimator.ofFloat(binding.card, "translationY", 100f, 0f).setDuration(300)

AnimatorSet().apply {
    // Run fadeIn + scaleX + scaleY together, then slideUp
    play(fadeIn).with(scaleX).with(scaleY)
    play(slideUp).after(fadeIn)
    interpolator = DecelerateInterpolator()
    start()
}

Interpolator

Interpolatorは、アニメーションの変化速度を制御します。よく使われるものは次のとおりです：

  • LinearInterpolator — 一定の速度
  • AccelerateInterpolator — ゆっくり始まり、速度が上がる（退出時）
  • DecelerateInterpolator — 速く始まり、速度が下がる（表示時）
  • AccelerateDecelerateInterpolator — ゆっくり → 速く → ゆっくり（デフォルト）
  • OvershootInterpolator — 目標を通り越してから跳ね返る
  • BounceInterpolator — 最後にバウンドする

TransitionManager — レイアウトの変更

表示状態やレイアウト属性を変更する前にTransitionManager.beginDelayedTransition()を呼び出すと、レイアウトの変更を自動的にアニメーションできます：

binding.btnToggle.setOnClickListener {
    // Tell the framework to animate the next layout change
    TransitionManager.beginDelayedTransition(
        binding.root,
        ChangeBounds().apply { duration = 300 }
    )

    // Now change visibility/size — Android animates the difference automatically
    binding.expandedSection.visibility =
        if (binding.expandedSection.isVisible) View.GONE else View.VISIBLE
}

Fragmentのトランジション

Fragmentトランザクションに開始時と終了時のアニメーションを追加します：

supportFragmentManager.beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in_right,   // enterAnim
        R.anim.slide_out_left,   // exitAnim
        R.anim.slide_in_left,    // popEnterAnim
        R.anim.slide_out_right   // popExitAnim
    )
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

// Or use MaterialSharedAxis for a modern, Material Motion feel:
val forward = MaterialSharedAxis(MaterialSharedAxis.X, true)
exitTransition = forward
enterTransition = MaterialSharedAxis(MaterialSharedAxis.X, true)

共有要素のトランジション

2つの画面間でViewを共有すると、Viewが一方の位置から別の位置へ移動するアニメーションを表示できます（サムネイルが大きな画像に展開される場合など）：

// In ListFragment:
binding.ivThumbnail.transitionName = "hero_image_${item.id}"

val extras = FragmentNavigatorExtras(
    binding.ivThumbnail to "hero_image_${item.id}"
)
findNavController().navigate(R.id.action_list_to_detail, null, null, extras)

// In DetailFragment:
sharedElementEnterTransition = TransitionInflater
    .from(requireContext())
    .inflateTransition(android.R.transition.move)

// ImageView in detail layout must have the same transitionName

Spring Animation

Springアニメーションは物理的なばねの動きを再現するため、リニアや減速のアニメーションより自然に感じられます：

implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'

// Spring animation on a button press:
val spring = SpringAnimation(binding.fabAdd, DynamicAnimation.SCALE_X, 1f).apply {
    spring = SpringForce(1f).apply {
        stiffness = SpringForce.STIFFNESS_MEDIUM
        dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCY
    }
}

binding.fabAdd.setOnClickListener {
    binding.fabAdd.scaleX = 0.8f
    spring.start()
}

Lottie — 複雑なアニメーション

Lottieは、JSONとして出力されたAfter Effectsアニメーションを再生します。ローディングスピナー、オンボーディング、空の状態の表示に最適です：

// app/build.gradle:
// implementation 'com.airbnb.android:lottie:6.4.0'

<!-- In layout XML -->
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

// Control in code:
binding.lottieView.playAnimation()
binding.lottieView.pauseAnimation()

アニメーションのベストプラクティス

滑らかでアクセシブルなアニメーションにするための指針：

  • ほとんどのUIアニメーションでは、継続時間を150～300msにする
  • 常にAnimatorUtils.areAnimatorsEnabled()またはSettings.System.ANIMATOR_DURATION_SCALEを尊重する
  • 前庭障害のあるユーザーはアニメーションを無効にしている場合があります。Reduce Motionのアクセシビリティ設定を確認する
  • 必要のないものはアニメーションさせない。少ないほど効果的です
  • ローエンドのデバイスでテストする（アニメーションによってフレーム落ちが発生する場合があります）

クイックチェック

画面に入ってくる要素が減速して停止するように感じさせるには、どのInterpolatorが最適ですか？

まとめ：アニメーションとトランジション

滑らかなアニメーションでアプリに命を吹き込みます：

  • view.animate() — アルファ、移動、拡大縮小、回転を素早く設定
  • ObjectAnimator — 任意のプロパティを細かく制御
  • AnimatorSet — 複数のアニメーターを連携（同時／順番に実行）
  • TransitionManager.beginDelayedTransition() — レイアウトの変更を自動的にアニメーション化
  • Shared element transitions — 画面間の連続性を自然に維持
  • Lottie — After Effectsから出力した複雑なJSONアニメーション

次は、複数セクションのアプリ向けのボトムナビゲーションとタブです。

よくある質問

「アニメーションとトランジション」レッスンは無料ですか？

はい。「アニメーションとトランジション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全5レッスンが含まれています。

「アニメーションとトランジション」で何を学びますか？

ViewPropertyAnimator、ObjectAnimator、AnimatorSetでViewをアニメーションさせます。Fragmentのトランジション、共有要素アニメーション、ばね物理を追加します。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Android Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/5です。

「アニメーションとトランジション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAndroid Academyレッスンでコードを書いて実行できますか？

はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Material Designの基礎
  2. テーマとスタイル
  3. カスタムView
  4. アニメーションとトランジション
  5. ボトムナビゲーションとタブ
← Android Academyに戻る