button press animation - iphone

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?

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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