iOS開發之CAAnimation核心動畫

我們先來看看核心動畫的組成，或者說事分類：如下圖

核心動畫簡介：

 核心動畫：

 

 1、在iOS中核心動畫分爲幾類：基礎動畫(CABasicAnimation)、關鍵幀動畫(CAKeyframeAnimation)、動畫組(CAAnimationGroup)、轉場動畫(CATransition)

 

 2、CAAnimation：核心動畫的基礎類，不能直接使用，負責動畫的運行時間、速度的控制，本身實現了CAMediaTiming協議。

 

 3、 基礎動畫(CABasicAnimation) 關鍵幀動畫(CAKeyframeAnimation)區別：

     基礎動畫，只能從一個點到另一個點；關鍵幀動畫可以從一個點到多個點

 

 4、 CAPropertyAnimation：屬性動畫也是基類（通過屬性進行動畫設置，注意是動畫屬性），不能直接使用。

    CABasicAnimation：基礎動畫，通過屬性修改進行動畫參數控制，只有初始狀態和結束狀態。

    CAKeyframeAnimation：關鍵幀動畫，同樣是通過屬性進行動畫參數控制，但是同基礎動畫不同的是它可以有多個狀態控制。

    CAAnimationGroup：動畫組，動畫組是一種組合模式設計，可以通過動畫組來進行所有動畫行爲的統一控制，組中所有動畫效果可以併發執行。

    CATransition：轉場動畫，主要通過濾鏡進行動畫效果設置。

 

 5、基礎動畫、關鍵幀動畫都屬於屬性動畫，就是通過修改屬性值產生動畫效果，開發人員只需要設置初始值和結束值，中間的過程動畫（又叫“補間動畫”）由系統自動計算產生。和基礎動畫不同的是關鍵幀動畫可以設置多個屬性值，每兩個屬性中間的補間動畫由系統自動完成，因此從這個角度而言基礎動畫又可以看成是有兩個關鍵幀的關鍵幀動畫

 

 一、CABasicAnimation：

    1>、創建基礎動畫，需要通過fromValue 和toValue 屬性來指定一個開始值和結束值，當添加基礎動畫到圖層中的時候，它纔會發生變化

    2>、autoreverse ：當設定這個屬性爲YES 的時候，在它到達目的地之後，會以動畫的方式返回到開始的值

    3>、duration：設定開始值到結束值話費的時間 ，期間會被速度的屬性影響

    4>、speed： 默認的值爲 1.0.這意味着動畫播放按照默認的速度。如果你改變這個值爲 2.0,動畫會用 2 倍的速度播放。 這樣的影響就是使持續時間減半。如果你指定的持續時間爲 6 秒,速度爲 2.0,動畫就會播放 3 秒鐘---一半的 持續時間

      把速度設置成0 就可以暫停動畫

 

    5>、repeatCount 默認的是 0,意味着動畫只會播放一次  這個不應該和 repeatDration 屬性一塊使用。（負數不是無限循環）

 

    6>、repeatDuration 這個屬性指定了動畫應該被重複多久。動畫會一直重複,直到設定的時間流逝完。它不應該和 repeatCount 一起使用

 

    7>、removedOnCompletion 默認爲YES，代表動畫執行完畢後就從圖層上移除，圖形會恢復到動畫執行前的狀態。如果想讓圖層保持顯示動畫執行後的狀態，那就設置爲NO，不過還要設置fillMode爲kCAFillModeForwards

 

    fillMode  設置當前對象在非活動時間段的行爲 比如動畫開始之前或者動畫結束之後

    fillMode屬性值（上面提到過 要想fillMode有效，需要設置removedOnCompletion = NO）

 

    kCAFillModeRemoved 這個是默認值，也就是說當動畫開始前和動畫結束後，動畫對layer都沒有影響，動畫結束後，layer會恢復到之前的狀態

    kCAFillModeForwards 當動畫結束後，layer會一直保持着動畫最後的狀態

    kCAFillModeBackwards 在動畫開始前，只需要將動畫加入了一個layer，layer便立即進入動畫的初始狀態並等待動畫開始。

    kCAFillModeBoth 這個其實就是上面兩個的合成.動畫加入後開始之前，layer便處於動畫初始狀態，動畫結束後layer保持動畫最後的狀態

CABasicAnimation

1、初始化一個CALayer，給它附一張圖

    showLayer = [[CALayer alloc]init];
    
    UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle]pathForResource:@"105.jpg" ofType:nil]];
    showLayer.contents = (id)image.CGImage;
    showLayer.bounds = CGRectMake(0, 0, image.size.width/10, image.size.height/10);
    showLayer.position = self.view.center;
    
    [self.view.layer addSublayer:showLayer];

2、寫兩個方法--CABasicAnimation實現的方法

#pragma mark ----------------改變position --------
- (void)animation1
{   
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    
//    設置動畫要到哪個位置
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(370, showLayer.position.y)];
    
    animation.duration = 2;
    
//    使用fillMode的時候必須禁用 removedOnCompletion
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeBoth;
    
//    設置快進快出，慢進慢出等屬性
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
       
//    添加動畫到圖層
    [showLayer addAnimation:animation forKey:@"move"];   
}

#pragma mark ----------------改變bounds --------
- (void)animation2
{
    UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle]pathForResource:@"105.jpg" ofType:nil]];
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds"];
    animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, image.size.width/5, image.size.height/5)];
    animation.duration = 0.5;
    animation.autoreverses = YES;
    animation.repeatDuration = 5;
    
    [showLayer addAnimation:animation forKey:@"big"];
}

3、只要在我們開始觸摸屏幕的時候分別調用這兩個方法，我們就可以看出效果圖了

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [self animation2];
}

效果展示：

這是我們定義的Layer，當我們在觸摸屏幕的時候調用第一個方法的時候，圖片會在兩秒的時間內往右移動到width = 370得位置

當我們調用第二個方法的時候，圖片會在中心放大縮小放大縮小--，就像心跳一樣 ；