最近有些無聊，無意之中又發(fā)現(xiàn)了一個(gè)好玩的東西纹安，就是添加到購物車的動(dòng)畫~ 額毛俏，好高大上啊，相比我之前用的動(dòng)畫杏死，感覺就是山寨與正品的差距啊 T T

這是我之前習(xí)慣用的 T T

原諒我之前年少無知 - -

    [UIView animateWithDuration:耗時(shí) animations:^{
        // 動(dòng)畫
    } completion:^(BOOL finished) {
        // 動(dòng)畫完成后要做的事
    }];

1.CABasicAnimation

簡單介紹下基本概念

1. CALayer

   CALayer是個(gè)與UIView很類似的概念泵肄，同樣有backgroundColor、frame等相似的屬性淑翼，我們可以將UIView看做一種特殊的CALayer腐巢。但實(shí)際上UIView是對(duì)CALayer封裝，在CALayer的基礎(chǔ)上再添加交互功能玄括。UIView的顯示必須依賴于CALayer冯丙。我們同樣可以跟新建view一樣新建一個(gè)layer，然后添加到某個(gè)已有的layer上遭京，同樣可以對(duì)layer調(diào)整大小胃惜、位置、透明度等哪雕。一般來說船殉，layer可以有兩種用途：一是對(duì)view相關(guān)屬性的設(shè)置，包括圓角斯嚎、陰影利虫、邊框等參數(shù)；二是實(shí)現(xiàn)對(duì)view的動(dòng)畫操控孝扛。 因此對(duì)一個(gè)view進(jìn)行動(dòng)畫列吼，本質(zhì)上是對(duì)該view的.layer進(jìn)行動(dòng)畫操縱。

2. CAAnimation

   CAAnimation可以分為以下幾類：

   CABasicAnimation基礎(chǔ)動(dòng)畫苦始，通過設(shè)定起始點(diǎn)寞钥，終點(diǎn)，時(shí)間陌选，動(dòng)畫會(huì)沿著你這設(shè)定點(diǎn)進(jìn)行移動(dòng)理郑。可以看做特殊的CAKeyFrameAnimation

   CAKeyframeAnimation關(guān)鍵幀動(dòng)畫咨油，可定制度比CABasicAnimation高您炉，也是本系列的接下來的內(nèi)容

   使用方法animationWithKeyPath:對(duì) CABasicAnimation進(jìn)行實(shí)例化，并指定Layer的屬性作為關(guān)鍵路徑進(jìn)行注冊役电。

3. CAAnimationGroup

   CAAnimationGroup組動(dòng)畫赚爵，支持多個(gè)CABasicAnimation或者CAKeyframeAnimation動(dòng)畫同時(shí)執(zhí)行

   實(shí)例化

解釋：為什么動(dòng)畫結(jié)束后返回原狀態(tài)？首先我們需要搞明白一點(diǎn)的是淫痰，layer動(dòng)畫運(yùn)行的過程是怎樣的最楷？其實(shí)在我們給一個(gè)視圖添加layer動(dòng)畫時(shí)整份，真正移動(dòng)并不是我們的視圖本身待错，而是 presentation layer 的一個(gè)緩存。動(dòng)畫開始時(shí) presentation layer開始移動(dòng)烈评，原始layer隱藏火俄，動(dòng)畫結(jié)束時(shí)，presentation layer從屏幕上移除讲冠，原始layer顯示瓜客。這就解釋了為什么我們的視圖在動(dòng)畫結(jié)束后又回到了原來的狀態(tài)，因?yàn)樗揪蜎]動(dòng)過竿开。

簡單小栗子

// 這的key是設(shè)置不同效果的動(dòng)畫谱仪，下面有整理
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
// 平移動(dòng)畫
animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, HEIGHT/2 - 75)];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(WIDTH, HEIGHT/2 - 75)];
animation.duration = 3.0f;
// 這的key可以區(qū)分不同不同的動(dòng)畫，在動(dòng)畫完成回調(diào)時(shí)可已經(jīng)判斷等操作
[_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

小栗子

動(dòng)畫開始和結(jié)束時(shí)的事件為了獲取動(dòng)畫的開始和結(jié)束事件否彩，需要實(shí)現(xiàn)協(xié)議

animation.delegate = self;
//動(dòng)畫開始時(shí)
- (void)animationDidStart:(CAAnimation *)anim
{ 
    if ([anim isEqual:[self.imageView.layer animationForKey:@"positionAnimation"]]) 
    { 
        NSLog(@"平移動(dòng)畫執(zhí)行了");
    }
}
//動(dòng)畫結(jié)束時(shí)
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    //方法中的flag參數(shù)表明了動(dòng)畫是自然結(jié)束還是被打斷,比如調(diào)用了removeAnimationForKey:方法或removeAnimationForKey方法疯攒，flag為NO，如果是正常結(jié)束列荔，flag為YES敬尺。
    NSLog(@"結(jié)束了");
}

下面是一些常用的animationWithKeyPath值的總結(jié)

2.CAAnimationGroup

不多說砂吞，直接上栗子

    // 軌跡動(dòng)畫
    CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 縮放動(dòng)畫
    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    // 旋轉(zhuǎn)動(dòng)畫
    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對(duì)象。里面的元素稱為”關(guān)鍵幀”(keyframe)崎溃。動(dòng)畫對(duì)象會(huì)在指定的時(shí)間(duration)內(nèi)蜻直，依次顯示values數(shù)組中的每一個(gè)關(guān)鍵幀
    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"];

動(dòng)畫組小栗子

動(dòng)畫組便是把一系列的動(dòng)畫組成一個(gè)數(shù)組，然后執(zhí)行

3.UIBezierPath

使用UIBezierPath可以創(chuàng)建基于矢量的路徑，此類是Core Graphics框架關(guān)于路徑的封裝概而。使用此類可以定義簡單的形狀唤殴，如橢圓、矩形或者有多個(gè)直線和曲線段組成的形狀等到腥。

UIBezierPath是CGPathRef數(shù)據(jù)類型的封裝朵逝。如果是基于矢量形狀的路徑，都用直線和曲線去創(chuàng)建乡范。我們使用直線段去創(chuàng)建矩形和多邊形配名，使用曲線去創(chuàng)建圓弧（arc）晋辆、圓或者其他復(fù)雜的曲線形狀渠脉。

    // 軌跡動(dòng)畫
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 圓形軌跡動(dòng)畫
    // path：可以設(shè)置一個(gè)CGPathRef\CGMutablePathRef,讓層跟著路徑移動(dòng)。path只對(duì)CALayer的anchorPoint和position起作用瓶佳。如果你設(shè)置了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"];

貝塞爾曲線動(dòng)畫

4.CATransition

CAAnimation的子類霸饲，用于做轉(zhuǎn)場動(dòng)畫为朋，能夠?yàn)閷犹峁┮瞥銎聊缓鸵迫肫聊坏膭?dòng)畫效果。

1. 創(chuàng)建轉(zhuǎn)場動(dòng)畫
2. 設(shè)置轉(zhuǎn)場類型厚脉、子類型以及其他屬性
3. 設(shè)置轉(zhuǎn)場后的新視圖并添加動(dòng)畫到圖層

最后

這里只是簡單的說明了下一些簡單的概念习寸，復(fù)雜的酷炫動(dòng)畫需要各種組合，還需要你的想象力傻工。沒事可以多多練習(xí)一下霞溪，將一個(gè)個(gè)簡單的動(dòng)畫添加上~

參考資料：

iOS動(dòng)畫詳解（學(xué)習(xí)動(dòng)畫看這一篇就夠了）

iOS那些簡單的動(dòng)畫（不定期更新）

iOS動(dòng)畫（Core Animation）總結(jié)

CABasicAnimation使用總結(jié)