最近有些無聊，無意之中又發現了一個好玩的東西，就是新增到購物車的動畫~ 額，好高大上啊，相比我之前用的動畫，感覺就是山寨與正品的差距啊 T T

這是我之前習慣用的 T T

原諒我之前年少無知 - -

    [UIView animateWithDuration:耗時 animations:^{
        // 動畫
    } completion:^(BOOL finished) {
        // 動畫完成後要做的事
    }];

1.CABasicAnimation

簡單介紹下基本概念

1. CALayer

   CALayer是個與UIView很類似的概念，同樣有backgroundColor、frame等相似的屬性，我們可以將UIView看做一種特殊的CALayer。但實際上UIView是對CALayer封裝，在CALayer的基礎上再新增互動功能。UIView的顯示必須依賴於CALayer。我們同樣可以跟新建view一樣新建一個layer，然後新增到某個已有的layer上，同樣可以對layer調整大小、位置、透明度等。一般來說，layer可以有兩種用途：一是對view相關屬性的設定，包括圓角、陰影、邊框等引數；二是實現對view的動畫操控。 因此對一個view進行動畫，本質上是對該view的.layer進行動畫操縱。

2. CAAnimation

   CAAnimation可以分為以下幾類：

   CABasicAnimation基礎動畫，通過設定起始點，終點，時間，動畫會沿著你這設定點進行移動。可以看做特殊的CAKeyFrameAnimation

   CAKeyframeAnimation關鍵幀動畫，可定製度比CABasicAnimation高，也是本系列的接下來的內容

   使用方法animationWithKeyPath:對 CABasicAnimation進行例項化，並指定Layer的屬性作為關鍵路徑進行註冊。

3. CAAnimationGroup

   CAAnimationGroup組動畫，支援多個CABasicAnimation或者CAKeyframeAnimation動畫同時執行

   例項化

解釋：為什麼動畫結束後返回原狀態？首先我們需要搞明白一點的是，layer動畫執行的過程是怎樣的？其實在我們給一個檢視新增layer動畫時，真正移動並不是我們的檢視本身，而是 presentation layer 的一個快取。動畫開始時 presentation layer開始移動，原始layer隱藏，動畫結束時，presentation layer從螢幕上移除，原始layer顯示。這就解釋了為什麼我們的檢視在動畫結束後又回到了原來的狀態，因為它根本就沒動過。

簡單小栗子

// 這的key是設定不同效果的動畫，下面有整理
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
// 平移動畫
animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, HEIGHT/2 - 75)];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(WIDTH, HEIGHT/2 - 75)];
animation.duration = 3.0f;
// 這的key可以區分不同不同的動畫，在動畫完成回撥時可已經判斷等操作
[_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

動畫開始和結束時的事件為了獲取動畫的開始和結束事件，需要實現協議

animation.delegate = self;
//動畫開始時
- (void)animationDidStart:(CAAnimation *)anim
{ 
    if ([anim isEqual:[self.imageView.layer animationForKey:@"positionAnimation"]]) 
    { 
        NSLog(@"平移動畫執行了");
    }
}
//動畫結束時
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    //方法中的flag引數表明了動畫是自然結束還是被打斷,比如呼叫了removeAnimationForKey:方法或removeAnimationForKey方法，flag為NO，如果是正常結束，flag為YES。
    NSLog(@"結束了");
}

下面是一些常用的animationWithKeyPath值的總結

2.CAAnimationGroup

不多說，直接上栗子

    // 軌跡動畫
    CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 縮放動畫
    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    // 旋轉動畫
    CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];

    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, HEIGHT/2-50)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(WIDTH/3, HEIGHT/2-50)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(WIDTH/3, HEIGHT/2+50)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(WIDTH*2/3, HEIGHT/2+50)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(WIDTH*2/3, HEIGHT/2-50)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(WIDTH, HEIGHT/2-50)];
    // values：就是上述的NSArray物件。裡面的元素稱為”關鍵幀”(keyframe)。動畫物件會在指定的時間(duration)內，依次顯示values陣列中的每一個關鍵幀
    animation1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];

    animation2.fromValue = [NSNumber numberWithFloat:0.8f];
    animation2.toValue = [NSNumber numberWithFloat:2.0f];

    animation3.toValue = [NSNumber numberWithFloat:M_PI*4];

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.animations = @[animation1, animation2, animation3];
    animationGroup.duration = 4.0f;

    [_imageView.layer addAnimation:animationGroup forKey:@"groupAnimation"];

動畫組便是把一系列的動畫組成一個數組，然後執行

3.UIBezierPath

使用UIBezierPath可以建立基於向量的路徑，此類是Core Graphics框架關於路徑的封裝。使用此類可以定義簡單的形狀，如橢圓、矩形或者有多個直線和曲線段組成的形狀等。

UIBezierPath是CGPathRef資料型別的封裝。如果是基於向量形狀的路徑，都用直線和曲線去建立。我們使用直線段去建立矩形和多邊形，使用曲線去建立圓弧（arc）、圓或者其他複雜的曲線形狀。

    // 軌跡動畫
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 圓形軌跡動畫
    // path：可以設定一個CGPathRef\CGMutablePathRef,讓層跟著路徑移動。path只對CALayer的anchorPoint和position起作用。如果你設定了path，那麼values將被忽略。
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(WIDTH/2-100, HEIGHT/2-100, 200, 200)];
    animation.path = path.CGPath;
    animation.duration = 2.0f;
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    // 先慢後快
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [_imageView.layer addAnimation:animation forKey:@"position"];

4.CATransition

CAAnimation的子類，用於做轉場動畫，能夠為層提供移出螢幕和移入螢幕的動畫效果。

1. 建立轉場動畫
2. 設定轉場型別、子型別以及其他屬性
3. 設定轉場後的新檢視並新增動畫到圖層

最後

這裡只是簡單的說明了下一些簡單的概念，複雜的酷炫動畫需要各種組合，還需要你的想象力。沒事可以多多練習一下，將一個個簡單的動畫新增上~

參考資料：