How do you flip an single UIView around? - objective-c

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