核心動畫

Core Animation，中文翻譯為核心動畫，它是一組非常強大的動畫處理API，使用它能做出非常炫麗的動畫效果，而且往往是事半功倍。也就是說，使用少量的代碼就可以實現非常強大的功能。
Core Animation可以用在Mac OS X和iOS平臺。
Core Animation的動畫執行過程都是在后臺操作的，不會阻塞主線程。
要注意的是，Core Animation是直接作用在CALayer上的，并非UIView。

一： 基本概念

1.1 什么是核心動畫

Core Animation(核心動畫)是一組功能強大、效果華麗的動畫API，無論在iOS系統或者在你開發的App中，都有大量應用。


1.png

可以看到，核心動畫位于UIKit的下一層，相比UIView動畫，它可以實現更復雜的動畫效果。
核心動畫作用在CALayer（Core animation layer）上，CALayer從概念上類似UIView，我們可以將UIView看成是一種特殊的CALayer（可以響應事件）
　　實際上，每一個view都有其對應的layer，這個layer是root layer：

@property(nonatomic,readonly,strong)                 CALayer  *layer;

給view加上動畫，本質上是對其layer進行操作，layer包含了各種支持動畫的屬性，動畫則包含了屬性變化的值、變化的速度、變化的時間等等，兩者結合產生動畫的過程。

#######1.2 核心動畫和UIView動畫
核心動畫和UIView動畫的對比：UIView動畫可以看成是對核心動畫的封裝，和UIView動畫不同的是，通過核心動畫改變layer的狀態（比如position），動畫執行完畢后實際上是沒有改變的（表面上看起來已改變）。

核心動畫的優點有：

  • 1）性能強大，使用硬件加速，可以同時向多個圖層添加不同的動畫效果
  • 2）接口易用，只需要少量的代碼就可以實現復雜的動畫效果。
  • 3）運行在后臺線程中，在動畫過程中可以響應交互事件（UIView動畫默認動畫過程中不響應交互事件）。

#######1.3 核心動畫類的層次結構

2.png

CAAnimation是所有動畫對象的父類，實現CAMediaTiming協議，負責控制動畫的時間、速度和時間曲線等等，是一個抽象類，不能直接使用。

  • CAPropertyAnimation ：是CAAnimation的子類，它支持動畫地顯示圖層的keyPath，一般不直接使用。
  • iOS9.0之后新增CASpringAnimation類，它實現彈簧效果的動畫，是CABasicAnimation的子類。

綜上，核心動畫類中可以直接使用的類有：

CABasicAnimation 基本動畫
CAKeyframeAnimation
CATransition 轉場動畫
CAAnimationGroup 組動畫
CASpringAnimation 彈簧動畫

1.4 核心動畫類的核心方法

#######1.4.1 初始化CAAnimation對象

一般使用animation方法生成實例

 + (instancetype)animation;

如果是CAPropertyAnimation的子類，還可以通過animationWithKeyPath生成實例

     + (instancetype)animationWithKeyPath:(nullable NSString *)path;

#######1.4.2 設置動畫的相關屬性
設置動畫的執行時間，執行曲線，keyPath的目標值，代理等等

#######1.4.3 動畫的添加和移除
調用CALayer的addAnimation:forKey:方法將動畫添加到CALayer中，這樣動畫就開始執行了

- (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key;

調用CALayer的removeAnimation方法停止CALayer中的動畫

 - (void)removeAnimationForKey:(NSString *)key;
 - (void)removeAllAnimations;

二: 核心動畫類的常用屬性

duration：動畫的持續時間
repeatCount：動畫的重復次數
timingFunction：動畫的時間節奏控制

2.1 我們動畫的keyPath

keyPath：可以指定keyPath為CALayer的屬性值，并對它的值進行修改，以達到對應的動畫效果，需要注意的是部分屬性值是不支持動畫效果的。

  • 　以下是具有動畫效果的keyPath：
 //CATransform3D Key Paths : (example)transform.rotation.z
     //rotation.x
     //rotation.y
     //rotation.z
     //rotation 旋轉

     //scale.x
     //scale.y
     //scale.z
     //scale     縮放

     //translation.x
     //translation.y
     //translation.z
     //translation 平移
---------------------------------

  //CGPoint Key Paths : (example)position.x
     //x
     //y
---------------------------------

//CGRect Key Paths : (example)bounds.size.width
     //origin.x
     //origin.y
     //origin
     //size.width
     //size.height
     //size
---------------------------------

//opacity
     //backgroundColor
     //cornerRadius 
     //borderWidth
     //contents 
---------------------------------

 //Shadow Key Path:
     //shadowColor 
     //shadowOffset 
     //shadowOpacity 
     //shadowRadius
2.2 timingFunction：動畫的時間節奏控制
 timingFunctionName的enum值如下：
     kCAMediaTimingFunctionLinear 勻速
     kCAMediaTimingFunctionEaseIn 慢進
     kCAMediaTimingFunctionEaseOut 慢出
     kCAMediaTimingFunctionEaseInEaseOut 慢進慢出
     kCAMediaTimingFunctionDefault 默認值（慢進慢出）
2.3 fillMode：視圖在非Active時的行為
2.4 removedOnCompletion 動畫執行完畢后是否從圖層上移除

removedOnCompletion：動畫執行完畢后是否從圖層上移除，默認為YES（視圖會恢復到動畫前的狀態），可設置為NO（圖層保持動畫執行后的狀態，前提是fillMode設置為kCAFillModeForwards）

2.5 beginTime：動畫延遲執行時間（通過CACurrentMediaTime() + your time 設置）
2.6 delegate：代理
  代理方法如下：
     - (void)animationDidStart:(CAAnimation *)anim;  //動畫開始
     - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag; //動畫結束

三： CABasicAnimation

CABasicAnimation可以設定keyPath的起點，終點的值，動畫會沿著設定點進行移動，CABasicAnimation可以看成是只有兩個關鍵點的特殊的CAKeyFrameAnimation。

#######3.1 Scale的實例

func testScale() {
    let ani = CABasicAnimation(keyPath: "transform.scale")
    ani.fromValue = 0
    ani.toValue = 2
    ani.isRemovedOnCompletion = false
    ani.fillMode = kCAFillModeForwards
    ani.duration = 3
    ani.repeatCount = MAXFLOAT
    ani.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    showImgView.layer.add(ani, forKey: "transform.scale")
}

#######3.2 Rotation實例

func testRotation() {
    let ani = CABasicAnimation(keyPath: "transform.rotation")
    ani.fromValue = 0
    ani.toValue = -M_PI
    ani.isRemovedOnCompletion = false
    ani.fillMode = kCAFillModeForwards
    ani.duration = 3
    ani.repeatCount = MAXFLOAT
    ani.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    showImgView.layer.add(ani, forKey: "transform.rotation")
}

#######3.3 Position


func testPosition() {
    let ani = CABasicAnimation(keyPath: "position")
    ani.fromValue = CGPoint()
    ani.toValue = view.center
    ani.isRemovedOnCompletion = false
    ani.fillMode = kCAFillModeForwards
    ani.duration = 3
    ani.repeatCount = MAXFLOAT
    ani.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    showImgView.layer.add(ani, forKey: "position")
}

關鍵幀動畫

一： CAKeyframeAnimation

可以設定keyPath起點、中間關鍵點（不止一個）、終點的值，每一幀所對應的時間，動畫會沿著設定點進行移動。
CAKeyframeAnimation的重要屬性：

  • 1， values：關鍵幀數組對象，里面每一個元素即為一個關鍵幀，動畫會在對應的時間段內，依次執行數組中每一個關鍵幀的動畫。

  • 2，path：動畫路徑對象，可以指定一個路徑，在執行動畫時路徑會沿著路徑移動，Path在動畫中只會影響視圖的Position。

  • 3，keyTimes：設置關鍵幀對應的時間點，范圍：0-1。如果沒有設置該屬性，則每一幀的時間平分。

二： 關鍵幀動畫的實例

    /// 圍繞四方形運動
    func testFramePosition()  {

        let ani:CAKeyframeAnimation = CAKeyframeAnimation(keyPath: "position")
        ani.duration = 4.0
        ani.isRemovedOnCompletion = false
        ani.fillMode = kCAFillModeForwards
        ani.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseOut)
        ani.repeatCount = MAXFLOAT
        ani.duration = 3
        let value1 = CGPoint(x: 100, y: 100)
        let value2 = CGPoint(x: 400, y: 100)
        let value3 = CGPoint(x: 400, y: 400)
        let value4 = CGPoint(x: 100, y: 400)
        let value5 = CGPoint(x: 100, y: 100)
        ani.values = [value1, value2, value3, value4, value5]
        showImgView.layer.add(ani, forKey: "position")
    }

    /// 圍繞path運動
    func testCirclePosition()  {

        let ani:CAKeyframeAnimation = CAKeyframeAnimation(keyPath: "position")
        ani.isRemovedOnCompletion = false
        ani.fillMode = kCAFillModeBoth
        ani.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseOut)
        ani.repeatCount = MAXFLOAT
        ani.duration = 3
         let path =  CGMutablePath()
        path.addEllipse(in: CGRect(x: 100, y: 100, width: 200, height: 200), transform: CGAffineTransform(scaleX: 1, y: 1))
        ani.path = path
        showImgView.layer.add(ani, forKey: "position")
    }
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 在iOS中隨處都可以看到絢麗的動畫效果，實現這些動畫的過程并不復雜，今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,572評論 6贊 30
  • 在iOS中隨處都可以看到絢麗的動畫效果，實現這些動畫的過程并不復雜，今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5贊 13
  • 在iOS實際開發中常用的動畫無非是以下四種：UIView動畫，核心動畫，幀動畫，自定義轉場動畫。 1.UIView...
    請叫我周小帥閱讀 3,169評論 1贊 23
  • Core Animation Core Animation，中文翻譯為核心動畫，它是一組非常強大的動畫處理API，...
    45b645c5912e閱讀 3,069評論 0贊 21
  • 核心動畫（Core Animation）一、Core animation簡單介紹 1.Core Animatio...
    北辰青閱讀 1,095評論 0贊 1