How can I animate the resizing of a button without affecting its border?

Question

On iOS7, I need to generate an animation of a button which grows laterally (on one side only). To achieve this effect I tried a combination of scaling and translation, but the problem is that scaling affects the size of the border as well, which is not something I want.

In this example, after doubling the length of the button, the side borders double their width as well:

UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button setFrame:CGRectMake(100, 100, 100, 100)];
[[button layer] setBorderWidth:2.0f];
[[button layer] setBorderColor:[UIColor blackColor].CGColor];

[UIView beginAnimations:@"button" context:nil];
[UIView setAnimationDuration:1];

button.transform = CGAffineTransformConcat( CGAffineTransformMakeScale(2,1), CGAffineTransformTranslate(button.transform, 50, 0));

button.alpha = 1.0f;
[UIView commitAnimations];
[self.view addSubview:button];

I wonder if there is a clever solution to achieve this effect without using CGAffine transformations.

Answer 1

You can animate the borderWidth of the button with other properties, it's animatable. Good Luck!

Answer 2

UIImage *originalImage = [UIImage imageNamed:@"myImage.png"];
UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
UIImage *stretchableImage = [originalImage resizableImageWithCapInsets:insets];
[myButton setBackgroundImage:stretchableImage forState:UIControlStateNormal];
// the image will be stretched to fill the button, if you resize it.

The values in the UIEdgeInsets struct determine the margins you don't want to be stretched.

answer from here