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!