iOS 核心動畫(Core Animation)

1.基本概念

核心動畫作用在CALayer(Core animation layer)上,CALayer從概念上類似UIView,我們可以將UIView看成是一種特殊的CALayer(可以響應(yīng)事件)。給view加上動畫,本質(zhì)上是對其layer進(jìn)行操作,layer包含了各種支持動畫的屬性,動畫則包含了屬性變化的值、變化的速度、變化的時間等等,兩者結(jié)合產(chǎn)生動畫的過程。

  • 核心動畫和UIView動畫的對比:UIView動畫可以看成是對核心動畫的封裝,和UIView動畫不同的是,通過核心動畫改變layer的狀態(tài)(比如position),動畫執(zhí)行完畢后實際上是沒有改變的(表面上看起來已改變)。

  • 總體來說核心動畫的優(yōu)點有:
      1)性能強(qiáng)大,使用硬件加速,可以同時向多個圖層添加不同的動畫效果
      2)接口易用,只需要少量的代碼就可以實現(xiàn)復(fù)雜的動畫效果。
      3)運行在后臺線程中,在動畫過程中可以響應(yīng)交互事件(UIView動畫默認(rèn)動畫過程中不響應(yīng)交互事件)。

2.核心動畫類的層次結(jié)構(gòu)

  • CAAnimation是所有動畫對象的父類,實現(xiàn)CAMediaTiming協(xié)議,負(fù)責(zé)控制動畫的時間、速度和時間曲線等等,是一個抽象類,不能直接使用。
  • CAPropertyAnimation :是CAAnimation的子類,它支持動畫地顯示圖層的keyPath,一般不直接使用。
  • iOS9.0之后新增CASpringAnimation類,它實現(xiàn)彈簧效果的動畫,是CABasicAnimation的子類。

綜上,核心動畫類中可以直接使用的類有:
  CABasicAnimation
  CAKeyframeAnimation
  CATransition
  CAAnimationGroup
  CASpringAnimation

3.核心動畫使用步驟

1.初始化CAAnimation對象
2.設(shè)置動畫的相關(guān)屬性
  設(shè)置動畫的執(zhí)行時間,執(zhí)行曲線,keyPath的目標(biāo)值,代理等等
3.動畫的添加和移除
  調(diào)用CALayer的addAnimation:forKey:方法將動畫添加到CALayer中,這樣動畫就開始執(zhí)行了

- (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key;

調(diào)用CALayer的removeAnimation方法停止CALayer中的動畫

- (void)removeAnimationForKey:(NSString *)key; 
- (void)removeAllAnimations;

4.核心動畫類的常用屬性

keyPath:可以指定keyPath為CALayer的屬性值,并對它的值進(jìn)行修改,以達(dá)到對應(yīng)的動畫效果,需要注意的是部分屬性值是不支持動畫效果的

//CATransform3D Key Paths : (example)transform.rotation.z
//rotation 旋轉(zhuǎn) 
//rotation.x  
//rotation.y 
//rotation.z 

//scale 縮放
//scale.x 
//scale.y 
//scale.z 

//translation 平移 
//translation.x
//translation.y 
//translation.z 

//CGPoint Key Paths : (example)position.x
//x
//y 
//CGRect Key Paths : (example)bounds.size.width 
//origin.x 
//origin.y 
//origin 
//size.width  view的寬變化
//size.height view的高變化
//size 

//opacity       
//backgroundColor 
//cornerRadius  
//borderWidth 
//contents  

//Shadow Key Path:  View的邊框操作
//shadowColor  
//shadowOffset  
//shadowOpacity  
//shadowRadius

duration:動畫的持續(xù)時間  
repeatCount:動畫的重復(fù)次數(shù)  
timingFunction:動畫的時間節(jié)奏控制

timingFunctionName的enum值如下:
 kCAMediaTimingFunctionLinear 勻速 
 kCAMediaTimingFunctionEaseIn 慢進(jìn) 
 kCAMediaTimingFunctionEaseOut 慢出 
 kCAMediaTimingFunctionEaseInEaseOut 慢進(jìn)慢出 
 kCAMediaTimingFunctionDefault 默認(rèn)值(慢進(jìn)慢出)

fillMode:視圖在非Active時的行為
 removedOnCompletion:動畫執(zhí)行完畢后是否從圖層上移除,默認(rèn)為YES(視圖會恢復(fù)到動畫前的狀態(tài)),可設(shè)置為NO(圖層保持動畫執(zhí)行后的狀態(tài),前提是fillMode設(shè)置為kCAFillModeForwards)
  beginTime:動畫延遲執(zhí)行時間(通過CACurrentMediaTime() + your time 設(shè)置)

  • position(移動)
CABasicAnimation *animition = [CABasicAnimation animationWithKeyPath:@"position"];
    animition.toValue = [NSValue valueWithCGPoint:_blueView.center];
    animition.duration = 2.0;
    animition.autoreverses = YES;//執(zhí)行逆動畫
    animition.fillMode = kCAFillModeForwards;
    animition.removedOnCompletion = NO;//動畫執(zhí)行完后是否保持此狀態(tài),當(dāng)為NO時,保持當(dāng)前狀態(tài),前提是fillMode是kCAFillModeForwards
    [_yellowView.layer addAnimation:animition forKey:@"position"];
  • 旋轉(zhuǎn)
CABasicAnimation *animition = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
    animition.fromValue = [NSNumber numberWithFloat:0];
    animition.toValue = [NSNumber numberWithFloat:M_PI/2];
    animition.repeatCount = 1;
    animition.duration = 2.0;
    animition.autoreverses = YES;
    animition.fillMode = kCAFillModeForwards;
    animition.removedOnCompletion = NO;
    [_yellowView.layer addAnimation:animition forKey:@"rotation"];
  • 縮放
CABasicAnimation *animition = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animition.fromValue = [NSNumber numberWithFloat:1.0];
    animition.toValue = [NSNumber numberWithFloat:2.0];
    animition.duration = 2.0;
    animition.autoreverses = YES;
    animition.fillMode = kCAFillModeForwards;
    animition.removedOnCompletion = NO;
    [_yellowView.layer addAnimation:animition forKey:@"scale"];
  • 透明度
 CABasicAnimation *animition = [CABasicAnimation animationWithKeyPath:@"opacity"];           
 animition.fromValue= [NSNumbernumberWithFloat:1.0f];
 animition.toValue= [NSNumbernumberWithFloat:0.2f];
 [_yellowView.layer addAnimation:animaforKey:@"opacityAniamtion"];
  • 背景色的改變
CABasicAnimation *animition = [CABasicAnimation animationWithKeyPath:@"background"];
animition.toValue=(id) [UIColorgreenColor].CGColor;
[_yellowView.layer addAnimation:animaforKey:@"backgroundAnimation"];

CAKeyframeAnimation的重要屬性:

values:關(guān)鍵幀數(shù)組對象,里面每一個元素即為一個關(guān)鍵幀,動畫會在對應(yīng)的時間段內(nèi),依次執(zhí)行數(shù)組中每一個關(guān)鍵幀的動畫。
  path:動畫路徑對象,可以指定一個路徑,在執(zhí)行動畫時路徑會沿著路徑移動,Path在動畫中只會影響視圖的Position。
  keyTimes:設(shè)置關(guān)鍵幀對應(yīng)的時間點,范圍:0-1。如果沒有設(shè)置該屬性,則每一幀的時間平分

  • 設(shè)置value沿固定路線運動
//關(guān)鍵幀動畫
    CAKeyframeAnimation *keyAni = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    keyAni.duration = 4.0;
    keyAni.removedOnCompletion = NO;
    keyAni.fillMode = kCAFillModeForwards;
    keyAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];//慢出
    NSValue * value1 = [NSValue valueWithCGPoint:CGPointMake(150, 200)];
    NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(250, 200)];
    NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(250, 300)];
    NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(150, 300)];
    NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(150, 200)];
    keyAni.values = @[value1, value2, value3, value4, value5];
    [_blueView.layer addAnimation:keyAni forKey:@"keyAnimition"];
  • 設(shè)置path沿固定路線運動
CAKeyframeAnimation * ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(130, 200, 100, 100));
    ani.path = path;
    CGPathRelease(path);
    ani.duration = 4.0;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    [_blueView.layer addAnimation:ani forKey:@"KeyAnimition"];

CATransition

CAKeyframeAnimation的重要屬性:
type:過渡動畫的類型

type的enum值如下:
 kCATransitionFade 漸變
 kCATransitionMoveIn 覆蓋
 kCATransitionPush 推出 
 kCATransitionReveal 揭開

還有一些私有動畫類型,效果很炫酷,不過不推薦使用。  私有動畫類型的值有:"cube(旋轉(zhuǎn)魔方)"、"suckEffect(類似于抽紙的效果)"、"oglFlip(翻轉(zhuǎn))"、 "rippleEffect"、"pageCurl(翻頁)"、"pageUnCurl(倒翻頁)"等等。

subtype: 過渡動畫的方向

subtype的enum值如下: 
kCATransitionFromRight 從右邊 
kCATransitionFromLeft 從左邊 
kCATransitionFromTop 從頂部 
kCATransitionFromBottom 從底部

以漸變?yōu)槔?/p>

CATransition *trans = [CATransition animation];
    trans.type =  kCATransitionFade;//漸變
    trans.subtype =   kCATransitionFromLeft;//從左邊
    trans.duration = 1.5;
    _blueView.backgroundColor = [UIColor cyanColor];
    [_blueView.layer addAnimation:trans forKey:@"transition"];

私有方法的調(diào)用(翻頁的效果)

CATransition *trans = [CATransition animation];
    trans.type =  kCATransitionFade;//推開
    [trans setType:@"pageCurl"];
    trans.subtype =   kCATransitionFromLeft;//從上面
    trans.duration = 1.5;
    _blueView.backgroundColor = [UIColor cyanColor];
    [_blueView.layer addAnimation:trans forKey:@"transition"];

CASpringAnimation

CASpringAnimation是iOS9新加入動畫類型,是CABasicAnimation的子類,用于實現(xiàn)彈簧動畫。

CASpringAnimation的重要屬性:
  mass:質(zhì)量(影響彈簧的慣性,質(zhì)量越大,彈簧慣性越大,運動的幅度越大)
  stiffness:彈性系數(shù)(彈性系數(shù)越大,彈簧的運動越快)
  damping:阻尼系數(shù)(阻尼系數(shù)越大,彈簧的停止越快)
  initialVelocity:初始速率(彈簧動畫的初始速度大小,彈簧運動的初始方向與初始速率的正負(fù)一致,若初始速率為0,表示忽略該屬性)
  settlingDuration:結(jié)算時間(根據(jù)動畫參數(shù)估算彈簧開始運動到停止的時間,動畫設(shè)置的時間最好根據(jù)此時間來設(shè)置)

CASpringAnimation和UIView的SpringAnimation對比:
  1.CASpringAnimation 可以設(shè)置更多影響彈簧動畫效果的屬性,可以實現(xiàn)更復(fù)雜的彈簧動畫效果,且可以和其他動畫組合。
  2.UIView的SpringAnimation實際上就是通過CASpringAnimation來實現(xiàn)。

方法的實現(xiàn):

CASpringAnimation *spring = [CASpringAnimation animationWithKeyPath:@"bounds"];
    spring.mass = 10.0; //質(zhì)量,影響圖層運動時的彈簧慣性,質(zhì)量越大,彈簧拉伸和壓縮的幅度越大
    spring.stiffness = 1000; //剛度系數(shù)(勁度系數(shù)/彈性系數(shù)),剛度系數(shù)越大,形變產(chǎn)生的力就越大,運動越快
    spring.damping = 100.0;//阻尼系數(shù),阻止彈簧伸縮的系數(shù),阻尼系數(shù)越大,停止越快
    spring.initialVelocity = 5.f;//初始速率,動畫視圖的初始速度大小;速率為正數(shù)時,速度方向與運動方向一致,速率為負(fù)數(shù)時,速度方向與運動方向相反
    spring.duration = spring.settlingDuration;
    spring.toValue = [NSValue valueWithCGRect:_blueView.bounds];
    spring.removedOnCompletion = NO;
    spring.fillMode = kCAFillModeForwards;
    spring.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [_redView.layer addAnimation:spring forKey:@"boundsAni"];

CAAnimationGroup

使用Group可以將多個動畫合并一起加入到層中,Group中所有動畫并發(fā)執(zhí)行,可以方便地實現(xiàn)需要多種類型動畫的場景。

以實現(xiàn)視圖的position、bounds和opacity改變的組合動畫為例

CABasicAnimation * posAni = [CABasicAnimation animationWithKeyPath:@"position"];
    posAni.toValue = [NSValue valueWithCGPoint:_blueView.center];
    
    CABasicAnimation * opcAni = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opcAni.toValue = [NSNumber numberWithFloat:1.0];
    opcAni.toValue = [NSNumber numberWithFloat:0.7];
    
    CABasicAnimation * bodAni = [CABasicAnimation animationWithKeyPath:@"bounds"];
    bodAni.toValue = [NSValue valueWithCGRect:_yellowView.bounds];
    
    CAAnimationGroup * groupAni = [CAAnimationGroup animation];
    groupAni.animations = @[posAni, opcAni, bodAni];
    groupAni.duration = 1.0;
    groupAni.fillMode = kCAFillModeForwards;
    groupAni.removedOnCompletion = NO;
    groupAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [_yellowView.layer addAnimation:groupAni forKey:@"groupAni"];

原文地址:http://m.itdecent.cn/p/d05d19f70bac

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

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

  • 基本概念 1、什么是核心動畫 Core Animation(核心動畫)是一組功能強(qiáng)大、效果華麗的動畫API,無論在...
    boundlessocean閱讀 560評論 0 6
  • 前記 關(guān)于實現(xiàn)一個iOS動畫,如果簡單的,我們可以直接調(diào)用UIView的代碼塊來實現(xiàn),雖然使用UIView封裝的方...
    半笑半醉間閱讀 1,333評論 1 39
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,698評論 6 30
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫,核心動畫,幀動畫,自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,335評論 1 23
  • 一、簡介 Core Animation,中文翻譯為核心動畫,它是一組非常強(qiáng)大的動畫處理API,使用它能做出非常炫麗...
    莦婼姑娘閱讀 1,065評論 0 4

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