iPhone - How to animate a button when pressed?

Question

Is there a way to make a custom animation when clicking on an iPhone button? I would like something like the App Store button - it shows the price, and then when you click on it, it changes color and the text changes to buy now, then when you click it again, it completes the purchase.

The UIViewAnimationTransition only contains a few values which don't provide the full functionality. Is it possible to do something like this but with the animation:

- (IBAction) changeButtonDisplay:(id)sender {

  [UIView beginAnimations:nil context:NULL];
  [UIView setAnimationDuration:0.8];
  [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:purchaseButton cache:NO]; //the built in UIViewAnimationTransition values don't provide enough flexibility

  [purchaseButton setTitle:@"Buy Now" forState:UIControlStateNormal];
  [purchaseButton setBackgroundColor:[UIColor greenColor]];
  [purchaseButton addTarget:self action:@selector(purchaseItems:) forControlEvents:UIControlEventTouchUpInside];

  [UIView commitAnimations];

}

This code works and will display the proper transition and allow for the second click to do the proper action, but the title and color changes instantly, not in a smooth animation. Is it possible to do such an animation easily, of do I have to create a UIButton subclass and do the animation "manually"? If so, what method would I have to override?

Answer 1

Rather than just changing the title and target, etc of the button, have two separate buttons that do each action and look different. Then when you press the button, call a method that removes the current button from its super view and adds the new button to the view in its place. Wrap that up in some UIView animation block and you should get your animation.

Also, for this to work, you'll need to set the animation transition on the superview of the button. So it might be handy to have a 'container view' as it may be and then add you buttons as subviews of that.

Pseudo code might look something like so:

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.8];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:buttonConteinerView cache:NO]; //the built in UIViewAnimationTransition values don't provide enough flexibility

[purchaseButton retain];
[purchaseButton removeFromSuperView];

[buttonContainerView addSubview:secondPurchaseButton];

[UIView commitAnimations];

Answer 2

A Standard UIView will do what you want. UIView's backgroundColor is an animatable property.

I would make own "button" by subclassing UIView OR alternatively subclass a UIButton and add subviews to it. (note: UIButtons were a pain about this in 2.2, not sure in 3.0)

You need a UILabel for each text state:

UILabel *textForStateOne;
UILabel *textForStateTwo;

And you can change the background color of the parent view.

So then you make a method in your new button class:

 -(void)toggleState{

myState = !myState;

  if(myState){

      [UIView beginAnimations:nil context:NULL];
      [UIView setAnimationDuration:0.8];

      [textForStateOne setAlpha:1.0]
      [textForStateTwo setAlpha:0.0]

      [self setBackgroundColor:[UIColor greenColor]];

      [UIView commitAnimations];


  } else{

       //do the opposite here

  }




}