如何通过单击按钮自定义翻转和转换到另一个视图控制器？（迅速）答案

【问题标题】：how to custom flip and transition to another view controller with button click ? (n swift)如何通过单击按钮自定义翻转和转换到另一个视图控制器？（迅速）
【发布时间】：2023-03-29 17:44:01
【问题描述】：

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

我想完成什么（我不知道如何实现#2）

用户在表单上输入数据（卡片正面-View Controller 编号 1）
单击保存按钮（进行动画翻转并重定向到新的视图控制器）
新的视图控制器加载（卡片背面 - 视图控制器编号 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

    }
}

【问题讨论】：

标签： ios swift animation uiview flip

【解决方案1】：

有几种方法可以在视图控制器之间使用翻转动画进行转换：

您可以在 IB 中定义一个 segue，配置该 segue 以执行水平翻转动画：

如果您想以编程方式调用该 segue，请在属性检查器中为该 segue 提供一个“标识符”字符串，然后您可以像这样执行它：
```
performSegue(withIdentifier: "SecondViewController", sender: self)
```

或者，给实际目标视图控制器的场景一个故事板标识符，呈现视图控制器可以只呈现第二个视图控制器：

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

如果这个标准的翻转动画不是您想要的，您可以根据自己的喜好对其进行自定义。 iOS 通过指定转换委托、提供动画控制器等，为我们提供了对视图控制器之间自定义转换的丰富控制。这有点复杂，但在 WWDC 2017 Advances in UIKit Animations and Transitions: Custom View Controller Transitions（视频大约 23:06）和 WWDC 2013 @ 中有概述987654323@.

【讨论】：