Replicate iOS iTunes Download Animation

Question

When purchasing a song through the iTunes app on iOS, the user taps "Buy Now", and the song title appears to "lift" out of its cell and plop onto the "Downloads" tab bar item in a beautiful animation. I take that this is accomplished with Core Animation, but I'm unsure as to specifically what API to call to achieve a similar effect. Can somebody point me in the right direction?

Answer 1

Here is some quick code for you. The UIImage stands for 'the cart' in this example. The UILabel stands for 'the song'. A fully working project link is attached. Enjoy! :)

@interface AnimateViewController ()
@property(nonatomic) IBOutlet UIImageView * cartImage;
@property(nonatomic) IBOutlet UILabel * songLabel;
@end

@implementation AnimateViewController
@synthesize cartImage;
@synthesize songLabel;

- (IBAction) initiateAddToCart:(id)sender{

    static float const curvingIntoCartAnimationDuration = 1.0f;

    CALayer * layerToAnimate = self.songLabel.layer;

    CAKeyframeAnimation * itemViewCurvingIntoCartAnimation = [self itemViewCurvingIntoCartAnimation];
    CABasicAnimation * itemViewShrinkingAnimation =  [CABasicAnimation animationWithKeyPath:@"bounds"];
    itemViewShrinkingAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(0.0,0.0, self.songLabel.bounds.size.width/1.5, self.songLabel.bounds.size.height/1.5)];
    CABasicAnimation * itemAlphaFadeAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    itemAlphaFadeAnimation.toValue = [NSNumber numberWithFloat:0.5];

    CAAnimationGroup * shrinkFadeAndCurveAnimation = [CAAnimationGroup animation];
    [shrinkFadeAndCurveAnimation setAnimations:[NSArray arrayWithObjects:
                                            itemViewCurvingIntoCartAnimation,
                                            itemViewShrinkingAnimation,
                                            itemAlphaFadeAnimation,
                                            nil]];
    [shrinkFadeAndCurveAnimation setDuration:curvingIntoCartAnimationDuration];
    [shrinkFadeAndCurveAnimation setDelegate:self];
    [shrinkFadeAndCurveAnimation setRemovedOnCompletion:NO];
    [shrinkFadeAndCurveAnimation setValue:@"shrinkAndCurveToAddToOrderAnimation" forKey:@"name"];
    [layerToAnimate addAnimation:shrinkFadeAndCurveAnimation forKey:nil];
}

- (CAKeyframeAnimation *) itemViewCurvingIntoCartAnimation {
    CGRect positionOfItemViewInView = self.songLabel.frame;

    float riseAbovePoint = 300.0f;

    CGPoint beginningPointOfQuadCurve = positionOfItemViewInView.origin;
    CGPoint endPointOfQuadCurve = CGPointMake(self.cartImage.frame.origin.x + self.cartImage.frame.size.width/2, self.cartImage.frame.origin.y + self.cartImage.frame.size.height/2) ;
    CGPoint controlPointOfQuadCurve = CGPointMake((beginningPointOfQuadCurve.x + endPointOfQuadCurve.x *2)/2, beginningPointOfQuadCurve.y -riseAbovePoint);

    UIBezierPath * quadBezierPathOfAnimation = [UIBezierPath bezierPath];
    [quadBezierPathOfAnimation moveToPoint:beginningPointOfQuadCurve];
    [quadBezierPathOfAnimation addQuadCurveToPoint:endPointOfQuadCurve controlPoint:controlPointOfQuadCurve];

    CAKeyframeAnimation * itemViewCurvingIntoCartAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    itemViewCurvingIntoCartAnimation.path = quadBezierPathOfAnimation.CGPath;

    return itemViewCurvingIntoCartAnimation;
}

@end

Here- a fully working ARC/Storyboard project -http://www.filehosting.org/file/details/359564/itunesanimation.zip