iOS Core Animation 核心動(dòng)畫

做iOS開發(fā)已經(jīng)有三年了，之前遇到動(dòng)畫效果都是零零碎碎的研究，作為一個(gè)iOS開發(fā)者是時(shí)候整理一下核心動(dòng)畫相關(guān)的資料了。

基礎(chǔ)

  • Core Animation可以用在Mac OS X和iOS平臺(tái)。
  • Core Animation的動(dòng)畫執(zhí)行過程都是在后臺(tái)操作的，不會(huì)阻塞主線程。
  • 還有一點(diǎn)需要注意：Core Animation是直接作用在CALayer上的，并非UIView。

使用步驟

1.首先得有CALayer
2.初始化一個(gè)CAAnimation對象，并設(shè)置一些動(dòng)畫相關(guān)屬性
3.通過調(diào)用CALayer的addAnimation:forKey:方法，添加CAAnimation對象到CALayer中，這樣就能開始執(zhí)行動(dòng)畫了
4.通過調(diào)用CALayer的removeAnimationForKey:方法可以停止CALayer中的動(dòng)畫

詳細(xì)介紹

  • 要想執(zhí)行動(dòng)畫，就必須初始化一個(gè)CAAnimation對象。下面介紹CAAnimation


  • 核心動(dòng)畫中所有類都遵守CAMediaTiming
  • 注意：CAAnaimation是個(gè)抽象類，不具備動(dòng)畫效果，CAPropertyAnimation也是個(gè)抽象類，本身不具備動(dòng)畫效果，只有它們的子類才有

可用動(dòng)畫類 ： CAAnimationGroup 、CATransition、CABasicAnimation和CAKeyframeAnimation

  • CAAnimationGroup：動(dòng)畫組，可以同時(shí)進(jìn)行縮放，旋轉(zhuǎn)等動(dòng)畫
  • CATransition：轉(zhuǎn)場動(dòng)畫，界面之間跳轉(zhuǎn)都可以用轉(zhuǎn)場動(dòng)畫
  • CABasicAnimation：基本動(dòng)畫，做一些簡單效果
  • CAKeyframeAnimation：幀動(dòng)畫，做一些連續(xù)的流暢的動(dòng)畫

CAAnimation的常用屬性

duration：動(dòng)畫的持續(xù)時(shí)間 
repeatCount：動(dòng)畫的重復(fù)次數(shù) 
timingFunction：控制動(dòng)畫運(yùn)行的節(jié)奏 
    ---> timingFunction可選的值有： 
        --- kCAMediaTimingFunctionLinear（線性）：勻速，給你一個(gè)相對靜態(tài)的感覺 
        --- kCAMediaTimingFunctionEaseIn（漸進(jìn)）：動(dòng)畫緩慢進(jìn)入，然后加速離開 
        --- kCAMediaTimingFunctionEaseOut（漸出）：動(dòng)畫全速進(jìn)入，然后減速的到達(dá)目的地 
        --- kCAMediaTimingFunctionEaseInEaseOut（漸進(jìn)漸出）：動(dòng)畫緩慢的進(jìn)入，中間加速，然后減速的到達(dá)目的地。這個(gè)是默認(rèn)的動(dòng)畫行為。
delegate：動(dòng)畫代理(CAAnimationDelegate)，用來監(jiān)聽動(dòng)畫的執(zhí)行過程 
@interface NSObject (CAAnimationDelegate) // 動(dòng)畫開始執(zhí)行的時(shí)候觸發(fā)這個(gè)方法 
- (void)animationDidStart:(CAAnimation *)anim; // 動(dòng)畫執(zhí)行完畢的時(shí)候觸發(fā)這個(gè)方法 
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
 @end```


// 創(chuàng)建基本動(dòng)畫CABasicAnimation *animation = [CABasicAnimation animation];
// 設(shè)置動(dòng)畫類型animation.keyPath = @"transform";
// 設(shè)置動(dòng)畫結(jié)束后不刪除動(dòng)畫animation.removedOnCompletion = NO;
// 設(shè)置動(dòng)畫結(jié)束后的最新狀態(tài)animation.fillMode = kCAFillModeForwards;
// 設(shè)置動(dòng)畫時(shí)長animation.duration = 4;
// 設(shè)置移動(dòng)位置animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 0, 0, 1)];[self.myLayer addAnimation:animation forKey:nil];

####CABaseAnimation
CAPropertyAnimation的子類
屬性解析:
**fromValue**：keyPath相應(yīng)屬性的初始值
**byValue**:可選值
**toValue**：keyPath
相應(yīng)屬性的結(jié)束值隨著動(dòng)畫的進(jìn)行，在長度為`duration`的持續(xù)時(shí)間內(nèi)，`keyPath`相應(yīng)屬性的值從`fromValue`漸漸地變?yōu)閌toValue`

**Attention**:如果`fillMode=kCAFillModeForwards`和`removedOnComletion=NO`
，那么在動(dòng)畫執(zhí)行完畢后，圖層會(huì)保持顯示動(dòng)畫執(zhí)行后的狀態(tài)。但在實(shí)質(zhì)上，圖層的屬性值還是動(dòng)畫執(zhí)行前的初始值，并沒有真正被改變。比如，`CALayer`的`position`初始值為(0,0)，`CABasicAnimation`的`fromValue`為(10,10)，toValue為(100,100)，雖然動(dòng)畫執(zhí)行完畢后圖層保持在(100,100)這個(gè)位置，實(shí)質(zhì)上圖層的position還是為(0,0)

// 創(chuàng)建基本動(dòng)畫
CABasicAnimation *animation = [CABasicAnimation animation];
// 設(shè)置動(dòng)畫類型
animation.keyPath = @"transform";
// 設(shè)置動(dòng)畫結(jié)束后不刪除動(dòng)畫
animation.removedOnCompletion = NO;
// 設(shè)置動(dòng)畫結(jié)束后的最新狀態(tài)
animation.fillMode = kCAFillModeForwards;
// 設(shè)置動(dòng)畫時(shí)長
animation.duration = 4;
// 設(shè)置移動(dòng)位置
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 0, 0, 1)];
[self.myLayer addAnimation:animation forKey:nil];```

CAKeyFrameAnimation

兩者的區(qū)別
CABasicAnimation：

只能從一個(gè)數(shù)值（fromValue）變到另一個(gè)數(shù)值（toValue）
CAKeyframeAnimation：

會(huì)使用一個(gè)NSArray保存這些數(shù)值
CABasicAnimation可看做是只有2個(gè)關(guān)鍵幀的CAKeyframeAnimation關(guān)鍵幀動(dòng)畫

values 關(guān)鍵幀數(shù)組

上述的NSArray對象。里面的元素稱為“關(guān)鍵幀”(keyframe)。
動(dòng)畫對象會(huì)在指定的時(shí)間（duration）內(nèi)，依次顯示values數(shù)組中的每一個(gè)關(guān)鍵幀

path 路徑軌跡

path：可以設(shè)置一個(gè)CGPathRef、CGMutablePathRef，讓圖層按照路徑軌跡移動(dòng)。
path只對CALayer的anchorPoint和position起作用。
注意：如果設(shè)置了path，那么values關(guān)鍵幀將被忽略

keyTimes：關(guān)鍵幀所對應(yīng)的時(shí)間點(diǎn)

keyTimes：可以為對應(yīng)的關(guān)鍵幀指定對應(yīng)的時(shí)間點(diǎn)，其取值范圍為0到1.0
keyTimes中的每一個(gè)時(shí)間值都對應(yīng)values中的每一幀。如果沒有設(shè)置keyTimes，各個(gè)關(guān)鍵幀的時(shí)間是平分的

removedOnCompletion：默認(rèn)為YES

代表動(dòng)畫執(zhí)行完畢后就從圖層上移除，圖形會(huì)恢復(fù)到動(dòng)畫執(zhí)行前的狀態(tài)。如果想讓圖層保持顯示動(dòng)畫執(zhí)行后的狀態(tài)，那就設(shè)置為NO，不過還要設(shè)置fillMode為kCAFillModeForwards

fillMode：決定當(dāng)前對象在非active時(shí)間段的行為.

比如動(dòng)畫開始之前,動(dòng)畫結(jié)束之后

beginTime：可以用來設(shè)置動(dòng)畫延遲執(zhí)行時(shí)間

若想延遲2s，就設(shè)置為CACurrentMediaTime()+2，CACurrentMediaTime()為圖層的當(dāng)前時(shí)間

timingFunction：速度控制函數(shù)

控制動(dòng)畫運(yùn)行的節(jié)奏

CGPoint fromPoint = sublayer.frame.origin;  
  
//路徑曲線  
UIBezierPath *movePath = [UIBezierPath bezierPath];  
[movePath moveToPoint:fromPoint];  
CGPoint toPoint = CGPointMake(30, 360);  
[movePath addQuadCurveToPoint:toPoint  
                 controlPoint:CGPointMake(300,0)];  
  
  
//關(guān)鍵幀  
CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];  
moveAnim.path = movePath.CGPath;   
moveAnim.removedOnCompletion = YES;  
moveAnim.duration = 3;  
moveAnim.delegate = self;  
  
//旋轉(zhuǎn)變化  
CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];  
scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];  
//x，y軸縮小到0.1,Z 軸不變  
scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];  
scaleAnim.removedOnCompletion = YES;  
scaleAnim.duration = 5;  
scaleAnim.delegate = self;  
  
//透明度變化  
CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];  
opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];  
opacityAnim.toValue = [NSNumber numberWithFloat:0.1];  
opacityAnim.removedOnCompletion = YES;  
opacityAnim.delegate = self;  ```

  • keyPath可以使用的key

  • define angle2Radian(angle) ((angle)/180.0*M_PI)

  • transform.rotation.x 圍繞x軸翻轉(zhuǎn) 參數(shù)：角度 angle2Radian(4)

transform.rotation.y 圍繞y軸翻轉(zhuǎn) 參數(shù)：同上

transform.rotation.z 圍繞z軸翻轉(zhuǎn) 參數(shù)：同上

transform.rotation 默認(rèn)圍繞z軸

transform.scale.x x方向縮放 參數(shù)：縮放比例 1.5

transform.scale.y y方向縮放 參數(shù)：同上

transform.scale.z z方向縮放 參數(shù)：同上

transform.scale 所有方向縮放 參數(shù)：同上

transform.translation.x x方向移動(dòng) 參數(shù)：x軸上的坐標(biāo) 100

transform.translation.y x方向移動(dòng) 參數(shù)：y軸上的坐標(biāo)

transform.translation.z x方向移動(dòng) 參數(shù)：z軸上的坐標(biāo)

transform.translation 移動(dòng) 參數(shù)：移動(dòng)到的點(diǎn) （100，100）

opacity 透明度 參數(shù)：透明度 0.5

backgroundColor 背景顏色 參數(shù)：顏色 (id)[[UIColor redColor] CGColor]

cornerRadius 圓角 參數(shù)：圓角半徑 5

borderWidth 邊框?qū)挾?參數(shù)：邊框?qū)挾?5

bounds 大小 參數(shù)：CGRect

contents 內(nèi)容 參數(shù)：CGImage

contentsRect 可視內(nèi)容 參數(shù)：CGRect 值是0～1之間的小數(shù)

hidden 是否隱藏

position

shadowColor

shadowOffset

shadowOpacity

shadowRadius




歡迎關(guān)注我的[微博](http://weibo.com/u/2209572342/home?topnav=1&wvr=6&mod=logo)和[博客](http://dwz.cn/iOS_BK)。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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