How do you flip an single UIView around?

Question

I'm trying to make a tile based game similar to the board game memory. I want the tiles which are UiViews to flip when they are pressed a the picture gets show. Is it possible to do this? I've been looking but all seems to show methods for transitions between views.

Answer 1

You can use this class to do a flip like animation on tap.

class FlippingView : UIView
{
    var frontView : UIImageView!
    var backView : UIImageView!
    var isAnimating : Bool = false

    override init(frame: CGRect) {
        super.init(frame: frame)
        frontView = UIImageView(frame: CGRectMake(0, 0, frame.size.width, frame.size.height))
        backView = UIImageView(frame: frontView.frame)
        self.addSubview(frontView)
        self.addSubview(backView)
        self.backView.hidden = true

        let tapRecognizer = UITapGestureRecognizer(target: self, action: "flip")
        self.addGestureRecognizer(tapRecognizer)
    }

    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func flip()
    {
        if isAnimating {
            return
        }
        isAnimating = true
        if (backView.hidden)
        {
            frontView.layer.transform = CATransform3DMakeRotation(0, 0, 0, 0)
            self.backView.layer.transform = CATransform3DMakeRotation(3.14/2, 0, 1, 0)
            self.backView.hidden = false
            UIView.animateKeyframesWithDuration(2, delay: 0, options: nil, animations: {

                UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 0.5, animations: {
                     self.frontView.layer.transform = CATransform3DMakeRotation(3.14/2, 0, 1, 0)
                })

                UIView.addKeyframeWithRelativeStartTime(0.5, relativeDuration: 0.5, animations: {
                    self.backView.layer.transform = CATransform3DMakeRotation(3.14, 0, 1, 0)
                })
                }, completion: { (finished) -> Void in
                    self.isAnimating = false
                    self.frontView.hidden = true
            })
        }
        else
        {
            backView.layer.transform = CATransform3DMakeRotation(3.14, 0, 1, 0)
            self.frontView.layer.transform = CATransform3DMakeRotation(3.14/2, 0, 1, 0)
            self.frontView.hidden = false
            UIView.animateKeyframesWithDuration(2, delay: 0, options: nil, animations: {

                UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 0.5, animations: {
                    self.backView.layer.transform = CATransform3DMakeRotation(-3.14/2, 0, 1, 0)
                })

                UIView.addKeyframeWithRelativeStartTime(0.5, relativeDuration: 0.5, animations: {
                    self.frontView.layer.transform = CATransform3DMakeRotation(0, 0, 1, 0)
                })
                }, completion: { (finished) -> Void in
                    self.isAnimating = false
                    self.backView.hidden = true
            })
        }
    }
}

You can use it like this

override func viewDidLoad() {

    flippingView = FlippingView(frame: CGRectMake(100, 100, 100, 100))
    flippingView.frontView.image = UIImage(named: "1.png")
    flippingView.backView.image = UIImage(named: "2.png")
    self.view.addSubview(flippingView)
}