UIButton AppStore buy button animation

Question

Do you have a sample code for the UIButton animation of the AppStore Price -> to Buy button. I tried a lot, but it doesn't work well with CAAnimationGroup (scale+translation) and it doesn't work with just setting it to the new frame-size in a UIView beginAnimations. The animation first sets the new width(immediatelly) and then the new origin .. so it is not the right effect ...

Thank you!

Answer 1

Are you making your changes inside the Core Animation block?

I created a simple view-based iPhone application to test this. The view has two rounded rect UIButton objects:

1. The first button is in the upper right corner with width 62 (and height 35) and initial title "$0.99". It is connected to the "button" outlet and "animate" action in the view controller. This is the button that will be animated when it is tapped.

2. The second button is at the bottom of the screen with title "Reset" and is connected to the "reset" action in my view controller.

Here is the view controller code:

UIButtonAnimationTestViewController.h:

#import <UIKit/UIKit.h>

@interface UIButtonAnimationTestViewController : UIViewController {
    IBOutlet UIButton *button;
    CGRect originalFrame;
}

- (IBAction)animate;
- (IBAction)reset;

@end

UIButtonAnimationTestViewController.m:

#import "UIButtonAnimationTestViewController.h"

@implementation UIButtonAnimationTestViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    originalFrame = button.frame;
}

- (IBAction)animate {
    CGRect frame = button.frame;
    frame.origin.x -= 30;
    frame.size.width += 30;

    [UIView beginAnimations:@"button" context:nil];
    button.frame = frame;
    [button setTitle:@"" forState:UIControlStateNormal];
    [UIView setAnimationDelegate:self];
    [UIView commitAnimations];
}

- (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {
    [button setTitle:@"BUY NOW" forState:UIControlStateNormal];
}

- (IBAction)reset {
    button.frame = originalFrame;
    [button setTitle:@"$0.99" forState:UIControlStateNormal];
}

Answer 2

There is an issue with this when you use a threepart image background for the UIButton: http://openradar.appspot.com/7290242

This will first pop the button to the right, then move it to the left. This approach will not work

Answer 3

There is a nice tutorial that shows you how to make one of these without image resources.

http://www.icodejunkie.com/?p=74