iOS CABasicAnimation詳解

最近一直在看關于CALayer的相關知識，這里整理一下CABasicAnimation相關知識
1.CAlayer
2.CoreAnimation
3.anchorPoint（錨點）
4.CABasicAnimation

一、關于CAlayer

CoreAnimation是基于CAlayer層的動畫，CAlayer是定義在QuartzCore框架中的(Core Animation)
蘋果對于CAlayer的概述
CAlayer管理基于圖像的內(nèi)容并允許您對該內(nèi)容執(zhí)行動畫的對象
層通常用于為視圖提供后備存儲，但也可以使用，而無需顯示內(nèi)容。層的主要工作是管理您提供的視覺內(nèi)容，但圖層本身具有可設置的可視屬性，例如背景顏色，邊框和陰影。除了管理視覺內(nèi)容之外，該層還保留有關其內(nèi)容的幾何形狀的信息（例如其位置，大小和變換），用于在屏幕上呈現(xiàn)該內(nèi)容。
修改圖層的屬性是如何啟動圖層內(nèi)容或幾何圖形的動畫。層對象通過采用定義層的定時信息的協(xié)議來封裝層的持續(xù)時間和起始位置及其動畫。CAMediaTiming
如果圖層對象是由視圖創(chuàng)建的，則視圖通常會自動分配為圖層的委托，并且不應更改該關系。對于您自己創(chuàng)建的圖層，可以分配delegate對象并使用該對象動態(tài)提供圖層的內(nèi)容并執(zhí)行其他任務。圖層也可能具有布局管理器對象（分配給該屬性）以分別管理子視圖的布局。layoutManager

CALayer.png

CALayer屬性.png

CAlayer遵循CAMeidaTiming協(xié)議,CABasicAnimation繼承于CAPropertyAnimation,CAPropertyAnimation繼承于CAAnimation而CAAnimation遵CAMeidaTiming協(xié)議

CAMediaTiming屬性列表

屬性 類型 說明
beginTime CFTimeInterval 指定接收方相對于其父對象（如果適用）的開始時間。
timeOffset CFTimeInterval 指定活動本地時間的額外時間偏移量。
repeatCount float 確定動畫重復的次數(shù)。
repeatDuration CFTimeInterval 確定動畫重復的秒數(shù)。
duration CFTimeInterval 指定動畫的基本持續(xù)時間，以秒為單位。
speed float 指定從父時間空間將時間映射到接收者的時間空間。
autoreverses BOOL 確定動畫在完成后是否相反執(zhí)行
fillMode NSString 確定接收者的演示文稿是否在其活動持續(xù)時間完成后被凍結或刪除。

FillMode
這些常數(shù)決定了定時對象在其活動持續(xù)時間完成后的行為。默認值是 kCAFillModeRemoved。

FillMode.png

二、CAAnimation

CAAnimation可以分為以下幾類：

  • CABasicAnimation
    基礎動畫，通過設定起始點，終點，時間，動畫會沿著你這設定點進行移動?？梢钥醋鎏厥獾腃AKeyFrameAnimation
  • CAKeyframeAnimation
    關鍵幀動畫，可定制度比CABasicAnimation高，也是本系列的接下來的內(nèi)容
  • CAAnimationGroup
    組動畫，支持多個CABasicAnimation或者CAKeyframeAnimation動畫同時執(zhí)行
繼承關系.jpg
  • CAAnimation 是一個抽象類， 遵循了CAMediaTiming協(xié)議和CAAction協(xié)議 我們不能直接使用CAAnimation類 而是使用其子類；
  • CATransition：提供漸變效果，比如推拉push效果，消退fade效果，揭開reveal 效果
  • CAAnimationGroup 允許多個動畫同時播放
  • CABasicAnimation 提供了對單一動畫的實現(xiàn)
  • CAKeyframeAnimation 關鍵幀動畫 可以定義動畫路線
  • CAPropertyAnimation 屬性動畫 通常不直接使用，而是使用CABasicAnimation子類

** CABasicAnimation屬性及說明**


屬性和說明.jpeg

CABasicAnimation提供了最基礎的動畫屬性設置，是簡單的keyframe動畫性能。CABasicAnimation可以看做是一種CAKeyframeAnimation的簡單動畫，因為它只有頭尾的關鍵幀（keyframe）。

我們可以創(chuàng)建一個CABasicAnimaiton的對象通過keyPath的方式。CABasicAnimation提供了fromValue、toValue、byValue的設置（插值）。它們?nèi)齻€屬性定義了一個動畫的軌跡，并且最少兩個值不能為空。

當設置了CABasicAnimation的起點與終點值后，中間的值都是通過插值方式計算出來的，插值計算是通過timingFunction來指定，timingFunction默認為空，使用liner（勻速運動）。例如，當我們設置了一個position的動畫，設置了開始值PointA與結束值PointB，它們的運動先計算PointA與PointB的中間運動值PointCenter，而PointCenter是由timingFunction來指定值的，并且動畫默認是直線勻速運動的。

  • CABasicAnimation遵循CAMediaTiming所以擁有CAMediaTiming的屬性。

  • CABasicAnimation為圖層屬性提供基本的單關鍵幀動畫功能的對象。

  • 一個 CABasicAniamtion 的實例對象只是一個數(shù)據(jù)模型

  • 速度控制函數(shù)(CAMediaTimingFunction)

  • kCAMediaTimingFunctionLinear（線性）：勻速，給你一個相對靜態(tài)的感覺,這個是默認的動畫行為。

  • kCAMediaTimingFunctionEaseIn（漸進）：動畫緩慢進入，然后加速離開

  • kCAMediaTimingFunctionEaseOut（漸出）：動畫全速進入，然后減速的到達目的地

  • kCAMediaTimingFunctionEaseInEaseOut（漸進漸出）：動畫緩慢的進入，中間加速，然后減速的到達目的地。

    CALayer *layer = [CALayer new];
    layer.frame = CGRectMake(100, 100, 100, 100);
    layer.backgroundColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer: layer];

    CABasicAnimation *animation  = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.duration = 2;
    
    animation.fromValue = [NSValue valueWithCGPoint:layer.position];
    
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)];
    //延時 1.0秒
    animation.beginTime = CACurrentMediaTime() + 1.0;
    // 指定動畫重復是否累加
    animation.cumulative = NO;
    // 動畫完成是否移除動畫
    animation.removedOnCompletion = YES;
    // 設置移動的效果為快入快出
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    // 設置無限循環(huán)動畫
    animation.repeatCount = HUGE_VALF;
    // 設置動畫完成時，自動以動畫回到原點
    animation.autoreverses = YES;
    // 設置動畫完成時，返回到原點
    animation.fillMode = kCAFillModeForwards;
    
    [layer addAnimation:animation forKey:nil];

  • 注意

** animation中的postion動畫fromValue與fromValue均為layer的position，position與frame中origin不是同一個東西哦，開始弄了半天動畫位置一直不對，才知道這里還有一個錨點的知識點。**

三、layer的position和anchorPoint(錨點)兩個屬性

1.position(位置)
position是layer中的anchorPoint點在superLayer中的位置坐標。
2.anchorPoint(錨點)
anchorPoint點是相對layer的，兩者是相對不同的坐標空間的一個重合點。默認的anchorPoint是（0.5,0.5），與positon重合，當我們設置了錨點之后，我們的視圖會根據(jù)設置的錨點來來進行相對偏移。
看了許多相關文章，有些說錨點是相對于postition的個人感覺有點問題，親自測試了一下，改變layer的position后錨點還是0.50.5，只有l(wèi)ayer的位置發(fā)生了變化，所以得出結論position是相對于錨點的描述，描述的是當前l(fā)ayer的錨點在superlayer的位置

錨點與位置測試.png

錨點與位置驗證.png

蘋果Doc相關說明
錨點影響位置.png

animationWithKeyPath值

值 說明 value
transform.scale 比例轉化 @(0.8)
transform.scale.x 寬的比例 @(0.8)
transform.scale.y 高的比例 @(0.8)
transform.rotation.x 圍繞x軸旋轉 @(M_PI)
transform.rotation.y 圍繞y軸旋轉 @(M_PI)
transform.rotation.z 圍繞z軸旋轉 @(M_PI)
cornerRadius 圓角的設置 @(50)
backgroundColor 背景顏色的變化 (id)[UIColor purpleColor].CGColor
bounds 大小，中心不變 [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
position 位置(中心點的改變) [NSValue valueWithCGPoint:CGPointMake(300, 300)];
contents 內(nèi)容，比如UIImageView的圖片 imageAnima.toValue = (id)[UIImage imageNamed:@"to"].CGImage;
opacity 透明度 @(0.7)
contentsRect.size.width 橫向拉伸縮放 @(0.4)最好是0~1之間的
anchorPoint 錨點(相當于改變position) [NSValue valueWithCGPoint:CGPointMake(1, 1)]

只要是CAlayer屬性中的支持隱式動畫的都可以作為keypath的值

四、CABasicAnimation

**CABasicAnimation為圖層屬性提供基本的單關鍵幀動畫功能的對象最重要的三個屬性就是fromValue、toValue、byValue **

屬性 說明
fromValue 動畫的效果變化的初始值
toValue 動畫效果變化的結束值（絕對值）
byValue byValue;動畫效果變化的結束值（相對值）
  • fromValue和toValue不為空，動畫的效果會從fromValue的值變化到toValue。
  • fromValue和byValue都不為空，動畫的效果將會從fromValue變化到fromValue+byValue。
  • toValue 和byValue都不為空，動畫的效果將會從toValue-byValue變化到toValue。
  • 只有fromValue的值不為空，動畫的效果將會從fromValue的值變化到當前的狀態(tài)。
  • 只有toValue的值不為空，動畫的效果將會從當前狀態(tài)的值變化到toValue的值。
  • 只有byValue的值不為空，動畫的效果將會從當前的值變化到（當前狀態(tài)的值+byValue）的值。

相關資料

初探CALayer屬性
[Core Animation Programming Guide](Core Animation Programming Guide)
http://www.itdecent.cn/p/cd1bc0e82f4d
http://blog.jobbole.com/69111/
iOS 動畫之CoreAnimation(CALayer)

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

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

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