完全に理解する Storyboard & UIKit (Day 20): アニメーションの実装（UIView Animation）

ボタンを押したときの沈み込み、画面遷移時の滑らかなフェードイン、バナーが上からスッと降りてくる表現... 優れたiOSアプリには必ず「心地よいアニメーション（モーション）」が組み込まれています。

UIKitは、複雑なアニメーション計算をたった数行で書ける強力なAPI （UIView Animation block） を提供しています。

1. UIView アニメーションの基本構造

アニメーションさせたいプロパティ（位置、サイズ、透明度など）の変更を、UIView.animate というメソッドのブロック（クロージャ）の中で行うだけで、システムが現在の状態から次の状態へと自動的に補間し、アニメーションとして描画してくれます。

最もシンプルなフェードイン

あるView（myBox）の透明度（alpha）を0から1へ、1秒かけてアニメーションさせるコードです。

swift
// 初期状態では透明にしておく
myBox.alpha = 0.0

// 1.0秒かけてアニメーションを実行
UIView.animate(withDuration: 1.0) {
    // 最終的にどうなってほしいかの状態を書く
    self.myBox.alpha = 1.0
}

💡 アニメーション可能なプロパティ 全てのプロパティがアニメーションするわけではありません（Textなどは不可）。主に以下のプロパティが対象です。

• frame / bounds (サイズと位置)
• center (中心位置)
• transform (回転、拡大縮小)
• alpha (透明度)
• backgroundColor (背景色)

2. アニメーションのオプション（Options）

animate(withDuration:delay:options:animations:completion:) というフル引数のメソッドを使うと、より細かな制御が可能です。

• delay: アニメーションが始まるまでの遅延時間（秒）。
• options: 動きのカーブ（イージング）や繰り返しなどを指定。
• completion: アニメーション要素が完了した後に実行したい処理を書くブロック。

swift
// ボタンが押された時の処理
@IBAction func moveButtonTapped(_ sender: UIButton) {

    UIView.animate(withDuration: 0.5,
                   delay: 0.0,
                   // easeInOut: 最初と最後がゆっくりになる自然な動き
                   options: [.curveEaseInOut],
                   animations: {

        // myBoxを右に100ピクセル移動させる
        self.myBox.frame.origin.x += 100
        // 同時に背景色を赤に変更する
        self.myBox.backgroundColor = .systemRed

    }, completion: { (finished) in
        // アニメーション完了後に呼ばれる
        print("移動完了！")
    })
}

3. Spring効果（バネのような弾力感）

iOSのデザイン言語全体で多用されているのが、物理的な「バネ」の挙動を模した スプリング・アニメーション です。 少し飛び出してからビヨーンと戻るような、心地よい弾力性を表現します。

animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:) を使います。

swift
UIView.animate(withDuration: 0.8,
               delay: 0,
               // Damping (0.0〜1.0): バネの減衰力。1に近いほど硬く跳ねない。0.5くらいがぽよんとする。
               usingSpringWithDamping: 0.5,
               // Velocity: 初速。ゼロでOK。
               initialSpringVelocity: 0.0,
               options: [],
               animations: {
                   // 要素を1.5倍に拡大する（transformを利用）
                   self.myBox.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
               }, completion: nil)

4. Auto Layout下でのアニメーションの注意点

Day 4で学んだAuto Layoutを用いてレイアウトを構築している場合、要素の frame（座標）を直接書き換えてアニメーションさせると、後でシステムがAuto Layoutの再計算を行った時に元の位置に戻ってしまうバグが発生します。

Auto Layoutを使っている場合は、「位置（frame）そのものではなく、Constraint（制約の設定値）をアニメーションさせる」 のが鉄則です。

1. 動かしたい制約（例: Top Constraint）を Storyboardから IBOutlet として繋ぐ。
2. コード内でその constant（定数）の値を変更する。
3. UIView.animate のブロック内で self.view.layoutIfNeeded() を呼び出す。

swift
@IBOutlet weak var topConstraint: NSLayoutConstraint!

// ...
// 1. 制約の目標値を変更する
topConstraint.constant = 200

// 2. 変更された制約に従って、レイアウトの再計算をアニメーションと共に行う
UIView.animate(withDuration: 0.3) {
    self.view.layoutIfNeeded()
}

📝 今日のまとめ

• アニメーションは UIView.animate(withDuration:animations:) というクロージャ内に「最終状態」を書くだけで実行される。
• Transformプロパティをいじることで、回転や拡大縮小（ポップアップ効果など）が簡単に実装できる。
• iOSらしい自然な動きを作りたいときは、バネの挙動を持った スプリング・アニメーション を使う。
• Auto Layout適用時は、frameを変更するのではなく、制約(constant)を変更し layoutIfNeeded() をアニメーションブロック内で呼ぶ。

アプリが生き生きと動き出しました。 明日の Day 21 では、ユーザーの細かな指の動き（スワイプ、ピンチ、長押し等）を検知し、インタラクティブに応答するための仕組み、UIGestureRecognizer について学びます。