How to make a uibutton zoomout and then crossblur?

Question

I have got an UIButton animation implemented, as for now it zooms but I also want to cross fade the UIButton while it disappears.

This is my sample code for button animation.

(void)centerButtonAnimation{
    CAKeyframeAnimation *centerZoom = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    centerZoom.duration = 1.5f;
    centerZoom.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.5, 1.5, 1.5)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(4, 4, 4)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(5, 5, 5)]];
    centerZoom.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    centerButton.transform = CGAffineTransformMakeScale(5, 5);
    [centerButton.layer addAnimation:centerZoom forKey:@"buttonScale"];
    [centerButton setUserInteractionEnabled:NO];
}

Cross fade howto is here: http://stackoverflow.com/questions/1550206/how-to-crossfade-between-2-images-on-iphone-using-core-animation. Not sure if this is what you mean by cross fade? Also here for specific UIButton image cross fade (not the answer but the +13 below it): http://stackoverflow.com/questions/16801948/fade-between-two-uibutton-images — Rory McKinnel, Apr 29 '15 at 11:05
I imagine you add both animations at the same time, or if you want to chain them you have to implement the delegate and add the cross fade when the zoom has completed. — Rory McKinnel, Apr 29 '15 at 11:06
Thanks for the links, I will surely implement them and see.. — User1075, Apr 29 '15 at 11:07
can you please post the code that is contemporary to my sample code?? I mean implementing delegate and adding cross fade in zoom completion?? — User1075, Apr 29 '15 at 11:08
Posted answer with what I think the code should roughly look like based on yours. — Rory McKinnel, Apr 29 '15 at 11:25

score 1 · Answer 1 · answered Apr 29 '15 at 11:25

To chain the animations, you can set your class to be a delegate for the animation.

@property CAKeyframeAnimation *centerZoom;

- (void) centerButtonAnimation
{
    self.centerZoom = [CAKeyframeAnimation animationWithKeyPath:@"transform"];

    // Set the delegate to this instance.
    centerZoom.delegate=self;

    centerZoom.duration = 1.5f;
    centerZoom.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.5, 1.5, 1.5)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(4, 4, 4)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(5, 5, 5)]];
    centerZoom.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    centerButton.transform = CGAffineTransformMakeScale(5, 5);
    [centerButton.layer addAnimation:centerZoom forKey:@"buttonScale"];
    [centerButton setUserInteractionEnabled:NO];
}

- (void) crossFadeAnimation
{
   // Insert animation code for cross fade.
}

Then implement the delegate function to detect the end of the animation. If its the end of a zoom, start the cross fade.

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
{
   if ((theAnimation == self.centerZoom) && flag){
     [self crossFadeAnimation];
   }
}

thank you so much. I am looking to implement it soon – User1075 Apr 29 '15 at 11:33 — User1075, Apr 29 '15 at 11:33

How to make a uibutton zoomout and then crossblur?

1 Answers1