CoreAnimation核心動畫

1、基本概念

一、核心動畫概念

• Core Animation(核⼼動畫)是一組很是強大的動畫處理API,使用它能作出很是炫麗的動畫效果,並且每每是事半功倍

• 使⽤它須要先添加QuartzCore.framework和引入對應的框架

<QuartzCore/QuartzCore.h>

二、建立動畫的步驟

1. 初始化⼀個動畫對象(CAAnimation)並設置一些動畫相關的屬性
2. CALayer中有不少屬性均可以經過CAAnimation實現動畫效果,包括:opacity、position、transform、bounds、contents等
3. 使用CALayer的addAnimation:forKey方法增長動畫到層,當動畫對象添加到層後會⾃動執⾏。
4. Core Animation的動畫執行過程都是在後臺操做的,不會阻塞主線程。

###三、CAAnimation CAAimation是全部動畫對象的基類,負責控制動畫的持續時間和速度,是個抽象類,不能直接使用,應該使用它具體的子類

CAAnimation繼承結構以下：
注意：圖中的紫色虛線表明「繼承」某個類，紅色虛線表明「遵照」某個類

2、基本動畫

CABasicAnimation是CAPropertyAnimation的子類

擴展現例代碼-平移：

CABasicAnimation *animation =   
[CABasicAnimation animationWithKeyPath:"transform.translation.x"];    

animation.toValue = @320;  
animation.duration = 1;  
animation,timingFuntion =   
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];  
animation.fillMode = KCAFillModeForwards  
animation.removedOnCompletion = NO;    

[self.animationView.layer addAnimation:animation forKey:@"animation"];

擴展現例代碼-縮放：

CABasicAnimation *animation=[CABasicAnimationanimationWithKeyPath:"transform.scale"];    

animation.toValue = @2;  
animation.duration = 0.25;  
animation.repeatCount = 1;  
animation.autoreverses = YES;  
  
[self.animationView.layer addAnimation:animation forKey:@"animation"];

--
動畫的設置

// 四、動畫時間
    animation.duration = 2.0;
    
    /* 五、動畫的填充模式：
     kCAFillModeForwards
     kCAFillModeBackwards
     kCAFillModeBoth
     kCAFillModeRemoved
    */
    animation.fillMode = kCAFillModeForwards;
    
    // 六、動畫後是否移除動畫後的狀態(回到原始狀態)，默認是YES, 前提是要設置fillModle爲：kCAFillModeForwards
    animation.removedOnCompletion = NO;
    
    // 七、是否有回覆效果
    animation.autoreverses = YES;
    
    // 八、設置動畫重複次數
    animation.repeatCount = HUGE_VALF; //  HUGE_VALF 最大浮點數，表示無限次重複
    
    // 九、播放動畫的速度
    animation.speed = 2;

3、關鍵幀動畫

CAKeyframeAnimation，也是CAPropertyAnimation的子類。但關鍵幀動畫和簡單動畫的區別是：簡單動畫只能從一個數值過渡到另外一個數值，而關鍵幀動畫有一個NSArray來保存多個數值的過渡。

繪製路徑代碼以下：

// 繪製路徑
- (UIBezierPath *)path {
    
    // 橢圓
//    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.view.bounds];
    // 圓角矩形
//    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.view.bounds cornerRadius:50];
    // 內切圓
//    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 100, 300, 300)];
    
    // 貝塞爾曲線
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, TScreenHeight)];
    CGPoint point_1 = CGPointMake(TScreenWidth, TScreenHeight);
    CGPoint controPoint_1 = CGPointMake(TScreenWidth / 2, - TScreenHeight);
//    CGPoint controPoint_2 = CGPointMake(TScreenWidth / 4 * 3, TScreenHeight);
    
    [path addQuadCurveToPoint:point_1 controlPoint:controPoint_1];
//    [path addCurveToPoint:point_1 controlPoint1:controPoint_1 controlPoint2:controPoint_2];
    
    return path;
}

4、轉場動畫

CATransition並不像屬性動畫那樣平滑的在兩個值之間作動畫，而是影響到整個圖層的變化，過渡動畫首先展現以前的圖層外觀，而後經過一個交換過渡到新的外觀

相關屬性:
1.type􏰪􏰶􏰷􏱘􏲱：動畫過渡類型
2.subtype：動畫過渡方向
􏰪􏰶􏰷􏱘􏲱􏲻􏲼3.startProgress：動畫起點

示例代碼以下：

- (CAAnimation *)transitionAnimation {
    
    CATransition *transitionAni = [CATransition animation];
    transitionAni.duration = 1.0;
    /*
     1. fade     淡出效果
     2. moveIn 進入效果
     3. push    推出效果
     4. reveal   移出效果
     
     // 未公開的
     5. cube   立方體翻轉效果
     6. suckEffect  抽走效果
     7. rippleEffect 水波效果
     8. pageCurl    翻開頁效果
     9. pageUnCurl 關閉頁效果
     10. cameraIrisHollowOpen  相機鏡頭打開效果
     11.  cameraIrisHollowClose  相機鏡頭關閉效果
    */
    
    transitionAni.type = kCATransitionPush;
    // transitionAni.type = @"push";
    
    // 轉場的方向：`fromLeft', `fromRight', `fromTop'  `fromBottom'
    transitionAni.subtype = @"fromTop";
    
    // 開始轉場和結束轉場的進度位置
    // transitionAni.startProgress = 0.5;
    // transitionAni.endProgress = 1;
    
    return transitionAni;
}

##5、動畫的暫停和繼續

- (void)pauseAnimation {
    
    NSLog(@"CACurrentMediaTime:%f",CACurrentMediaTime());
    
    // CACurrentMediaTime(): 當前媒體時間，表示系統啓動後到當前的秒數，當系統重啓後這個時間也重置
    CFTimeInterval pauseTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
    // 設置動畫的時間的偏移
    layer.timeOffset = pauseTime;
    
     layer.speed = 0;
}


- (void)resumeAnimation {
    
    // 獲取暫停時的時間
    CFTimeInterval pasuseTime = [layer timeOffset];
    
    layer.speed = 1;
    layer.timeOffset = 0;
    layer.beginTime = 0;
    
    // 設置開始的時間(繼續動畫，這樣設置至關於讓動畫等待的秒數等於暫停的秒)
    layer.beginTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pasuseTime;
}


- (CAAnimation *)rotationAnimation {
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    
    animation.duration = 2.0;
    animation.byValue = @(2 * M_PI);
    animation.repeatCount = HUGE_VALF;
    
    // 設置動畫開始的媒體時間（用於設置動畫的延遲啓動）,要加上CACurrentMediaTime
    animation.beginTime =  CACurrentMediaTime() + 2;

    [layer addAnimation:animation forKey:@"rotaion"];

---

<h3>附：CALayer中能夠用來作動畫的屬性 </h3>