Search code examples
swiftimageanimationuiviewanimationtransition

UIDatePicker's Change Year Arrow's Animation Transition

What is the animation transition used in the right-arrow image to the down-arrow image when changing the year in the UIDatePicker control? The animation smoothly rotates the start image to the end image like so:

The right arrow smoothly rotates and transitions to the down arrow

I am trying to mimic this transition for an image in my code. In viewDidLoad(), I have:

    myButton.setImage(UIImage(named: "rightArrow")?.withRenderingMode(.alwaysTemplate), for: .normal)

and then within the function invoked when that button is tapped, I do:

    UIView.transition(with: myButton, duration: 0.6, options: .transitionCrossDissolve, animations: {
            self.myButton.setImage(UIImage(named: "downArrow")?.withRenderingMode(.alwaysTemplate), for: .normal)
        }, completion: nil)

I am using .transitionCrossDissolve here, but obviously it isn't the right transition. I tried each of the seven available transition options, but none of them behave like in UIDatePicker. Is there an easy way to create this "rotating" transition?

Solution

  • I finally figured it out. This will animate the rotation of the arrow:

        UIView.transition(with: myButton, duration: 0.2, options: [], animations: {
        self.myButton.transform = CGAffineTransform(rotationAngle: .pi/2)
    }, completion: nil)

    EDIT -- shorter solution:

        UIView.animate(withDuration: 0.2) {
        self.myButton.transform = CGAffineTransform(rotationAngle: .pi/2)
    }