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!

Have you gone through this links:- https://stackoverflow.com/questions/3703922/how-do-you-create-a-wiggle-animation-similar-to-iphone-deletion-animation https://stackoverflow.com/questions/929364/how-to-create-iphones-wobbling-icon-effect — Zღk, Sep 05 '17 at 13:13
Try to look this: https://stackoverflow.com/questions/46021640/how-to-sequence-two-animations-with-delay-in-between/46021835#46021835 — Giuseppe Sapienza, Sep 05 '17 at 14:08
you should not write solution in question! You can write answer! and you should accept correct answer as per stackoverflow's guidelines! — Ketan Parmar, Sep 06 '17 at 05:45

Krunal · Answer 1 · 2017-09-05T13:22:26.643

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

This seems to be what I want, I've tried to build like this way , but can I concatenating three or more? I want to scale and shake it. Thanks! — Will Chen, Sep 05 '17 at 13:36
Can you share GIF of your requirement. (Youtube video is not accessible to me - due to network restriction), so I can help you better. — Krunal, Sep 05 '17 at 13:41

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

You can do something like,

Define radians to convert degrees into radians

#define RADIANS(degrees) (((degrees) * M_PI) / 180.0)

then in your viewDidAppear,

-(void)viewDidAppear:(BOOL)animated{

[super viewDidAppear:animated];

CGAffineTransform leftTransform = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(-10.0));
CGAffineTransform rightTransform = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(10.0));

_myView.transform = leftTransform;  //Here `_myView` is the your view on which you want animations!

[UIView beginAnimations:@"youCanSetAnimationIdHere" context:(__bridge void * _Nullable)(_myView)];
[UIView setAnimationRepeatAutoreverses:YES];
[UIView setAnimationRepeatCount:5];
[UIView setAnimationDuration:0.25];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(animationCompletedWithAnimationId:isCompleted:view:)];

_myView.transform = rightTransform;

[UIView commitAnimations];

}

and your animationCompletedWithAnimationId method should be like,

- (void) animationCompletedWithAnimationId:(NSString *)animationID isCompleted:(NSNumber *)isCompleted view:(UIView *)view
{
if ([isCompleted boolValue]) {
    UIView *myView = view;
    myView.transform = CGAffineTransformIdentity;

}
}

And the result is

You can change repeat count and radians as per your requirement !

can it add a transform of scale in sequence? I can't build it using the size scaled. It will back to the original size then rotate.. — Will Chen, Sep 05 '17 at 14:04
try to add like `_myView.transform = CGAffineTransformMakeScale(2, 2);` ! — Ketan Parmar, Sep 05 '17 at 14:14
I've tried to scale then rotate use your way, but it rotate on the original size... T T — Will Chen, Sep 05 '17 at 14:50

score 0 · Answer 3 · answered Sep 05 '17 at 13:08

Hoping you have achieved scaling or shaking your UIButton, this code will guide you to make UIView animation sequence repeat and autoreverse.

btn.frame = frame1;
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat animations:^{
    [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
        // Your changes to the UI, eg. scale UIButton up 300 points
        btn.frame = frame2;
    }];
    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
        // Your changes to the UI, eg. rotate or shake UIButton
    }];
} completion:nil];

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

3 Answers3