如何自定义翻转和过渡到另一个视图控制器与按钮点击？(n swift)

Question

基本上，我目前的设置是这样的：一个故事板ViewController，里面有3种类型的UI View（容器，前视图，后视图）。

我想实现的是（我不知道如何实现#2）。

1. 用户在表格上输入数据(卡的前面-视图控制器编号1)
2. 点击保存按钮（做动画翻转并重定向到一个新的视图控制器上
3. 新的视图控制器加载完毕（卡的背面--2号视图控制器）。

这是目前的代码翻转例子。

import UIKit

class HomeViewController: UIViewController {

    @IBOutlet weak var goButton: UIButton!
    @IBOutlet weak var optionsSegment: UISegmentedControl!

    let owlImageView = UIImageView(image: UIImage(named:"img-owl"))
    let catImageView = UIImageView(image: UIImage(named:"img-cat"))
    var isReverseNeeded = false

    override func viewDidLoad() {
        super.viewDidLoad()

        title = "Transitions Test"
        setupView()
    }

    fileprivate func setupView() {
        let screen = UIScreen.main.bounds
        goButton.layer.cornerRadius = 22
        //container to hold the two UI views
        let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 250, height: 250))
        containerView.backgroundColor = UIColor(red: 6/255, green: 111/255, blue: 165/255, alpha: 1.0)
        containerView.layer.borderColor = UIColor.white.cgColor
        containerView.layer.borderWidth = 2
        containerView.layer.cornerRadius = 20
        containerView.center = CGPoint(x: screen.midX, y: screen.midY)
        view.addSubview(containerView)
        //front view
        catImageView.frame.size = CGSize(width: 100, height: 100)
        catImageView.center = CGPoint(x: containerView.frame.width/2, y: containerView.frame.height/2)
        catImageView.layer.cornerRadius = 50
        catImageView.clipsToBounds = true
        //back view
        owlImageView.frame.size = CGSize(width: 100, height: 100)
        owlImageView.center = CGPoint(x: containerView.frame.width/2, y: containerView.frame.height/2)
        owlImageView.layer.cornerRadius = 50
        owlImageView.clipsToBounds = true

        containerView.addSubview(owlImageView)
    }

    @IBAction func goButtonClickHandler(_ sender: Any) {
        doTransition()
    }

    fileprivate func doTransition() {
        let duration = 0.5

        var option:UIViewAnimationOptions = .transitionCrossDissolve
        switch optionsSegment.selectedSegmentIndex {
            case 0: option = .transitionFlipFromLeft
            case 1: option = .transitionFlipFromRight
            case 2: option = .transitionCurlUp
            case 3: option = .transitionCurlDown
            case 4: option = .transitionCrossDissolve
            case 5: option = .transitionFlipFromTop
            case 6: option = .transitionFlipFromBottom
            default:break
        }

        if isReverseNeeded {
            UIView.transition(from: catImageView, to: owlImageView, duration: duration, options: option, completion: nil)

        } else {
            UIView.transition(from: owlImageView, to: catImageView, duration: duration, options: option, completion: nil)

        }

    isReverseNeeded = !isReverseNeeded

    }
}

Answer 1

视图控制器之间用翻转动画过渡有几种选择。

1. 你可以在IB中定义一个segue，配置该segue来做水平翻转动画。

   

   如果你想以编程的方式调用这个segue，在属性检查器中给这个segue一个 "Identifier "字符串，然后你就可以像这样执行。

   performSegue(withIdentifier: "SecondViewController", sender: self)
   

2. 或者，给实际的目标视图控制器的场景一个故事板标识符， 然后呈现视图控制器就可以呈现第二个视图控制器。

   guard let vc = storyboard?.instantiateViewController(identifier: "SecondViewController") else { return }
   vc.modalTransitionStyle = .flipHorizontal
   vc.modalPresentationStyle = .currentContext
   show(vc, sender: self)
   

3. 如果这个标准的翻转动画不是你想要的，你可以根据自己的意愿来定制它。 iOS给我们提供了丰富的控制权，通过指定过渡委托，提供动画控制器等方式来定制视图控制器之间的过渡。虽然有点复杂，但在WWDC 2017中已经有了概述。UIKit动画和过渡的进展。自定义视图控制器过渡 (约23:06进入视频)和WWDC 2013。使用视图控制器的自定义过渡.