CALayer Shadow Path Animation

Question

I am animating a shadow path for CALayer .

The frame changes correctly, but the shadow does not scale.

Instead, the shadow starts at the final size of CGSize(20,20) and runs throughout the animation, even if I set shadowPath to the initial value

 [CATransaction begin]; [CATransaction setAnimationDuration: 0]; [CATransaction setDisableActions: TRUE]; layer.frame = CGRectMake(0,0,10,10); layer.shadowPath = [UIBezierPath bezierPathWithRect:layer.bounds].CGPath; [CATransaction commit]; [CATransaction begin]; [CATransaction setValue:[NSNumber numberWithFloat:10] forKey:kCATransactionAnimationDuration]; layer.frame = CGRectMake(0,0,20,20); layer.shadowPath = [UIBezierPath bezierPathWithRect:tile.bounds].CGPath; [CATransaction commit]; 

Answer 1

First a small square with a shadow.

When the button is pressed, the square and shadow grow together.

The main code is given below:

 [CATransaction begin]; [CATransaction setAnimationDuration:5.0]; CAMediaTimingFunction *timing = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; [CATransaction setAnimationTimingFunction:timing]; layer.frame = CGRectMake(0,0,100,100); [CATransaction commit]; CABasicAnimation *shadowAnimation = [CABasicAnimation animationWithKeyPath:@"shadowPath"]; shadowAnimation.duration = 5.0; shadowAnimation.fromValue = (id)[UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 50, 50)].CGPath; shadowAnimation.toValue = (id)[UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath; [layer addAnimation:shadowAnimation forKey:@"shadow"]; 

You can download this project from GitHub and just run it.

https://github.com/weed/p120812_CALayerShadowTest

This question was very difficult for me! :)

Answer 2

A different answer is required based on Weed's answer. I accepted the weed answer and tried to put everything in CATransaction because I wanted to animate several layers and make sure the animations happened together. Here you guys go if you ever need to. Also, I still don't understand why you should use fromValue and toValue in CATransaction. Why can't you do the same as with other properties such as frame.

 [CATransaction begin]; [CATransaction setValue:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut] forKey:kCATransactionAnimationTimingFunction]; for (CALayer *layer in self.layers){ CABasicAnimation *shadowAnimation = [CABasicAnimation animationWithKeyPath:@"shadowPath"]; shadowAnimation.fromValue = (id)[UIBezierPath bezierPathWithRect:layer.bounds].CGPath; shadowAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; layer.frame = rectFinal; shadowAnimation.toValue = (id)[UIBezierPath bezierPathWithRect:layer.bounds].CGPath; layer.shadowPath = [UIBezierPath bezierPathWithRect:layer.bounds].CGPath; [layer addAnimation:shadowAnimation forKey:nil]; } [CATransaction commit];