iOS卡翻转动画

我有两种观点。一个是“前面”，另一个是“后面”。 我正在尝试实现它，这样当你点击“后退”时，它就会触发动画并翻转卡片

动画效果很好。但它会使整个页面充满活力，这是我不想要的。我只希望

UIImageView

翻转。我看不出我做错了什么。可能是显而易见的

@IBOutlet weak var answerImageViewer: UIImageView?
@IBOutlet weak var backAnswerImageViewer: UIImageView?

override func viewDidLoad() {
    super.viewDidLoad()
    startNewGame()
    retrieveNewQuestion()
    setupBannerMessage()
    customPlayButtons()

    let tapGesture = UITapGestureRecognizer(target: self, action: Selector("tap"))
    tapGesture.numberOfTapsRequired = 1
    backAnswerImageViewer?.addGestureRecognizer(tapGesture)
    backAnswerImageViewer?.userInteractionEnabled = true
}

var showingBack = true

func tap (){
    if showingBack{
       UIView.transitionFromView(self.backAnswerImageViewer!, toView: self.answerImageViewer!, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromRight, completion: nil)

        backAnswerImageViewer?.hidden = true
        answerImageViewer?.hidden = false

        showingBack = false
    }
    else {
        showingBack = true

        UIView.transitionFromView(self.answerImageViewer!, toView: self.backAnswerImageViewer!, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromRight, completion: nil)

        backAnswerImageViewer?.hidden = false
        answerImageViewer?.hidden = true
    }
}

---

此解决方案用于翻转“一张卡”，使用两个

UIImageView

（就像您正在使用…），我在UICollectionView中使用它，这当然不是必需的

class CardCVCell: UICollectionViewCell {
    @IBOutlet weak var cardFrontImageView: UIImageView!
    @IBOutlet weak var cardBackImageView: UIImageView!

    private var flipped: Bool = false {
        didSet {
            cardFrontImageView.visible = flipped
            cardBackImageView.hidden = flipped
        }
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        cardBackImageView.backgroundColor = UIColor.brownColor()
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        cardFrontImageView.image = nil
        flipped = false
    }

    func flipCard(cardModel: Card) {
        let flipped = cardModel.flipped
        let fromView = flipped ? cardFrontImageView : cardBackImageView
        let toView = flipped ? cardBackImageView : cardFrontImageView
        let flipDirection: UIViewAnimationOptions = flipped ? .TransitionFlipFromRight : .TransitionFlipFromLeft
        let options: UIViewAnimationOptions = [flipDirection, .ShowHideTransitionViews]
        UIView.transitionFromView(fromView, toView: toView, duration: 0.6, options: options) {
            finished in
            cardModel.flipped = !flipped
        }
    }
}

代码取自my，这是一款记忆游戏，从Instagram获取图像

---

请注意，模型卡必须是类而不是值类型

您需要一个容器视图。将

answerImageViewer

和

backAnswerImageViewer

放在一个

UIView

中。这是我的示例代码

    let frontView = UIView()
    let backView = UIView()

    let frame = CGRect(x: 40, y: 100, width: 300, height: 400)
    frontView.backgroundColor = .red
    backView.backgroundColor = .blue

    frontView.frame = CGRect(x: 0, y: 0, width: 300, height: 400)
    backView.frame = CGRect(x: 0, y: 0, width: 300, height: 400)

    let containerView = UIView()
    containerView.frame = frame

    containerView.addSubview(backView)
    containerView.addSubview(frontView)

    view.addSubview(containerView)

extension UIView{

    func showFlip(){
            if self.isHidden{
                UIView.transition(with: self, duration: 1, options: [.transitionFlipFromRight,.allowUserInteraction], animations: nil, completion: nil)
                self.isHidden = false
            }

        }
    func hideFlip(){
        if !self.isHidden{
            UIView.transition(with: self, duration: 1, options: [.transitionFlipFromLeft,.allowUserInteraction], animations: nil,  completion: nil)
            self.isHidden = true
        }
    }
}

---

您的问题是UIImageView直接位于“完整页面”视图上

transitionFromView从其superview中删除fromView，并在具有给定动画的superview上添加toView。因此，它会设置superview的动画

您应该包括一个UIView，它将服务器作为一个容器，并将两个ImageView都作为子视图。在containerview上添加您的点击手势。此外，您不应该对imageView进行弱引用，因为一旦完成一次动画，您对back imageView的引用将消失。在代码中添加这些可能比在情节提要中添加要好。无需隐藏ImageView

以下是一些示例代码：

class MyViewController: UIViewController {

        @IBOutlet weak var containerView: UIView!

        private let backImageView: UIImageView! = UIImageView(image: UIImage(named: "back"))
        private let frontImageView: UIImageView! = UIImageView(image: UIImage(named: "front"))

        private var showingBack = false

        override func viewDidLoad() {
            super.viewDidLoad()

            frontImageView.contentMode = .ScaleAspectFit
            backImageView.contentMode = .ScaleAspectFit

            containerView.addSubview(frontImageView)
            frontImageView.translatesAutoresizingMaskIntoConstraints = false
            frontImageView.spanSuperview()

            let singleTap = UITapGestureRecognizer(target: self, action: #selector(flip))
            singleTap.numberOfTapsRequired = 1
            containerView.addGestureRecognizer(singleTap)
        }

        func flip() {   
            let toView = showingBack ? frontImageView : backImageView
            let fromView = showingBack ? backImageView : frontImageView
            UIView.transitionFromView(fromView, toView: toView, duration: 1, options: .TransitionFlipFromRight, completion: nil)
            toView.translatesAutoresizingMaskIntoConstraints = false
            toView.spanSuperview()
            showingBack = !showingBack
        }   

    }

---

如果您有一个将“card”作为变量的

按钮

，并且您想将他的图像更改为一个名为“1”的新图像。你所要做的就是：

let image = UIImage(named: "1")
card.setImage(image, for: .normal)
UIView.transition(with: card, duration: 2, options: .transitionFlipFromRight, animations: nil, completion: nil)

您可以使用此代码

UIView.transition(with: self.yourViewName, duration: 0.5, options: [.transitionFlipFromRight], animations: nil, completion: nil)

---

试试这个扩展，也许它很容易使用

extension UIView{

    func showFlip(){
            if self.isHidden{
                UIView.transition(with: self, duration: 1, options: [.transitionFlipFromRight,.allowUserInteraction], animations: nil, completion: nil)
                self.isHidden = false
            }

        }
    func hideFlip(){
        if !self.isHidden{
            UIView.transition(with: self, duration: 1, options: [.transitionFlipFromLeft,.allowUserInteraction], animations: nil,  completion: nil)
            self.isHidden = true
        }
    }
}

在单击操作中使用此选项

---

前面的答案很好，但添加了“showHideTransitionViews”作为选项，它允许您不必手动隐藏和显示已设置动画的视图。请记住，这两个视图需要位于另一个视图中。此过渡将旋转超级视图

  UIView.transition(from: view1, to: view2, duration: 0.5, options: [.transitionFlipFromLeft, .showHideTransitionViews], completion: nil)

---

根据Pankaj的回答

在iOS 12中，UIView.transition方法的使用有点不推荐

在iOS 12设备中，虽然我已将代码从Swift 4.0更新为Swift 4.2，但我遇到了翻卡问题

你可能会误解这一点，因为；不知何故，Xcode不建议改变这一点。当我试图重写UIView.transition方法时，我意识到了这一点（多亏了Intellisense）

之前：

UIView.transition(with: cardView, duration: 1.0, options: transitionOptions, animations: {
        self.cardView.isHidden = true
        self.downButtonForBackCard.alpha = 1
    })

    UIView.transition(with: backCardView, duration: 1.0, options: transitionOptions, animations: {
        self.backCardView.isHidden = false
    })

之后：

 UIView.transition(with: cardView, duration: 1.0, options: transitionOptions, animations: {
        self.downButtonForBackCard.alpha = 1

    }) { (finish) in
        self.cardView.isHidden = true
    }

    UIView.transition(with: backCardView, duration: 1.0, options: transitionOptions, animations: {
        self.backCardView.isHidden = false
    }) { (finish) in

    }

PS：这两个密码都是我的。不要复制粘贴，只是举个例子

我希望我能拯救一些人的生命

对于Swift 4

最好使用UIButton而不是UIImageView

var isBackImageOpen = false

if isBackImageOpen {
isBackImageOpen = false
let image = UIImage(named: "backImage")
myBtn.setImage(image, for: .normal)
UIView.transition(with: myBtn, duration: 0.3, options: .transitionFlipFromLeft, animations: nil, completion: nil)

} else {

isBackImageOpen = true
let image = UIImage(named: "frontImage")
myBtn.setImage(image, for: .normal)
UIView.transition(with: myBtn, duration: 0.3, options: .transitionFlipFromRight, animations: nil, completion: nil)
}

---

希望这个答案有帮助：）

你说的整页动画是什么意思？你能提供一个屏幕截图吗？视图控制器不是只翻转UIImageView，而是翻转。你应该使用

UIView.animation选项显示HideTransitionViews

我的整个UIView正在旋转，而不是UIImageView：（@ray king您是否将UIImageViews传递到

转换FromView:toView:duration

？是的，但我发现它是错误的子视图结构整个viewController正在翻转，即使我只将uiview设置为

转换FromView:toView:duration

。想法？@david seek，您确定没有意外设置

t在
UIViewController
上查看
或
从视图
到
视图（
self.view
）：提供一个简单的解决方案。我在即将推出的抽认卡应用程序中实现了它。我添加了一个布尔值，以便在翻转之间进行更改。“如果翻转{UIView.transition（使用：flashcardView，持续时间：0.5，选项：.transitionFlipFromRight，动画：nil，完成：nil）isFlipped=false}其他{UIView.transition（使用：flashcardView，持续时间：0.5，选项：.transitionFlipFromLeft，动画：nil，完成：nil）isFlipped=true}”当我尝试这段代码时，图像仅在翻转后设置，而不是在翻转时设置…不要复制粘贴答案