iphone - 复制 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