iOS - 卡片翻转动画

iOS - Card flip animation(iOS - 卡片翻转动画)

问题描述

我有两个 UIImageViews.一个是前"，一个是后".我正在尝试实现它，以便当您单击返回"时，它会触发动画并翻转卡片.

I have two UIImageViews. One is the 'Front' and the other is the 'Back'. I'm trying to implement it so that when you click onto the 'Back' it will trigger the animation and flip the card.

动画效果很好.但它使整页动画，这是我不想要的.我只希望 UIImageView 翻转.我看不出我做错了什么.可能是显而易见的.

The animation works perfectly. But it animates the full page, which I don't want. I only want the UIImageView to flip. I can't see what I'm doing wrong. Probably something obvious.

@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
    }
}

推荐答案

你的问题是你的UIImageViews直接在整页"视图上.

Your problem is that your UIImageViews are directly on the "full page" view.

transitionFromView 从其父视图中移除 fromView 并在具有给定动画的父视图上添加 toView.因此，它为超级视图设置了动画.

transitionFromView removes the fromView from its superview and adds the toView on the superview with the given animation. Thus, it animates the superview.

您应该包含一个作为容器服务的 UIView，并将两个 imageViews 作为子视图.在容器视图上添加您的点击手势.此外，你不应该对 imageView 有弱引用，因为一旦你完成了一次动画，你对后面的 imageView 的引用就会消失.将这些添加到代码中可能比故事板更好.无需隐藏 imageViews.

You should include a UIView that servers as a container and have both imageViews as subviews. Add your tap gesture on the containerview. Also, you should not have weak references to the imageViews, since once you have done the animation once, your reference to the back imageView will be gone. It is probably better to add these in code rather than storyboard. No need to hide the imageViews.

下面是一些示例代码:

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
        }   

    }

这篇关于iOS - 卡片翻转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！