核心動畫

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

一： 基本概念

1.1 什么是核心動畫

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


1.png

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

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

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

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

核心動畫的優(yōu)點(diǎn)有：

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

#######1.3 核心動畫類的層次結(jié)構(gòu)

2.png

CAAnimation是所有動畫對象的父類，實(shí)現(xiàn)CAMediaTiming協(xié)議，負(fù)責(zé)控制動畫的時間、速度和時間曲線等等，是一個抽象類，不能直接使用。

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

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

CABasicAnimation 基本動畫
CAKeyframeAnimation
CATransition 轉(zhuǎn)場動畫
CAAnimationGroup 組動畫
CASpringAnimation 彈簧動畫

1.4 核心動畫類的核心方法

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

一般使用animation方法生成實(shí)例

 + (instancetype)animation;

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

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

#######1.4.2 設(shè)置動畫的相關(guān)屬性
設(shè)置動畫的執(zhí)行時間，執(zhí)行曲線，keyPath的目標(biāo)值，代理等等

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

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

調(diào)用CALayer的removeAnimation方法停止CALayer中的動畫

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

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

duration：動畫的持續(xù)時間
repeatCount：動畫的重復(fù)次數(shù)
timingFunction：動畫的時間節(jié)奏控制

2.1 我們動畫的keyPath

keyPath：可以指定keyPath為CALayer的屬性值，并對它的值進(jìn)行修改，以達(dá)到對應(yīng)的動畫效果，需要注意的是部分屬性值是不支持動畫效果的。

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

     //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：動畫的時間節(jié)奏控制
 timingFunctionName的enum值如下：
     kCAMediaTimingFunctionLinear 勻速
     kCAMediaTimingFunctionEaseIn 慢進(jìn)
     kCAMediaTimingFunctionEaseOut 慢出
     kCAMediaTimingFunctionEaseInEaseOut 慢進(jìn)慢出
     kCAMediaTimingFunctionDefault 默認(rèn)值（慢進(jìn)慢出）
2.3 fillMode：視圖在非Active時的行為
2.4 removedOnCompletion 動畫執(zhí)行完畢后是否從圖層上移除

removedOnCompletion：動畫執(zhí)行完畢后是否從圖層上移除，默認(rèn)為YES（視圖會恢復(fù)到動畫前的狀態(tài)），可設(shè)置為NO（圖層保持動畫執(zhí)行后的狀態(tài)，前提是fillMode設(shè)置為kCAFillModeForwards）

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

三： CABasicAnimation

CABasicAnimation可以設(shè)定keyPath的起點(diǎn)，終點(diǎn)的值，動畫會沿著設(shè)定點(diǎn)進(jìn)行移動，CABasicAnimation可以看成是只有兩個關(guān)鍵點(diǎn)的特殊的CAKeyFrameAnimation。

#######3.1 Scale的實(shí)例

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實(shí)例

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")
}

關(guān)鍵幀動畫

一： CAKeyframeAnimation

可以設(shè)定keyPath起點(diǎn)、中間關(guān)鍵點(diǎn)（不止一個）、終點(diǎn)的值，每一幀所對應(yīng)的時間，動畫會沿著設(shè)定點(diǎn)進(jìn)行移動。
CAKeyframeAnimation的重要屬性：

  • 1， values：關(guān)鍵幀數(shù)組對象，里面每一個元素即為一個關(guān)鍵幀，動畫會在對應(yīng)的時間段內(nèi)，依次執(zhí)行數(shù)組中每一個關(guān)鍵幀的動畫。

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

  • 3，keyTimes：設(shè)置關(guān)鍵幀對應(yīng)的時間點(diǎn)，范圍：0-1。如果沒有設(shè)置該屬性，則每一幀的時間平分。

二： 關(guān)鍵幀動畫的實(shí)例

    /// 圍繞四方形運(yùn)動
    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運(yùn)動
    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")
    }
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容