CODEWITHSUNDEEP
iphoneobjective-ciosipaduianimation
Lukas
Lukas

Reputation: 2535

button press animation

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?

Upvotes: 3

Views: 11914

Answers (5)

Ahmed Abdallah
Ahmed Abdallah

Reputation: 2355

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){}];

Upvotes: 2

Himanshu Mahajan
Himanshu Mahajan

Reputation: 4799

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];

Upvotes: 2

Ilker Baltaci
Ilker Baltaci

Reputation: 11789

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;     

              }];

Upvotes: 2

Vinod ram
Vinod ram

Reputation: 95

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.

Upvotes: 6

Nenad M
Nenad M

Reputation: 3055

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"];
}

Upvotes: 5

Related Questions