2

当通过 iOS 上的 iTunes 应用程序购买歌曲时，用户点击“立即购买”，歌曲标题似乎从其单元格中“升起”，并以漂亮的动画形式出现在“下载”标签栏项目上。我认为这是通过 Core Animation 完成的，但我不确定具体调用什么 API 来实现类似的效果。有人可以指出我正确的方向吗？

4

3 回答 3

5

这是给你的一些快速代码。在此示例中，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

于 2012-07-12T19:18:36.847 回答
2

动画包含许多内容，例如获取您正在制作动画的视图的内容、缩放它、沿路径设置动画位置等。如果您打算将视图动画到标签栏项目或工具栏项目，那么有额外的问题是它们的帧不公开，因此您必须自己计算动画的结束位置。

我在一篇博文中完成了所有这些，我在其中复制了 iPhone 版 Safari 中的“后台打开”动画。这两个动画在视觉上非常相似，所以我相信你可以从这篇文章中学到很多东西。

于 2012-07-12T14:47:05.690 回答
1

无需深入细节。CoreAnimation - 专门使用 CA 动画 UILabel 或单元格内的 UILabel 图像，沿着从单元格到选项卡栏的路径以弧形制作。您还可以对动画应用缩放变换，使其看起来像缩小到选项卡栏中。

网上有很多关于这个问题的教程。我建议拿一本关于 CoreAnimation 的书 - 检查它涵盖的内容 - 大多数都涵盖了绝对可以让您实现所需动画的基础知识。

希望这可以帮助。

于 2012-07-12T14:48:27.300 回答