Keep animation when changing viewController

Question

I'm trying to code an animation behind the profile picture, in order to encourage the user to click on it. It's a circle which become bigger and smaller then.

override func layoutSubviews() {
  super.layoutSubviews()

  UIView.animate(withDuration: 1.0, delay: 0, options: [.repeat, .autoreverse], animations: {

     self.bouncedView.transform = CGAffineTransform(scaleX:
        1.3, y: 1.3)

      }, completion: nil)

}

The problem is that, when I go to another viewController, the animation is stopped and the circle stays like you can the on the screen shot. Do you know how I could avoid this issue ?

Answer 1

You can just add the completion block, where you will create the first state of view. For example:

UIView.animate(withDuration: 1.0, delay: 0, options: [.repeat, .autoreverse], animations: {

 self.bouncedView.transform = CGAffineTransform(scaleX:
    1.3, y: 1.3)

  } completion: { _ in
        self.bouncedView.transform = CGAffineTransform(scaleX:
    1.0, y: 1.0)
    }

Answer 2

Well, I don't yet have a satisfying answer yet (at least that would satisfy me), but I would like to add at least some insight to which I was able to get by a bit of experimenting.

First of all, it seems that the animation gets ended when the viewController is not currently the one presented. In your case that means that the animation stops and finishes with the state, in which the view is 1.3 times bigger, and stops repeating. layoutSubviews gets called only when you present it the first time. At least the viewController.viewDidLayoutSubviews gets called only at the beginning and not when you go back (so layoutSubviews will not get executed when the view reappears) - so the animation won't get restarted.

I tried to move the animation to the viewDidAppear of a UIViewController - that did not work either, because stopping animation resulted in state in which the view was already scaled 1.3 times. Resetting the state to CGAffineTransform.identity before creating the animation did work.

Now as I said, this can serve you as a workaround on how to get it working, however, I think what you really are looking for is some hook that would tell your view (not viewController) that it got presented again. But the following minimal example can at least help others to take a look at it and not start from scratch.

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {

    let animator = UIViewPropertyAnimator(duration: 1, timingParameters: UICubicTimingParameters(animationCurve: .linear))

    init(title: String) {
        super.init(nibName: nil, bundle: nil)
        self.title = title
    }

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

    let animatableView = UIView()

    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white

        animatableView.frame = CGRect(x: 150, y: 400, width: 100, height: 100)
        animatableView.backgroundColor = UIColor.magenta
        view.addSubview(animatableView)

        self.view = view
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        self.animatableView.transform = CGAffineTransform.identity
        UIView.animate(withDuration: 1.0, delay: 0, options: [.repeat, .autoreverse], animations: {
            self.animatableView.transform = CGAffineTransform(scaleX:
                1.3, y: 1.3)
        }, completion: nil)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        print("\(self.title) >> Lay out")
    }
}

let tabBar = UITabBarController()
tabBar.viewControllers = [MyViewController(title: "first"), MyViewController(title: "second"), MyViewController(title: "third")]
tabBar.selectedIndex = 0
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = tabBar

EDIT

I added few lines to check if the self.animatableView.layer.animationKeys() contains any animations, it seems that switching tabs removes the animation from the view's layer - so you have to find a way to add the animation everytime the view reappears.

EDIT 2 So I would go with @SWAT's answer and use willMove(toWindow:) instead of layoutSubviews.

Answer 3

Do a transform to .identity on ViewDidAppear. Something similar to below code:

class HomeController: UIViewController {

@IBOutlet weak var viewToAnimate: UIView!
override func viewDidLoad() {
    super.viewDidLoad()
}

override func viewWillAppear(_ animated: Bool) {
    self.viewToAnimate.transform = .identity
    animateView()
}

func animateView(){
    UIView.animate(withDuration: 1.0, delay: 0, options: [.repeat, .autoreverse], animations: {

        self.viewToAnimate.transform = CGAffineTransform(scaleX:
            1.3, y: 1.3)

    }, completion: nil)
}

}

The problem as you might have guessed is that the UIView.animate is only called on the ViewDidLoad method and since we don't have access that code while returning to this ViewController from another, it is better to start the animation in the ViewWillAppear method.

If the same issue occurs when you switch between tabs, then please make a separate UIView subclass for the view that you want to animate and proceed as follows:

class AnimateView: UIView {

override func awakeFromNib() {
    super.awakeFromNib()
}

override func willMove(toWindow newWindow: UIWindow?) {
    super.willMove(toWindow: newWindow)
    self.transform = .identity
    animateView()
}

func animateView(){
    UIView.animate(withDuration: 1.0, delay: 0, options: [.repeat, .autoreverse], animations: {

        self.transform = CGAffineTransform(scaleX:
            1.3, y: 1.3)

    }, completion: nil)
}

}

Here, you have taken the animate function to the UIView object and whenever the view appears, the animation will be reset.