make a UIButton imageView Bigger than the frame and then back to its original size?

Question

I want to make the UIButton image transform from its current size to twice its size and then back to its original size similar to the facebook "like" animation.

I'm using this code but for some reason it is doing the reverse action; ie first shrinks and only then getting large again.

What am I doing wrong? It works perfectly on a uiimageView but not on a uibutton

[self.likeButton setClipsToBounds:NO];
CGAffineTransform firstTransform = self.likeButton.imageView.transform;
[UIView animateWithDuration:.15f animations:^{

    self.likeButton.imageView.transform = CGAffineTransformScale(firstTransform, 2, 2);

} completion:^(BOOL finished) {

    [UIView animateWithDuration:.15f animations:^{

        self.likeButton.imageView.transform = firstTransform;
    }];
}];

Answer 1

Layers have a property masksToBounds and UIView has clipsToBounds . Most likely the button has these set to YES on the primary view or subviews. Its possible you can discover which ones have these set to YES, and set them temporarily to NO.

Answer 2

If anyone is interested I solved it by adding a uiimageview above the button and animate it instead of the button image.

its a hack but its working.

Answer 3

//set button.masktobound=NO

[UIView animateWithDuration:.15f animations:^{

 self.likeButton.imageView.transform = CGAffineTransformMakeScale(2.0,2.0);

} completion:^(BOOL finished) {

[UIView animateWithDuration:.15f animations:^{

    self.likeButton.imageView.transform = CGAffineTransformMakeScale(1.0,1.0);
}];
}];

//Try this