button press animation

Question

So I've searched a lot but I didn't find an answer for my problem.

I want to make a button that would have two images, first image that is when button is in normal state, the other one when it is in highlighting state. The problem is that i want these images to change in animated manner, for example the first image fades out, when the second fades in. And they change in such a way that the animation time remains constant.

The only way I thought is, to make a custom button, add couple of ImageViews and on button touch down event, one ImageView fades in, other fades out, on button touch up event, I could do the opposite. But this method doesn't seem the most suitable. Is there a better option that I am not seeing?

did you mean you want to change image of Button selected or deselected buton...? — Nitin Gohel, Oct 17 '12 at 12:02
just bind your images' animation events on your button's touch up and touch down events... — HarshIT, Oct 17 '12 at 12:08
i have one button. On press down i want its image to change animated to other specified image. On touchup i want it to animate again into original image. — Lukas, Oct 17 '12 at 12:15
in that point you do not need the second animation block you have to put it to UIControlEventTouchUp action of the button — Ilker Baltaci, Oct 17 '12 at 12:22

score 6 · Answer 1 · answered Oct 17 '12 at 12:25

UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    myButton.frame = CGRectMake(80, 50, 150, 40);
    [myButton setTitle:@"Say, Hi!" forState:UIControlStateNormal];
    [myButton setBackgroundImage:[UIImage imageNamed:@"xyz.png"] forState:UIControlStateNormal];
    [myButton addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:myButton];


-(IBAction)buttonClicked:(UIButton *)sender
{
    [UIView animateWithDuration:0.7f
                     animations:^
     {
         [sender setAlpha:0.5f];
     }
                     completion:^(BOOL finished)
     {
         [sender setAlpha:1.0f];
        [sender setBackgroundImage:[UIImage imageNamed:@"abc.png"] forState:UIControlStateNormal];   }
     ];
}

you can set the animation duration and also alpha accordingly.

but i think this would work not the way i wanted. If the user touches down the button, and releases the button when the animation isn't finished, user would see the flick. So i need the animation to be smooth. — Lukas, Oct 17 '12 at 13:35
yeah you are right, and that's the reason i have asked you to change the alpha perhaps you could see the difference. — Vinod ram, Oct 17 '12 at 16:51

score 5 · Accepted Answer · answered Oct 17 '12 at 12:17

I've done it the following way, similarly as Ilker Baltaci has described it: I subclassed UIButton (although it's not advised because it's a class cluster) and added a function to it:

- (void) blinkAndFlipButtonAnimationWithText: (NSString*) buttonText {
    [UIView animateWithDuration: 0.2 delay: 0 options: UIViewAnimationOptionCurveLinear 
                     animations: ^{ 
                         self.alpha = 0.1;
                     } 
                     completion: ^(BOOL finished) {
                         [UIView animateWithDuration: 0.2 delay: 0 options: UIViewAnimationOptionCurveLinear 
                                          animations: ^{ 
                                              self.alpha = 1;
                                          } 
                                          completion: ^(BOOL finished) {
                                              [UIView transitionWithView: self duration: 0.25 options: (UIViewAnimationOptionTransitionFlipFromBottom | UIViewAnimationOptionCurveEaseInOut)
                                                              animations: ^{ 
                                                                  [self setTitle: buttonText forState: UIControlStateNormal];
                                                              } 
                                                              completion: ^(BOOL finished) { 
                                                                  if ([self.delegate respondsToSelector: @selector(primaCustomButtonDidFinishFlipAnimation:)]) {
                                                                      [self.delegate primaCustomButtonDidFinishFlipAnimation: self];
                                                                  } 
                                                              }
                                               ];
                                          }
                          ];
                     }
     ];
}

a lot of block-animation cascades, ugly i know! But anyway, you can adapt the animation block to your needs and exclude the delegate callback.

then in your IBAction/target-action method for the button press just call the method, like:

- (IBAction) facebookButtonPresse: (id) sender {
    [self.facebookButton blinkAndFlipButtonAnimationWithText: @"+3"];
}

Ilker Baltaci · Answer 3 · 2012-10-17T12:27:15.463

if you want fade out/fade in animation for the button i can replace you custom button with an UIImageview which has the same background image as you initial uibutton.This will be the first thing to to in the action of teh button.When the button is replaced with the uiview cou can apply fade out animation to UIImageview from initial backgorund image to new (selected version). When the animation ends, in the completion block begin another animation which fades out the selected iamge to normal background iamge.Then the second animation ends remove your uiimageview and add your button back.

//Declare your uiimageviews as ivars

            UIImageView *imageViewnormal = [[UIimageView alloc] initWithImage:normalIamge];
            UIImageView *imageViewhighlighted = [[UIimageView alloc] initWithImage:highlightImage];

In the action for UIControlEventTouchDown of your button

             // make your button invisible
             yourbutton.alpha = 0;
             //add to same rect 2 imageviews with initial and selected backgrounds of uibutton

            imageViewnormal.alpha = 1;
            imageViewhighlighted.alpha = 0;

           [self.view addSubview:imageViewhighlighted];
           [self.view addSubview:imageViewnormal];

            // newImageViewWithInitialBackground needs to be inserted secondly and alpha value 1
           // newImageViewWithSelectedBackground has alpha 0 and is behind newImageViewWithInitialBackground

        [UIView animateWithDuration:0.3
                         animations:^
         {
             imageViewnormalalpha = 0;
             imageViewhighlighted.alpha = 1;
         }
                         completion:^(BOOL finished)
         {



         }];

In the action for UIControlEventTouchUpInside of your button

[UIView animateWithDuration:0.3
                              animations:^
              {

             imageViewnormal.alpha = 1;
             imageViewhighlighted.alpha = 0;                  

              }
                              completion:^(BOOL finished)
              {

               //Remove both of the uiimageviews aand make your button visible
             [imageViewnormal removeFromSuperview];
             [mageViewhighlighted removeFromSuperview];
             yourbutton.alpha  = 1;     

              }];

score 2 · Answer 4 · answered Oct 17 '12 at 13:08

use following code, it's working properly, I used this code in my project:

    UIButton *myButton=[UIButton buttonWithType:UIButtonTypeRoundedRect];
    myButton.frame=CGRectMake(40, 20, 80, 25);
    [myButton setImage:[UIImage imageNamed:@"normalImage.png"] forState:UIControlStateNormal];
    [myButton setImage:[UIImage imageNamed:@"highlightedImage.png"] forState:UIControlStateHighlighted];
    [myButton addTarget:self action:nil forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:myButton];

It is working but not the way i wanted. Its just normal way without the animation.. — Lukas, Oct 17 '12 at 13:37

score 2 · Answer 5 · answered Aug 16 '16 at 10:04

xCode 7,iOS9

//for zoom in
    [UIView animateWithDuration:0.5f animations:^{

        self.sendButton.transform = CGAffineTransformMakeScale(1.5, 1.5);
    } completion:^(BOOL finished){}];
// for zoom out
        [UIView animateWithDuration:0.5f animations:^{

            self.sendButton.transform = CGAffineTransformMakeScale(1, 1);
        }completion:^(BOOL finished){}];

button press animation

5 Answers5