複製iOS iTunes下載動畫

當通過iOS上的iTunes應用程序購買歌曲時，用戶點擊「立即購買」，歌曲標題似乎從單元中「提起」並跳到「下載」選項卡欄上在一個美麗的動畫。我認爲這是通過Core Animation實現的，但我不確定要具體調用哪些API來實現類似的效果。有人能指出我正確的方向嗎？複製iOS iTunes下載動畫

來源

2012-07-12 The Kraken

這裏有一些快速代碼給你。 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 /故事板項目-http：//www.filehosting.org/file/details/359564/itunesanimation.zip

來源

2012-07-12 19:18:36 clearwater82

夥計，你搖滾！非常感謝！ – 2012-07-12 19:29:59

除了沒有使用標籤欄項目（因爲它們不是視圖），因爲OP要求並要求視圖是兄弟（因爲它們的框架沒有轉換到相同的座標空間），它應該做的伎倆。 – 2012-07-12 19:43:32

動畫由很多東西組成，如獲取動畫的視圖內容，縮放它，沿着路徑動畫化位置等。如果您打算將視圖製作爲標籤欄項目或工具欄項目那麼存在額外的問題，即它們的幀不公開，因此您必須自己計算動畫的結束位置。

我在a blog post中完成了所有這些工作，我在Safari中爲iPhone複製了「Open in Background」 - 動畫。這兩個動畫在視覺上非常相似，所以我相信你可以從這篇文章中學到很多東西。

來源

2012-07-12 14:47:05

真棒，我帶你去看看。謝謝。 – 2012-07-12 15:01:24

鏈接已損壞： - \ – boliva 2017-08-01 04:20:48

@boliva該頁面（以及該博客的其餘部分）不再存在。 – 2017-08-02 13:38:15

沒有進入細節的東西。 CoreAnimation - 專門使用CA在沿着從單元格到弧中標籤欄的路徑的單元格內UILabel或UILabel的圖像製作動畫。您還將對動畫應用比例變換，使其看起來像縮小到標籤欄中。

網上有很多關於這個問題的教程。我建議抓住一本關於CoreAnimation的書 - 查看它涵蓋的內容 - 大部分內容涵蓋了基本的內容，它絕對可以讓你實現你想要的動畫。

希望這會有所幫助。

來源

2012-07-12 14:48:27

複製iOS iTunes下載動畫

回答

相關問題