iOS CABasicAnimation詳解

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

一、關于CAlayer

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

CALayer.png

CALayer屬性.png

CAlayer遵循CAMeidaTiming協議,CABasicAnimation繼承于CAPropertyAnimation,CAPropertyAnimation繼承于CAAnimation而CAAnimation遵CAMeidaTiming協議

CAMediaTiming屬性列表

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

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

FillMode.png

二、CAAnimation

CAAnimation可以分為以下幾類:

  • CABasicAnimation
    基礎動畫,通過設定起始點,終點,時間,動畫會沿著你這設定點進行移動。可以看做特殊的CAKeyFrameAnimation
  • CAKeyframeAnimation
    關鍵幀動畫,可定制度比CABasicAnimation高,也是本系列的接下來的內容
  • CAAnimationGroup
    組動畫,支持多個CABasicAnimation或者CAKeyframeAnimation動畫同時執行
繼承關系.jpg
  • CAAnimation 是一個抽象類, 遵循了CAMediaTiming協議和CAAction協議 我們不能直接使用CAAnimation類 而是使用其子類;
  • CATransition:提供漸變效果,比如推拉push效果,消退fade效果,揭開reveal 效果
  • CAAnimationGroup 允許多個動畫同時播放
  • CABasicAnimation 提供了對單一動畫的實現
  • CAKeyframeAnimation 關鍵幀動畫 可以定義動畫路線
  • CAPropertyAnimation 屬性動畫 通常不直接使用,而是使用CABasicAnimation子類

** CABasicAnimation屬性及說明**


屬性和說明.jpeg

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

我們可以創建一個CABasicAnimaiton的對象通過keyPath的方式。CABasicAnimation提供了fromValue、toValue、byValue的設置(插值)。它們三個屬性定義了一個動畫的軌跡,并且最少兩個值不能為空。

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

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

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

  • 一個 CABasicAniamtion 的實例對象只是一個數據模型

  • 速度控制函數(CAMediaTimingFunction)

  • kCAMediaTimingFunctionLinear(線性):勻速,給你一個相對靜態的感覺,這個是默認的動畫行為。

  • 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];
    // 設置無限循環動畫
    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重合,當我們設置了錨點之后,我們的視圖會根據設置的錨點來來進行相對偏移。
看了許多相關文章,有些說錨點是相對于postition的個人感覺有點問題,親自測試了一下,改變layer的position后錨點還是0.50.5,只有layer的位置發生了變化,所以得出結論position是相對于錨點的描述,描述的是當前layer的錨點在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 內容,比如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的值變化到當前的狀態。
  • 只有toValue的值不為空,動畫的效果將會從當前狀態的值變化到toValue的值。
  • 只有byValue的值不為空,動畫的效果將會從當前的值變化到(當前狀態的值+byValue)的值。

相關資料

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,818評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,185評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,656評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,647評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,446評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,951評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,041評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,189評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,718評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,602評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,800評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,316評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,045評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,419評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,671評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,420評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,755評論 2 371

推薦閱讀更多精彩內容