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

Question

I am trying to add a (fake)3d like effect for an image (UIImageView moving from point A to B, during this movement I want at point C=(A+B)/2 for it to have the biggest shadow size (or larger shadow offset), so it looks like it is going up and down again. when I try to even change the shadow size, it is not animating. 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 by using CAAnimation. Here is an example on how to enlarge the shadowOffset while moving the object. This example uses a UIButton.

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

In the M file I am calling the animations on the button from the buttons IBAction.

-(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's 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 when animating the properties like this they are going to revert to their value from the start unless you set those values after the animation ends in the CAAnimation's Delegate Method.

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

Here is some additional information on CALayer's animatable properties.

CALayer and CIFilter animatable properties