最近一直在看關于CALayer的相關知識,這里整理一下CABasicAnimation相關知識
1.CAlayer
2.CoreAnimation
3.anchorPoint(錨點)
4.CABasicAnimation
一、關于CAlayer
CoreAnimation是基于CAlayer層的動畫,CAlayer是定義在QuartzCore框架中的(Core Animation)
蘋果對于CAlayer的概述
CAlayer管理基于圖像的內容并允許您對該內容執行動畫的對象
層通常用于為視圖提供后備存儲,但也可以使用,而無需顯示內容。層的主要工作是管理您提供的視覺內容,但圖層本身具有可設置的可視屬性,例如背景顏色,邊框和陰影。除了管理視覺內容之外,該層還保留有關其內容的幾何形狀的信息(例如其位置,大小和變換),用于在屏幕上呈現該內容。
修改圖層的屬性是如何啟動圖層內容或幾何圖形的動畫。層對象通過采用定義層的定時信息的協議來封裝層的持續時間和起始位置及其動畫。CAMediaTiming
如果圖層對象是由視圖創建的,則視圖通常會自動分配為圖層的委托,并且不應更改該關系。對于您自己創建的圖層,可以分配delegate對象并使用該對象動態提供圖層的內容并執行其他任務。圖層也可能具有布局管理器對象(分配給該屬性)以分別管理子視圖的布局。layoutManager
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。
二、CAAnimation
CAAnimation可以分為以下幾類:
- CABasicAnimation
基礎動畫,通過設定起始點,終點,時間,動畫會沿著你這設定點進行移動。可以看做特殊的CAKeyFrameAnimation - CAKeyframeAnimation
關鍵幀動畫,可定制度比CABasicAnimation高,也是本系列的接下來的內容 - CAAnimationGroup
組動畫,支持多個CABasicAnimation或者CAKeyframeAnimation動畫同時執行
- CAAnimation 是一個抽象類, 遵循了CAMediaTiming協議和CAAction協議 我們不能直接使用CAAnimation類 而是使用其子類;
- CATransition:提供漸變效果,比如推拉push效果,消退fade效果,揭開reveal 效果
- CAAnimationGroup 允許多個動畫同時播放
- CABasicAnimation 提供了對單一動畫的實現
- CAKeyframeAnimation 關鍵幀動畫 可以定義動畫路線
- CAPropertyAnimation 屬性動畫 通常不直接使用,而是使用CABasicAnimation子類
** CABasicAnimation屬性及說明**
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的位置
蘋果Doc相關說明
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)