CoreAnimation, moving UIImageView with animated shadow in iOS 5 Xcode 4

Question

I am trying to add a (fake) 3D effect for an image (UIImageView moving from point A to B, during this movement I want at point C = (A + B) / 2 so that it has the largest shadow size (or greater offset shadow), so it looks like it rises and falls again and again. when I try to change the size of the shadow, this is not an animation. could you help me how to edit this code:

NSValue *pointB = [NSValue valueWithCGPoint:CGPointMake(CGRectGetMinX(imageView.frame)+50, CGRectGetMinY(imageView.frame)+50)]; [self.view bringSubviewToFront:ImageView]; [UIView beginAnimations:@"UIImage Move" context:NULL]; CGPoint point = [pointB CGPointValue]; CGSize size =imageView.frame.size; [UIView setAnimationDuration:1.0]; imageView.frame = CGRectMake(point.x, point.y, size.width, size.height); imageView.layer.shadowOffset = CGSizeMake(0, 4); //actually I want this to happen in mid point and revert to offset 1 [UIView commitAnimations]; //sorry for possible problems with syntax, the code works fine, I had to rewrite and simplify it for understanding 

Answer 1

You need to animate the shadowOffset of the layer using CAAnimation. Here is an example of how to increase shadowOffset when moving an object. This example uses UIButton.

 #import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> @interface ViewController : UIViewController @property (nonatomic, retain) IBOutlet UIButton *button; @end 

In the M file, I call the animation on the button with the IBAction buttons.

 -(IBAction)shadowGrow:(id)sender { CABasicAnimation *shadowGrow = [CABasicAnimation animationWithKeyPath:@"shadowRadius" ]; shadowGrow.delegate = self; [shadowGrow setFromValue:[NSNumber numberWithFloat:3.0]]; [shadowGrow setToValue:[NSNumber numberWithFloat:20.0]]; [shadowGrow setDuration:1.0f]; shadowGrow.autoreverses = YES; CABasicAnimation *move = [CABasicAnimation animationWithKeyPath:@"transform.translation.x" ]; move.delegate = self; [move setFromValue:[NSNumber numberWithFloat:0]]; [move setToValue:[NSNumber numberWithFloat:50]]; [move setDuration:1.0f]; move.autoreverses = YES; //Add animation to a specific element layer. Must be called after the element is displayed. [[button layer] addAnimation:shadowGrow forKey:@"shadowRadius"]; [[button layer] addAnimation:move forKey:@"transform.translation.x"]; } 

One thing to remember with CoreAnimation is that when animating such properties, they return to their value from the very beginning, unless you set these values ​​after the animation finishes in the CAAnimation delegate method.

 - (void) animationDidStop:(NSString *)theAnimation finished:(NSNumber *)finished context:(void *)context 

See below for more information on the animation properties of CALayer.

CALayer and CIFilter Animation Properties