フェードインするアニメーションを実装したい

Question

質問失礼します。

ログインボタンを押下したらストーリーボードの画像の様にフェードインして
画面遷移をするアニメーションをライブラリは使用せずに実装したいと思い、
下記サイトを参考にコードを記載してみたのですが、アニメーション処理が呼び出されず、
セグエで設定してあるpresent modallyで遷移してしまいます。
これは何が原因なのでしょうか。

また、アニメーションの移動処理に関してなのですが、コード内に記載のある
containerView.convert(firstViewController.firstImageView.frame, from: firstViewController.firstImageView.superview)
や
containerView.convert(secondViewController.secondImageView.frame, from: secondViewController.view)
といった引数の記載方法で、どうやって位置が指定されているのかが理解出来ませんでした。

どなたかご教授いただけますと嬉しいです。
よろしくお願い致します。

参考サイト
https://dev.classmethod.jp/articles/ios-custom-transition-zoom/

・遷移元のビューコントローラー

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var firstImageView: UIImageView!
    
        override func viewDidLoad() {
            super.viewDidLoad()
            
        }
    }

・遷移先のビューコントローラー

import UIKit

class TopViewController: UIViewController, UIViewControllerTransitioningDelegate {
    
    @IBOutlet weak var secondImageView: UIImageView!
    //アニメーションのインスタンス生成
    let loginTransition = LoginTransition()
    
    
    override func viewDidLoad() {
        
        super.viewDidLoad()
        self.transitioningDelegate = self
    }
    
    @IBAction func backButton(_ sender: Any) {
        
        dismiss(animated: true, completion: nil)
    }
    
    
    //画面遷移してきた時のアニメーション処理
    func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        
        return loginTransition
    }
}

・アニメーション用のクラス

import UIKit

class LoginTransition: NSObject, UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning {
    
    //アニメーションにかかる時間を設定する
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 1
    }
    
    //遷移時のアニメーションを設定する
    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {

        //遷移先・遷移元ビューの情報を引数にしてアニメーションを呼び出す
        presentTransition(transitionContext: transitionContext)
    }
    
    //アニメーションの内容を設定する
    func presentTransition(transitionContext: UIViewControllerContextTransitioning) {
        
        /// 遷移元ビューコントローラー
        let firstViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from) as! ViewController
        /// 遷移先ビューコントローラー
        let secondViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to) as! TopViewController
        ///コンテナビュー
        let containerView = transitionContext.containerView
        
        //遷移後のビューコントローラーを、予め最後の位置まで移動完了させ非表示にする
        secondViewController.view.frame = transitionContext.finalFrame(for: secondViewController)
        secondViewController.view.alpha = 0
        //遷移後のimageは、アニメーションが完了するまで非表示にする
        secondViewController.secondImageView.isHidden = true
        // 遷移元のセルのイメージビューを非表示にする
        firstViewController.firstImageView.isHidden = true
        
        // 遷移元のセルのイメージビューからアニメーション用のビューを作成
        let animationView = UIImageView(image: firstViewController.firstImageView.image)
        //アニメーションビューの開始位置を指定している？？←アニメーションの位置の指定方法が分からない
        animationView.frame = containerView.convert(firstViewController.firstImageView.frame, from: firstViewController.firstImageView.superview)
        
        // 遷移コンテナに、遷移後のビューと、アニメーション用のビューを追加する
        containerView.addSubview(secondViewController.view)
        containerView.addSubview(animationView)

        //アニメーションを実装する(引数に秒数・アニメーションのクロージャ・完了後のクロージャを設定する)
        UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
              // 遷移後のビューを徐々に表示する
              secondViewController.view.alpha = 1.0
              // アニメーション用のビューを、遷移後のイメージの位置までアニメーションする←アニメーションの位置の指定方法が分からない
              animationView.frame = containerView.convert(secondViewController.secondImageView.frame, from: secondViewController.view)
          }, completion: {
            //アニメーションが終了した後のクロージャ
              finished in
              // 遷移後のイメージを表示する
              secondViewController.secondImageView.isHidden = false
              // 遷移前のビューの非表示を元に戻す
              firstViewController.firstImageView.isHidden = true
              // アニメーション用のビューを削除する
              animationView.removeFromSuperview()
              transitionContext.completeTransition(true)
          })
    }
}

Answer 1

フェードイン？の部分が表現していることがわかりませんが、
fromとtoの２枚のviewControllerをアニメーションさせて入れ替える処理を書けばいいと思います。
その際の大きさ(frame)のもとをcontainerから取得するイメージで書いてください。

storyboard上で矢印を引いて遷移する方法への適用方法は私わかりません。

簡単なサンプルを置いておきます。

サンプル内のカスタムトランジッション部分/遷移時の処理・復帰時の処理の部分だけいじってみてください。

import UIKit

class GreenVC: UIViewController {

    let customTransition = CustomTransition()
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    // 遷移処理
    @IBAction func transitionToOrange(_ sender: Any) {
        
        let toVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(identifier: "OrangeVC")
        
        toVC.modalPresentationStyle = .overCurrentContext
        toVC.transitioningDelegate  = customTransition
        
        present(toVC, animated: true, completion: nil)
    }
    
    // 戻ってきたときの処理
    @IBAction func backFromOrangeVC(segue: UIStoryboardSegue) {
        
    }
    
}

class OrangeVC: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func btnDidTap(_ sender: Any) {
        performSegue(withIdentifier: "BacktoGreenVC", sender: nil)
        
    }
    
}


class CustomTransition: NSObject, UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning {

    fileprivate var isPresent: Bool = false
    fileprivate let duration : TimeInterval = 0.6

    func animationController(forPresented presented: UIViewController,
                             presenting: UIViewController,
                             source: UIViewController) -> UIViewControllerAnimatedTransitioning?
    {
        isPresent = true
        return self
    }

    func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        isPresent = false
        return self
    }

    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return duration
    }

    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        if isPresent {
            animatePresentTransition(transitionContext: transitionContext)
        } else {
            animateDissmissalTransition(transitionContext: transitionContext)
        }
    }

    // 遷移時の処理
    func animatePresentTransition(transitionContext: UIViewControllerContextTransitioning) {
        
        // from: 遷移元, to:遷移先, container: 枠？を取得する
        let from: UIViewController!
            = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)
        let to: UIViewController!
            = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)
        let container: UIView! = transitionContext.containerView
        
        // viewを変形させる設定
        let transform: CGAffineTransform = CGAffineTransform(scaleX: 0.3, y: 0.3)
        
        // 遷移先画面(to)を用意する
        to.view.frame = container.frame
        to.view.alpha = .zero
        container.insertSubview(to.view, belowSubview: from.view)
        to.view.transform = transform
        
        // アニメーションしながら遷移元と遷移先を入れ替える
        UIView.animate(withDuration: duration, animations: {
            to.view.transform = .identity
            to.view.alpha = 1.0
        }, completion: {_ in
            from.removeFromParent()
            transitionContext.completeTransition(true)
        })
    }

    // 復帰時の処理
    func animateDissmissalTransition(transitionContext: UIViewControllerContextTransitioning) {
        
        // from: 遷移元, to:遷移先, container: 枠？を取得する
        let from: UIViewController!
            = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)
        let to: UIViewController!
            = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)
        let container: UIView! = transitionContext.containerView
        
        // viewを変形させる設定
        let transform: CGAffineTransform = CGAffineTransform(scaleX: 0.3, y: 0.3)
        
        // 遷移先画面(to)を用意する
        to.view.frame = container.frame
        container.insertSubview(from.view, belowSubview: to.view)
        
        // アニメーションしながら遷移元と遷移先を入れ替える
        UIView.animate(withDuration: duration, animations: {
            from.view.transform = transform
            from.view.alpha = .zero
        }, completion: {_ in
            from.removeFromParent()
            transitionContext.completeTransition(true)
        })
    }
}

Comments

[Ka_ya_]

tyobigorouさん、丁寧にご回答下さりありがとうございます。

説明が下手で申し訳ありません。
フェードインというのは遷移元に配置されているimageViewの画像を、
遷移する際に縮小する様なアニメーションで遷移先のimageViewに表示させたいという意味でした。

コメント付きのサンプルをいただけて処理の内容がとても分かりやすく、
色々と調べて混乱してしまっていた遷移アニメーションの流れがお陰様で良く分かりました＾＾

早速自分のコードにも反映させようと思い、ストーリーボードのセグエを削除して
ストーリーボードIDで遷移する様に遷移元のボタン押下時の処理を下記のように書き換えてみたのですが、
やはり通常のpresent処理になってしまいました。

処理の流れをprintで確認してみたところ、カスタムアニメーションクラスの中に入っていない状態です。
この記載を質問時のコードに追加するだけではアニメーションクラスの処理には入らないのでしょうか。

たびたびお手数をおかけしますが、
よろしければご確認お願い致します。

import UIKit

class ViewController: UIViewController, UIViewControllerTransitioningDelegate {

@IBOutlet weak var firstImageView: UIImageView!
let loginTransition = LoginTransition()

@IBAction func loginButton(_ sender: Any) {

let topVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(identifier: "top")

topVC.modalPresentationStyle = .overCurrentContext
topVC.transitioningDelegate = loginTransition

present(topVC, animated: true, completion: nil)
}

[退会済みユーザー]

topVC.transitioningDelegate = loginTransitionをコメントアウトして通常の遷移はできるのでしょうか？
ご自身で２画面のサンプルを作ることをおすすめします。

[Ka_ya_]

tyobigorouさん、ご確認いただきありがとうございます。

topVC.transitioningDelegate = loginTransitionをコメントアウトしても通常の遷移は可能でした。
topVC.modalPresentationStyle = .overCurrentContextなどは変更すると反映される為、
アニメーション処理の呼び出しに失敗しているようです＞＜

丁寧にサンプルを作成していただいたのにすみません。
クラスを分けている事などによって教えていただいたコードと相違が発生しているかもしれないので、
もう一度コードをしっかりと見直してみようと思います。

[Ka_ya_]

tyobigorouさん、昨日は丁寧にご回答下さりありがとうございました＾＾

あれから色々と調べながら御教授いただいたコードと照らし合わせて見直したところ、

・funcの記載方法がアップル公式の最新のものではなかった
・遷移先でDelegateを設定していた

上記が問題だったようで、それらを修正したらアニメーションクラスに入る事が出来ました！

お手数をおかけしてすみません、サンプルのお陰で本当に助かりました＾＾
アニメーションの作成自体も頑張ろうと思いますっ！