モバイル開発におけるアニメーション：概要、種類、使用方法

Android のアニメーション：Property Animation と View Animation

Android には 2 つの主要なアニメーションシステムがあります：View Animation（レガシー）と Property Animation（モダン）。View Animation（または Tween Animation）は視覚的な表現のみで動作し、View の表示は変更しますが、実際のプロパティは変更しません（たとえば、クリック座標は元のままです）。Android 3.0 で導入された Property Animation は、Animator（ValueAnimator、ObjectAnimator、AnimatorSet）を介してオブジェクトの実際のプロパティを変更します。

ObjectAnimator と ValueAnimator

ObjectAnimator は Property Animation の最も人気のあるクラスです。指定された Interpolator を使用して、指定された時間にわたってオブジェクトの特定のプロパティ（translationX、alpha、scaleY など）をアニメーション化します。

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator は特定のオブジェクトにバインドされていません。任意のプロパティまたはカスタムロジックに使用できる値を生成します。

View Animation と XML アニメーション

View Animation は XML ファイル res/anim/ で記述されます。scale、translate、rotate、alpha の 4 つのタイプがサポートされています。欠点は、アニメーションが View の実際のパラメーターを変更しないことです。単純な効果（点滅、回転）には View Animation がまだ適用可能ですが、新しいプロジェクトでは Property Animation が推奨されます。

Jetpack Compose のアニメーション

Jetpack Compose は、animateAsState、Animatable、AnimatedVisibility、AnimatedContent などの最新のアニメーション API を提供します。Compose のアニメーションはリアクティブです。状態が変化すると、アニメーションが自動的に開始されます。

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

iOS のアニメーション：Core Animation と UIView.animate

iOS は、Core Animation（CALayer を操作する低レベルフレームワーク）に基づく強力なアニメーションスタックを提供します。UIKit は Core Animation 上に構築され、便利な UIView.animate および UIViewPropertyAnimator メソッドを提供します。

UIView.animate

UIView.animate は iOS でアニメーション化する最も簡単な方法です。frame、alpha、transform、backgroundColor およびその他の UIView プロパティをアニメーション化できます。

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — 物理アニメーション用のフレームワーク：重力、衝突、バネ、引力。手動で物理演算を行うことなく、リアルなオブジェクトの動作を作成できます。カスタムトランジション、アニメーションメニュー、ゲーム要素に使用されます。

CAAnimation と Core Animation

Core Animation（CAAnimation、CABasicAnimation、CAKeyframeAnimation）— CALayer アニメーション用の低レベル API。3D 変換、パスアニメーション（キーフレーム）、マスキング、合成をサポートします。SwiftUI は、animation および withAnimation モディファイアを介して内部的に Core Animation を使用します。

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

ほとんどの iOS プロジェクトでは、SwiftUI とその組み込みアニメーションが使用されます。たとえば、withAnimation は状態変更をアニメーションコンテキストにラップします。

ベクターアニメーション：Lottie と Rive

複雑なアニメーション（キャラクター、トランジション、ローダー）をコードで実装するのは困難です。Lottie と Rive は、デザイナーがビジュアルエディターでアニメーションを作成し、開発者がそれを既成コンポーネントとしてアプリに埋め込むことを可能にすることで、この問題を解決します。

Lottie

Lottie — Airbnb（現在は LottieFiles）のライブラリで、JSON 形式でエクスポートされた Adobe After Effects のアニメーションをレンダリングします。Android、iOS、Flutter、React Native、Web でサポートされています。Lottie アニメーションはベクター形式で、品質を損なうことなく拡大縮小でき、プログラムによるカスタマイズ（速度、進行状況、色）が可能です。

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive（旧 2Dimensions）— より高度なベクターアニメーションツール。Lottie とは異なり、Rive はインタラクティブアニメーション（状態、トリガー、トランジション）をサポートします。アニメーションは Rive Editor で作成され、アプリ内でステートマシンを介して制御されます。Rive は、ゲームインターフェース、アニメーションアイコン、フィードバックを伴う複雑なトランジションに適しています。

IT Sectr では、装飾的なアニメーション（ローダー、成功した操作、空の状態）に Lottie を使用し、オンボーディング画面のインタラクティブな要素に Rive を使用しています。これにより、UIKit や Canvas での手動実装と比較して、アニメーション開発時間が 60% 削減されます。

Shared Element Transition と Hero Animation

Shared Element Transition — 要素（画像、テキスト、カード）が画面間のトランジション時にスムーズに移動および変形するアニメーション。これにより、継続性の錯覚が生まれます。ユーザーは新しい画面に「移動」するのではなく、要素に「落ち込み」ます。

Android Shared Element Transition

Android では、トランジションは ActivityOptionsCompat と transitionName 属性を介して実装されます。FragmentTransaction は、Activity 内のトランジションのために addSharedElement をサポートしています。Compose は SharedContentState とともに SharedTransitionLayout を使用します。

iOS Hero Transition

iOS には組み込みの Hero Transition はありませんが、Hero ライブラリ（Luke Zhao 作）が UIKit でこのパターンを実装しています。両方の画面の要素に id を割り当てるだけで、Hero が自動的にスムーズなトランジションを作成します。SwiftUI では、トランジションアニメーションは NavigationStack と matchedGeometryEffect を介して組み込まれています。

Flutter Hero

Flutter には、tag パラメーターを持つ組み込みの Hero ウィジェットがあります。2 つのページに同じ tag の Hero が含まれている場合、Flutter は自動的にそれらの間のトランジションをアニメーション化します。これは、モバイルアプリケーションで複雑なアニメーションを実装する最も簡単な方法の 1 つです。

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation、Interpolator、Easing

アニメーションを自然に見せるために、速度曲線が使用されます — Android では Interpolator、iOS では Easing。これらは、アニメーションの速度が最初から最後までどのように変化するかを決定します。

Android の Interpolator

Android はいくつかの組み込み Interpolator をサポートしています：LinearInterpolator（均一）、AccelerateDecelerateInterpolator（遅い-速い-遅い）、FastOutSlowInInterpolator（Material Design）、OvershootInterpolator（行き過ぎ）、BounceInterpolator（バウンス）。カスタム Interpolator は、XML または TimeInterpolator クラスを介して作成できます。

Spring Animation

Spring Animation（スプリングアニメーション）は、減衰（damping）と剛性（stiffness）のパラメーターでスプリング物理をモデル化します。減衰 0 — 無限振動、1 — 振動なし。剛性は戻り速度を決定します。Spring Animation は、iOS（UISpringTimingParameters を使用した UIViewPropertyAnimator）、Android（physics2 の SpringAnimation）、SwiftUI（spring()）で利用できます。

Android の Spring Animation ドキュメントには、詳細な設定例が含まれています。

タイムラインアニメーション

Timeline（タイムライン）— アニメーションを時間経過でフレームに分割するアプローチ。AnimationSet やグループアニメーションが十分に柔軟でない複雑なシーケンスに使用されます。Android は AnimatorSet、iOS は CAAnimationGroup、Flutter は AnimationController の Interval をサポートしています。