iosobjective-ciphoneuibuttonuianimation

How to reduce the opacity of an UIButton gradually?


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

Solution

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