复制iOS iTunes下载动画

Question

当通过iOS上的iTunes应用程序购买歌曲时,用户点击"立即购买",歌曲标题似乎从其单元格中"抬起"并以漂亮的动画形式进入"下载"标签栏项目.我认为这是通过Core Animation完成的,但我不确定具体使用哪种API来实现类似的效果.有人能指出我正确的方向吗？

Answer 1

这是一些快速代码.在这个例子中,UIImage代表"购物车".UILabel代表"歌曲".附上一个完整工作的项目链接.请享用!:)

@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

这里 - 一个完全正常工作的ARC/Storyboard项目-http://www.filehosting.org/file/details/359564/itunesanimation.zip