How to reduce the opacity of an UIButton gradually?

Question

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

Is there any particular reason why aren't you using simple transform and alpha animations using curve linear? — Andrea, Jun 24 '15 at 11:13
@Andrea simple transform and alpha animations curve linear... Is it possible to zoom with this code?? — User1075, Jun 24 '15 at 11:19
Try two CAAnimations, one for zooming and the other for alpha (opacity) then add them to CAAnimationGroup and assign that group to your button/method. — Mrunal, Jun 24 '15 at 11:26

ricky3350 · Answer 1 · 2015-06-24T11:33:37.453

1

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.

edited Jun 24 '15 at 11:33

answered Jun 24 '15 at 11:19

ricky3350

1,710
3
20
35

score 1 · Accepted Answer · answered Jun 24 '15 at 11:29

[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.

score 0 · Answer 3 · edited Aug 30 '20 at 21:41

0

Try this

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

edited Aug 30 '20 at 21:41

Dharman

30,962
25
85
135

answered Jun 24 '15 at 11:21

Pradumna Patil

2,180
3
17
46

How to reduce the opacity of an UIButton gradually?

3 Answers3