iOS 核心動畫 (Core Animation)

基本概念

1、什么是核心動畫

Core Animation(核心動畫)是一組功能強大、效果華麗的動畫API,無論在iOS系統(tǒng)或者在你開發(fā)的App中,都有大量應(yīng)用。

2、核心動畫作用范圍##

核心動畫作用在CALayer(Core animation layer)上,CALayer從概念上類似UIView,我們可以將UIView看成是一種特殊的CALayer(可以響應(yīng)事件)。

3、核心動畫對比UIView動畫###

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

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

4、核心動畫結(jié)構(gòu)層次

11.png
22.png

5、核心動畫類中可以直接使用的類有:

CABasicAnimation
CAKeyframeAnimation
CATransition
CAAnimationGroup
CASpringAnimation

6、這5個類使用簡介

CABasicAnimation和CAKeyframeAnimation屬于CAPropertyAnimation的子類
他們的初始化方法:

+ (instancetype)animation;
+ (instancetype)animationWithKeyPath:(nullable NSString *)path;

duration:動畫的持續(xù)時間
repeatCount:動畫的重復(fù)次數(shù)
fillMode:視圖在非Active時的行為
beginTime:動畫延遲執(zhí)行時間(通過CACurrentMediaTime() + your time 設(shè)置)
delegate:代理
timingFunction:動畫的時間節(jié)奏控制

kCAMediaTimingFunctionLinear 勻速
kCAMediaTimingFunctionEaseIn 慢進
kCAMediaTimingFunctionEaseOut 慢出
kCAMediaTimingFunctionEaseInEaseOut 慢進慢出
kCAMediaTimingFunctionDefault 默認值(慢進慢出)

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

//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
origin.x
origin.y

//size
size.width
size.height

//opacity
backgroundColor
cornerRadius 
borderWidth
contents 

//Shadow Key Path:
shadowColor 
shadowOffset 
shadowOpacity 
shadowRadius

6.1CABasicAnimation

CABasicAnimation可以設(shè)定keyPath的起點,終點的值,動畫會沿著設(shè)定點進行移動,CABasicAnimation可以看成是只有兩個關(guān)鍵點的特殊的CAKeyFrameAnimation。

- (void)position {
    CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"position"];
    ani.toValue = [NSValue valueWithCGPoint:self.centerShow.center];
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.cartCenter.layer addAnimation:ani forKey:@"PostionAni"];
}

6.2 CAKeyframeAnimation

UIView的關(guān)鍵幀動畫就是在CAKeyframeAnimation上封裝得來的
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è)置該屬性,則每一幀的時間平分。

1、value動畫
- (void)valueKeyframeAni {
    CAKeyframeAnimation * ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    ani.duration = 4.0;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    ani.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)];
    ani.values = @[value1, value2, value3, value4, value5];
    [self.centerShow.layer addAnimation:ani forKey:@"PostionKeyframeValueAni"];
}

----------------------------------
2、path動畫
- (void)pathKeyframeAni {
    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;
    [self.centerShow.layer addAnimation:ani forKey:@"PostionKeyframePathAni"];
}

6.3 CASpringAnimation

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

CASpringAnimation和UIView的SpringAnimation對比:

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

CASpringAnimation的重要屬性:

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

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

6.4 CAAnimationGroup

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

- (void)groupAni {
    CABasicAnimation * posAni = [CABasicAnimation animationWithKeyPath:@"position"];
    posAni.toValue = [NSValue valueWithCGPoint:self.centerShow.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:self.centerShow.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];
    [self.cartCenter.layer addAnimation:groupAni forKey:@"groupAni"];
}

6.5 CATransition

    轉(zhuǎn)場動畫,比UIVIew轉(zhuǎn)場動畫具有更多的動畫效果,比如Nav的默認Push視圖的效果就是通過CATransition的kCATransitionPush類型來實現(xiàn)。

CATransition 屬性
type:過渡動畫的類型

NSString * const kCATransitionFade;//漸變
NSString * const kCATransitionMoveIn;//移入
NSString * const kCATransitionPush;//平移(暫且這么稱呼吧)
NSString * const kCATransitionReveal;//顯露

私有API
@"cube"http://立方體  
@"suckEffect"http:// 吸走的效果  
@"oglFlip"http://前后翻轉(zhuǎn)效果
@"rippleEffect"http://110波紋效果  
@"pageCurl"http://101翻頁起來  
@"pageUnCurl"http://102翻頁下來  
@"cameraIrisHollowOpen "http://107//鏡頭開 
@"cameraIrisHollowClose "http://106鏡頭關(guān)  

subtype: 過渡動畫的方向

NSString * const kCATransitionFromRight;
NSString * const kCATransitionFromLeft;
NSString * const kCATransitionFromTop;
NSString * const kCATransitionFromBottom;

示例

- (void)transitionAni {
    CATransition * ani = [CATransition animation];
    ani.type = kCATransitionFade;
    ani.subtype = kCATransitionFromLeft;
    ani.duration = 1.5;
    self.centerShow.image = [UIImage imageNamed:@"Raffle"];
    [self.centerShow.layer addAnimation:ani forKey:@"transitionAni"];
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容