2024/1/17

【Swift/UIKit】UIView.transitionメソッドの使い方！アニメーションの実装

この記事からわかること

Swift/UIKitでUIViewをアニメーションさせる方法
transitionメソッドの使い方と違い
画面遷移時にアニメーションを実装する

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：15.0.1
iOS：17.0
Swift：5.9
macOS：Sonoma 14.1

UIKitを使用したiOSアプリ開発でビューにアニメーションを実装する方法をまとめて行きます。

アニメーションを実装する方法

アニメーションを実装する方法はいくつか用意されています。それぞれの役割とは以下の通りになります。

UIView.animate：サイズや色合いなど簡素なアニメーション
UIView.transition：遷移アニメーション
UIView.animateKeyframes：連続したアニメーション
CABasicAnimation：複雑なアニメーション

【Swift/UIKit】CABasicAnimationの使い方！CAAnimationDelegate

UIView.transitionメソッドの使い方

UIView.transitionメソッドを使用することでビューに遷移アニメーションを簡単に付与することができます。「遷移アニメーション」とは画面Aから画面Bに遷移する際などに挟むことができるアニメーションです。わざわざ遷移させなくても、変化するプロパティを変更するだけでも動作を確認することができます。

定義
class func transition(
    with view: UIView,
    duration: TimeInterval,
    options: UIView.AnimationOptions = [],
    animations: (() -> Void)?,
    completion: ((Bool) -> Void)? = nil
)

公式リファレンス：UIView.transitionメソッド

引数

with：遷移対象のView
duration：アニメーションの継続時間
options：AnimationOptions型でアニメーションオプション設定
animations：アニメーションを実行するためのViewの変更
completion：アニメーションが完了後に実行したい処理

動作確認するためにviewDidLoad中で以下のように実装する場合はDispatchQueueを使用して読み込み直後に処理が走らないようにしないと遷移アニメーションが表示されないので注意してください。

class ViewController: UIViewController {

  override func viewDidLoad() {
      super.viewDidLoad()
      
      let square = UIView(frame: CGRect(x: 0, y:0, width: 150 , height: 150))
      square.backgroundColor = .orange
      square.center = self.view.center
      self.view.addSubview(square)
      
      DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
          UIView.transition(with: square, duration: 1.0, options: [.transitionFlipFromTop], animations: {
              square.backgroundColor = .blue
          }, completion: nil)
      }
  }
}

AnimationOptions型で指定できる値はUIView.animateメソッドで指定できるものよりtransitionFlipFromTop、transitionFlipFromBottom、transitionFlipFromLeft、transitionFlipFromRight、transitionCurlUp、transitionCurlDown、transitionCrossDissolveなどが追加されています。

transitionFlipFromTop/transitionFlipFromBottom

Viewを縦向きに回転させて遷移させることができます。Topなら上向きにBottomなら下向きに回転します。

UIView.transition(with: square, duration: 1.0, options: [.transitionFlipFromBottom], animations: {
    square.backgroundColor = .blue
}, completion: nil)

transitionFlipFromLeft/transitionFlipFromRight

Viewを横向きに回転させて遷移させることができます。Leftなら左向きにRightなら右向きに回転します。

UIView.transition(with: square, duration: 1.0, options: [.transitionFlipFromRight], animations: {
    square.backgroundColor = .blue
}, completion: nil)

transitionCurlUp/transitionCurlDown

Viewを付箋をめくったように遷移させることができます。CurlUpなら上にめくったようにCurlDownならめくられたものが戻るように変化します。

UIView.transition(with: square, duration: 1.0, options: [.transitionFlipFromRight], animations: {
    square.backgroundColor = .blue
}, completion: nil)

画面遷移(NavigationController)でアニメーションを実装する

NavigationControllerを使用して画面を遷移した際にアニメーションを実装するには以下のように実装します。

 @IBAction  func transition() {
    let storyboard = UIStoryboard(name: "Main", bundle: nil)
    let nextVC = storyboard.instantiateViewController(withIdentifier: "SecondView")

    UIView.transition(with: navigationController!.view, duration: 1.0, options: [.transitionFlipFromRight], animations: {
        self.navigationController?.pushViewController(nextVC, animated: false)
    }, completion: nil)
}