How to flip an imageView in Swift

Question

Ive been trying to make two imageViews alternate with a flip animation when I press a button. Both the imageViews and button are created in a storyboard.

Here is where I am at after days of working on this, and searching for answers. I am getting very close, but at the moment, once the image flips the first time it works, and then the second flip results in both image views moving into the upper left corner of the screen.

I think it might be something to do with how I am setting the container view. Maybe it gets disconnected after the first flip, and needs to be reset?

Any help would be greatly appreciated.

import UIKit
var flipAnimationContainer: UIView!
class flipViewController: UIViewController {

var showingBack = false


@IBOutlet weak var frontView: UIImageView!

@IBOutlet weak var backView: UIImageView!

@IBAction func flipButton(sender: AnyObject) {


    if (showingBack) {


        UIView.transitionFromView(backView, toView: frontView, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromBottom, completion: nil)

        showingBack = false


    } else {


        backView.hidden = false

        UIView.transitionFromView(frontView, toView: backView, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromBottom, completion: nil)

        showingBack = true

    }


}


override func viewDidLoad() {

    super.viewDidLoad()


    //  let rect = CGRectMake(self.headsView.frame.minX, self.headsView.frame.minY, self.headsView.frame.width, self.headsView.frame.height)

    animationContainer = UIView(frame: self.frontView.frame)

    animationContainer.addSubview(backView)

    animationContainer.addSubview(frontView)

    view.addSubview(flipAnimationContainer)


    backView.hidden = true

}


override func didReceiveMemoryWarning() {

    super.didReceiveMemoryWarning()

    // Dispose of any resources that can be recreated.

    }


}

Answer 1

Here is what I have now. It is transitioning between imageViews, keeping them in one place, but they are in the wrong place on screen, and there is no flip animation:

import UIKit

var animationContainer: UIView!

class ViewController: UIViewController {

    var showingBack = false

    @IBOutlet weak var frontView: UIImageView!

    @IBOutlet weak var backView: UIImageView!

    @IBAction func flipButton(sender: AnyObject) {

        if (showingBack) {

            UIView.transitionFromView(backView, toView: self.frontView, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromBottom | UIViewAnimationOptions.ShowHideTransitionViews, completion: nil)
            showingBack = false

        } else {

            backView.hidden = false
            UIView.transitionFromView(frontView, toView: self.backView, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromBottom | UIViewAnimationOptions.ShowHideTransitionViews, completion: nil)
            showingBack = true



        }


    }

    override func viewDidLoad() {
        super.viewDidLoad()

        animationContainer = UIView(frame: self.frontView.frame)
        frontView.setTranslatesAutoresizingMaskIntoConstraints(true)
        backView.setTranslatesAutoresizingMaskIntoConstraints(true)
        animationContainer.addSubview(backView)
        animationContainer.addSubview(frontView)
        view.addSubview(animationContainer)

        backView.hidden = true

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

Answer 2

Before adding frontView and backView as subviews.

frontView.setTranslatesAutoresizingMaskIntoConstraints(true)
backView.setTranslatesAutoresizingMaskIntoConstraints(true)

After that. In flipButton function.

UIView.transitionFromView(backView, toView: self.frontView, duration: 1, options: .TransitionFlipFromBottom | .ShowHideTransitionViews , completion: nil)

.ShowHideTranstionViews option will prevent the fromView from being replaced by the toView.