How to animate UIView transform sequence like scaling then rotating in iOS?

Question

I wonder how to make a UIView animation that first scale to size and rotate that size instead of rotating on the original size?

I've tried a lot of ways like wrapping UIView animation in the completion of a UIView animation, using UIView animateKeyframes and so on.

However, I can't build a animation like it perfectly, please give me hints or keywords to search, thanks!

Answer 1

This should work according to your requirement (how to make a UIView animation that first scale to size and rotate that size instead of rotating on the original size?)

@IBOutlet var scaleRotateImage: UIImageView!
func scaleNTransform() -> Void {

    scaleRotateImage.layer.cornerRadius = scaleRotateImage.frame.size.height/2.0
    scaleRotateImage.clipsToBounds = true

    let scaleTransform = CGAffineTransform(scaleX: 3.0, y: 3.0)  // Scale
    let rotateTransform = CGAffineTransform(rotationAngle: CGFloat.pi) // Rotation
    let hybridTransform = scaleTransform.concatenating(rotateTransform) // Both Scale + Rotation

    // Outer block of animation
    UIView.animate(withDuration: 5.0, animations: {
        self.scaleRotateImage.transform = scaleTransform
        self.view.layoutIfNeeded()
    }) { (isCompleted) in

        // Nested block of animation
        UIView.animate(withDuration: 5.0, animations: {
            self.scaleRotateImage.transform = hybridTransform
            self.view.layoutIfNeeded()
        })

    }


}

Result