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 で「バックグラウンドで開く」アニメーションを複製したブログ投稿で行いました。これら 2 つのアニメーションは視覚的に非常に似ているため、この投稿から多くのことを学べると確信しています。

于 2012-07-12T14:47:05.690 に答える
1

核心的なものに入ることなく。CoreAnimation - 具体的には CA を使用して、セル内の UILabel または UILabel の画像を、セルからアーク内のタブ バーまでのパスに沿ってアニメーション化します。また、アニメーションにスケール変換を適用して、タブ バーに縮小するように見せます。

この問題に関する多くのチュートリアルがオンラインにあります。CoreAnimation に関する本を入手することをお勧めします。内容を確認してください。ほとんどの本は、必要なアニメーションを確実に実現できる基本をカバーしています。

お役に立てれば。

于 2012-07-12T14:48:27.300 に答える