How to reduce the opacity of an UIButton gradually?

406 views Asked by At

In my project i have an UIButton which on clicking zooms. Everything is fine till here but i require the opacity of the button to gradually decrease from 1 to 0. I mean it should decrease in 1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0.0 sequence. My current code is

    -(void)roundButtonAnimation
{
    self.buttonZoom = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    self.buttonZoom.duration = 0.8f;
    self.buttonZoom.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(2,2,2)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(3,3,3)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(5,5,5)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(6,6,6)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(7,7,7)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(9,9,9)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(10,10,10)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(11,11,11)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(12,12,12)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(13,13,13)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(14,14,14)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(15,15,15)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(16,16,16)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(17,17,17)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(18,18,18)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(50,50,50)]];
    self.buttonZoom.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    self.roundButton.transform = CGAffineTransformMakeScale(0,0);
    self.roundButton.alpha = 0.3;
    [self.roundButton.layer addAnimation:self.buttonZoom forKey:@"buttonScale"];

[self.CLSpinnerView1 stopAnimating];
    //[self performSelector:@selector(secondView) withObject:self afterDelay:0.3];

    [self performSelector:@selector(postNotification) withObject:self afterDelay:0.6];
}
3

There are 3 answers

0
Andrea On BEST ANSWER
[UIView animateWithDuration:1.0
                          delay:0.0
                        options: UIViewAnimationCurveLinear
                     animations:^{
                         self.roundButton.transform = CGAffineTransformMakeScale(50.0f, 50.0f);
                         self.roundButton.alpha = 0.0;
                     } 
                     completion:^(BOOL finished){
                         NSLog(@"Done!");
                     }];
}

Let's explain a little, in this animation block you say that the animation should take place in one second, during this second based on a linear curve (thus always equal increment/decrement) the button should zoom 50 times and alpha should be animate to 0.
I do not understand why you are using a more complicated CAKeyframeAnimation over that simple animation block.
Keyframe animation are useful when you want more power over timings and animate over a set of values.

0
ricky3350 On

UIView animateWithDuration:animations: should serve your purpose here.

[UIView animateWithDuration:1.0 animations:^{
    button.alpha = 0.0;
}];

Will gradually change the button's alpha to 0 over one second (...WithDuration:1.0...).

See the The UIView Class Reference for more information.

Hope this helps.

0
Pradumna Patil On

Try this

[button.layer removeAnimationForKey:@"opacity"];