CoreAnimation 詳解

CAAnimation:核心動畫的基礎類,不能直接使用,負責動畫運行時間、速度的控制,本身實現了CAMediaTiming協議。

CAPropertyAnimation:屬性動畫的基類(通過屬性進行動畫設置,注意是可動畫屬性),不能直接使用。

CAAnimationGroup:動畫組,動畫組是一種組合模式設計,可以通過動畫組來進行所有動畫行為的統(tǒng)一控制,組中所有動畫效果可以并發(fā)執(zhí)行。

CATransition:轉場動畫,主要通過濾鏡進行動畫效果設置。

CABasicAnimation:基礎動畫,通過屬性修改進行動畫參數控制,只有初始狀態(tài)和結束狀態(tài)。

CAKeyframeAnimation:關鍵幀動畫,同樣是通過屬性進行動畫參數控制,但是同基礎動畫不同的是它可以有多個狀態(tài)控制。

基礎動畫、關鍵幀動畫都屬于屬性動畫,就是通過修改屬性值產生動畫效果,開發(fā)人員只需要設置初始值和結束值,中間的過程動畫(又叫“補間動畫”)由系統(tǒng)自動計算產生。和基礎動畫不同的是關鍵幀動畫可以設置多個屬性值,每兩個屬性中間的補間動畫由系統(tǒng)自動完成,因此從這個角度而言基礎動畫又可以看成是有兩個關鍵幀的關鍵幀動畫。


關系圖


1.? CABasicAnimation - 基礎動畫

下面是個scale 縮放的例子:

?CABasicAnimation *scaleAnimation = [CABasicAnimation ?

animationWithKeyPath:@"transform.scale"];

// 從1倍放大到1.5倍

scaleAnimation.fromValue = @(1.0);

scaleAnimation.toValue = @(1.5);

//scaleAnimation.beginTime = CACurrentMediaTime()+2; //動畫延遲執(zhí)行時間

scaleAnimation.autoreverses = YES; //設置這個屬性表示完成動畫后會回到執(zhí)行動畫之前的狀態(tài)

//這兩個屬性要一起設置,表示保持執(zhí)行動畫后的樣子不變(要想fillMode有效,最好設置removedOnCompletion=NO)

//scaleAnimation.removedOnCompletion = NO;

//scaleAnimation.fillMode = kCAFillModeForwards;

//重復次數

//scaleAnimation.repeatCount = 1;

//動畫時間

scaleAnimation.duration = 0.8;

scaleAnimation.delegate = self; //代理(CAAnimationDelegate)

[self.customView.layer addAnimation:scaleAnimation forKey:@"scaleAnimation"];?

暫停/開始 動畫:

-(void)animationPause{

//取得指定圖層動畫的媒體時間,后面參數用于指定子圖層,這里不需要

CFTimeInterval interval=[self.customView.layer convertTime:CACurrentMediaTime() fromLayer:nil];

//設置時間偏移量,保證暫停時停留在旋轉的位置

self.customView.layer.timeOffset = interval;

//速度設置為0,暫停動畫

self.customView.layer.speed=0;

}

-(void)animationResume{

//獲得暫停的時間

CFTimeInterval beginTime= CACurrentMediaTime()- self.customView.layer.timeOffset;

//設置偏移量

self.customView.layer.timeOffset=0;

//設置開始時間

self.customView.layer.beginTime=beginTime;

//設置動畫速度,開始運動

self.customView.layer.speed=1.0;

}

代理就兩個回調:

- (void)animationDidStart:(CAAnimation *)anim;

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

解釋下 fillMode 屬性以及 "animationWithKeyPath:" 這個字符串參數:

fillMode 有這四個類型:

/**

kCAFillModeRemoved 這個是默認值,也就是說當動畫開始前和動畫結束后,動畫對layer都沒有影響,動畫結束后,layer會恢復到之前的狀態(tài)?.

kCAFillModeForwards 當動畫結束后,layer會一直保持著動畫最后的狀態(tài).

kCAFillModeBackwards 在動畫開始前,你只要將動畫加入了一個layer,layer便立即進入動畫的初始狀態(tài)并等待動畫開始. 你可以這樣設定測試代碼,將一個動畫加入一個layer的時候延遲5秒執(zhí)行.然后就會發(fā)現在動畫沒有開始的時候,只要動畫被加入了layer,layer便處于動畫初始狀態(tài) ( 這里表示不是很理解)

kCAFillModeBoth 這個其實就是上面兩個的合成.動畫加入后開始之前,layer便處于動畫初始狀態(tài),動畫結束后layer保持動畫最后的狀

*/

"animationWithKeyPath:" ?傳的參數不能錯,比如上面的例子是縮放,就要寫? "transform.scale",如果想要設置水平或者上下移動就需要 "transform.translation.x"或者 "transform.translation.y"

具體參照下圖:

可設置的屬性-1


2.CAAimationGroup - ?動畫組合

相比于CABasicAnimation 就多了一個 用來存放動畫對象的 animations ?數組屬性。

?下面是一個縮放平移繞y軸旋轉的組合動畫:

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

scaleAnimation.fromValue = @(1);

scaleAnimation.toValue = @(0.5);

scaleAnimation.autoreverses = YES;

CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];

moveAnimation.fromValue = @(0);

moveAnimation.toValue = @(100);

moveAnimation.autoreverses = YES;

CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

rotateAnimation.fromValue = @(0);

rotateAnimation.toValue = @(2*M_PI);

rotateAnimation.autoreverses = YES;

CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];

groupAnnimation.duration = 2;

groupAnnimation.autoreverses = YES;

groupAnnimation.animations = @[moveAnimation, scaleAnimation, rotateAnimation];

groupAnnimation.repeatCount = MAXFLOAT;

[self.customView.layer addAnimation:groupAnnimation forKey:@"groupAnnimation"];


3.CAKeyframeAnimation - 關鍵幀動畫?

下面是一個利用? CAKeyframeAnimation 改變View 背景色的 小例子:

CAKeyframeAnimation *color = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];

color.values = @[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor blueColor].CGColor];

color.keyTimes = @[@0, @0.4,@0.6, @0.8,@1.1];

color.repeatCount = 1;

color.autoreverses = YES;

color.duration = 3;

[self.customView.layer addAnimation:color forKey:@"color"];

簡單的介紹下常用的屬性:

values:就是上述的NSArray對象。里面的元素稱為”關鍵幀”(keyframe)。動畫對象會在指定的時間(duration)內,依次顯示values數組中的每一個關鍵幀 .

keyTimes:各個關鍵幀的時間控制。

path:可以設置一個CGPathRef\CGMutablePathRef,讓層跟著路徑移動。path只對CALayer的anchorPoint和position起作用。如果你設置了path,那么values將被忽略 。

timingFunctions: 這個屬性用以指定時間函數,類似于運動的加速度。

(1) kCAMediaTimingFunctionLinear//線性

(2) kCAMediaTimingFunctionEaseIn//淡入

(3) kCAMediaTimingFunctionEaseOut//淡出

(4) kCAMediaTimingFunctionEaseInEaseOut//淡入淡出

(5) kCAMediaTimingFunctionDefault//默認

calculationMode: 該屬性決定了物體在每個子路徑下是跳著走還是勻速走。

(1) const kCAAnimationLinear//線性,默認

(2) const kCAAnimationDiscrete//離散,無中間過程,但keyTimes設置的時間依舊生效,物體跳躍地出現在各個關鍵幀上

(3) const kCAAnimationPaced//平均,keyTimes跟timeFunctions失效

(4) const kCAAnimationCubic//平均,同上

(5) const kCAAnimationCubicPaced//平均,同上

下面這個是 CAKeyframeAnimation 配合貝塞爾曲線 的簡單例子:?

CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];

//2.設置路徑

//繪制貝塞爾曲線

UIBezierPath *path = [[UIBezierPath alloc] init];

[path moveToPoint:CGPointMake(self.customView.layer.position.x, self.customView.layer.position.y)];

[path addCurveToPoint:CGPointMake(55, 400) controlPoint1:CGPointMake(10, 300) controlPoint2:CGPointMake(160, 280)];

keyframeAnimation.path=path.CGPath;//設置path屬性

//設置其他屬性

keyframeAnimation.duration=8.0;

keyframeAnimation.beginTime=CACurrentMediaTime();//設置延遲2秒執(zhí)行

keyframeAnimation.removedOnCompletion = NO;

keyframeAnimation.fillMode = kCAFillModeForwards;

//3.添加動畫到圖層,添加動畫后就會執(zhí)行動畫

[self.customView.layer addAnimation:keyframeAnimation forKey:@"KCKeyframeAnimation_Position"];

4. CATransition - 轉場動畫

簡單的例子:

CATransition *transition = [CATransition animation];

transition.duration = 2.0f;

transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

transition.type = kCATransitionMoveIn;

transition.subtype = kCATransitionFromRight;

[self.customView.layer addAnimation:transition forKey:@"animation"];

簡單的介紹下 幾個屬性:

type?: 有四種類型:

kCATransitionFade? ? ? ? ? ? ? ? ? //交叉淡化過渡

kCATransitionMoveIn? ? ? ? ? ? ? //移動覆蓋原圖

kCATransitionPush? ? ? ? ? ? ? ? ? ? //新視圖將舊視圖推出去

kCATransitionReveal? ? ? ? ? ? ? ? //底部顯出來

subType: 同樣四種

kCATransitionFromRight;

kCATransitionFromLeft(默認值)

kCATransitionFromTop;

kCATransitionFromBottom


參考鏈接: http://www.cnblogs.com/wengzilin/p/4256468.html

? ? ? ? ? ? ? http://www.bubuko.com/infodetail-1000965.html

? ? ? ? ? ? ? http://www.cocoachina.com/ios/20141022/10005.html

? ? ? ? ? ? ? http://www.cnblogs.com/wengzilin/p/4250957.html

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

相關閱讀更多精彩內容

  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,698評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,273評論 5 13
  • iOS動畫篇之CoreAnimation動畫 9月 22, 2016發(fā)布在Objective-C App如果想被大...
    白水灬煮一切閱讀 2,313評論 0 0
  • 先看看CAAnimation動畫的繼承結構 CAAnimation{ CAPropertyAnimation { ...
    時間不會倒著走閱讀 1,800評論 0 1
  • 金錢草的功效 清利濕熱,通淋,消腫。用于熱淋,沙淋,尿澀作痛,黃疸尿赤,癰腫疔瘡,毒蛇咬傷;肝膽結石,尿路結石。 ...
    花葉不見閱讀 485評論 0 0

友情鏈接更多精彩內容