IOSAnimationDemo

weixin_34054866發表於2017-05-11
iOS

一、簡介

IOS 動畫主要是指Core Animation框架。
官方使用文件地址為：https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html

Core Animation是IOS和OS X平臺上負責圖形渲染與動畫的基礎框架。Core Animation可以作用與動畫檢視或者其他可視元素，為你完成了動畫所需的大部分繪幀工作。你只需要配置少量的動畫引數（如開始點的位置和結束點的位置）即可使用Core Animation的動畫效果。Core Animation將大部分實際的繪圖任務交給了圖形硬體來處理，圖形硬體會加速圖形渲染的速度。這種自動化的圖形加速技術讓動畫擁有更高的幀率並且顯示效果更加平滑，不會加重CPU的負擔而影響程式的執行速度。

Github地址：https://github.com/yixiangboy/IOSAnimationDemo

二、Core Animation類圖以及常用欄位 Core Animation類的繼承關係圖

2460271-c4bc2db56f4a5df0.png
687474703a2f2f696d672e6d792e6373646e2e6e65742f75706c6f6164732f3230313530372f32332f313433373631373536325f333139302e706e67.png

常用屬性
1.duration : 動畫的持續時間
2.beginTime : 動畫的開始時間
3.repeatCount : 動畫的重複次數
4.autoreverses : 執行的動畫按照原動畫返回執行
5.timingFunction : 控制動畫的顯示節奏系統提供五種值選擇，分別是：

kCAMediaTimingFunctionLinear 線性動畫
kCAMediaTimingFunctionEaseIn 先慢後快（慢進快出）
kCAMediaTimingFunctionEaseOut 先塊後慢（快進慢出）
kCAMediaTimingFunctionEaseInEaseOut 先慢後快再慢
kCAMediaTimingFunctionDefault 預設，也屬於中間比較快

6.delegate ： 動畫代理。能夠檢測動畫的執行和結束。

@interface NSObject (CAAnimationDelegate)
 - (void)animationDidStart:(CAAnimation *)anim;
 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
@end

7.path：關鍵幀動畫中的執行路徑
8.type ： 過渡動畫的動畫型別，系統提供了四種過渡動畫。

kCATransitionFade 漸變效果
kCATransitionMoveIn 進入覆蓋效果
kCATransitionPush 推出效果
kCATransitionReveal 揭露離開效果 subtype : 過渡動畫的動畫方向
kCATransitionFromRight 從右側進入
kCATransitionFromLeft 從左側進入
kCATransitionFromTop 從頂部進入
kCATransitionFromBottom 從底部進入

三、IOS動畫的呼叫方式

第一種：UIView 程式碼塊呼叫

_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
    [UIView animateWithDuration:1.0f animations:^{
        _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
    } completion:^(BOOL finished) {
        _demoView.frame = CGRectMake(SCREEN_WIDTH/2-25, SCREEN_HEIGHT/2-50, 50, 50);
    }];

第二種：UIView [begin commit]模式

_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50); 
[UIView beginAnimations:nil context:nil]; 
[UIView setAnimationDuration:1.0f]; 
_demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50); 
[UIView commitAnimations];

第三種：使用Core Animation中的類

    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
    anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
    anima.duration = 1.0f;
    [_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

四、IOS動畫的使用

4.1：基礎動畫（CABaseAnimation）

重要屬性
1.fromValue ： keyPath對應的初始值
2.toValue ： keyPath對應的結束值基礎動畫主要提供了對於CALayer物件中的可變屬性進行簡單動畫的操作。比如：位移、透明度、縮放、旋轉、背景色等

2460271-1980be63eb6ccffe.gif
687474703a2f2f696d672e6d792e6373646e2e6e65742f75706c6f6164732f3230313530372f32332f313433373633333230355f373039382e676966.gif
//使用CABasicAnimation建立基礎動畫
    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
    anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
    anima.duration = 1.0f;
    //anima.fillMode = kCAFillModeForwards;
    //anima.removedOnCompletion = NO;
    [_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

注意點：
如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那麼在動畫執行完畢後，圖層會保持顯示動畫執行後的狀態。但在實質上，圖層的屬性值還是動畫執行前的初始值，並沒有真正被改變。

4.2：關鍵幀動畫（CAKeyframeAnimation）

CAKeyframeAnimation和CABaseAnimation都屬於CAPropertyAnimatin的子類。CABaseAnimation只能從一個數值（fromValue）變換成另一個數值（toValue）,而CAKeyframeAnimation則會使用一個NSArray儲存一組關鍵幀。
重要屬性
values ： 就是上述的NSArray物件。裡面的元素稱為”關鍵幀”(keyframe)。動畫物件會在指定的時間(duration)內，依次顯示values陣列中的每一個關鍵幀
path ： 可以設定一個CGPathRef\CGMutablePathRef,讓層跟著路徑移動。path只對CALayer的anchorPoint和position起作用。如果你設定了path，那麼values將被忽略。
keyTimes ： 可以為對應的關鍵幀指定對應的時間點,其取值範圍為0到1.0,keyTimes中的每一個時間值都對應values中的每一幀.當keyTimes沒有設定的時候,各個關鍵幀的時間是平分的。

2460271-e2fc1e000bded71f.gif
687474703a2f2f696d672e6d792e6373646e2e6e65742f75706c6f6164732f3230313530372f32332f313433373633333230365f313433362e676966.gif
CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH/2-100, SCREEN_HEIGHT/2-100, 200, 200)];
    anima.path = path.CGPath;
    anima.duration = 2.0f;
    [_demoView.layer addAnimation:anima forKey:@"pathAnimation"];

說明：CABasicAnimation可看做是最多隻有2個關鍵幀的CAKeyframeAnimation

4.3：組動畫（CAAnimationGroup）

CAAnimation的子類，可以儲存一組動畫物件，將CAAnimationGroup物件加入層後，組中所有動畫物件可以同時併發執行。重要屬性 animations : 用來儲存一組動畫物件的NSArray 效果演示：

2460271-f1442b60aa4989fa.gif
687474703a2f2f696d672e6d792e6373646e2e6e65742f75706c6f6164732f3230313530372f32332f313433373633333230365f353733302e676966.gif
CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
    anima1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];
    
    //縮放動畫
    CABasicAnimation *anima2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    anima2.fromValue = [NSNumber numberWithFloat:0.8f];
    anima2.toValue = [NSNumber numberWithFloat:2.0f];
    
    //旋轉動畫
    CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    anima3.toValue = [NSNumber numberWithFloat:M_PI*4];
    
    //組動畫
    CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
    groupAnimation.animations = [NSArray arrayWithObjects:anima1,anima2,anima3, nil];
    groupAnimation.duration = 4.0f;
    
    [_demoView.layer addAnimation:groupAnimation forKey:@"groupAnimation"];

4.4：過渡動畫（CATransition）

2460271-f4d16f99502d3fb5.gif
687474703a2f2f696d672e6d792e6373646e2e6e65742f75706c6f6164732f3230313530372f32332f313433373633333233315f323731362e676966.gif

CAAnimation的子類，用於做過渡動畫或者轉場動畫，能夠為層提供移出螢幕和移入螢幕的動畫效果。
重要屬性
1.type：動畫過渡型別
Apple 官方的SDK其實只提供了四種過渡效果。

kCATransitionFade 漸變效果
kCATransitionMoveIn 進入覆蓋效果
kCATransitionPush 推出效果
kCATransitionReveal 揭露離開效果

私有API提供了其他很多非常炫的過渡動畫，比如@"cube"、@"suckEffect"、@"oglFlip"、 @"rippleEffect"、@"pageCurl"、@"pageUnCurl"、@"cameraIrisHollowOpen"、@"cameraIrisHollowClose"等。 注意點 私有api，不建議開發者們使用。因為蘋果公司不提供維護，並且有可能造成你的app稽核不通過。
2.subtype：動畫過渡方向

kCATransitionFromRight 從右側進入
kCATransitionFromLeft 從左側進入
kCATransitionFromTop 從頂部進入
kCATransitionFromBottom 從底部進入

3.startProgress：動畫起點(在整體動畫的百分比)
4.endProgress：動畫終點(在整體動畫的百分比)

4.5：綜合案例

4.5.1 ： 仿Path選單效果 效果演示：

2460271-ce753b926053b39c.gif
687474703a2f2f696d672e6d792e6373646e2e6e65742f75706c6f6164732f3230313530372f32332f313433373633353837375f353738382e676966.gif

動畫解析：
1、點選紅色按鈕，紅色按鈕旋轉。（旋轉動畫）
2、黑色小按鈕依次彈出，並且帶有旋轉效果。（位移動畫、旋轉動畫、組動畫）
3、點選黑色小按鈕，其他按鈕消失，被點選的黑色按鈕變大變淡消失。（縮放動畫、alpha動畫、組動畫）

4.5.2： 仿釘釘選單效果 效果演示： 仿釘釘選單效果 看上去挺炫的，其實實現很簡單，就是位移動畫+縮放動畫。

2460271-96b6a4232cbb53b5.gif
687474703a2f2f696d672e6d792e6373646e2e6e65742f75706c6f6164732f3230313530372f32332f313433373633333230355f373236362e676966.gif

4.5.3： 點贊煙花效果動畫

效果演示： 點贊煙花效果動畫

2460271-17708e44f8aa2bec.gif
687474703a2f2f696d672e6d792e6373646e2e6e65742f75706c6f6164732f3230313530372f32332f313433373633333230355f323531372e676966.gif

這裡其實只有按鈕變大效果使用的縮放動畫。
煙花效果 使用的是一種比較特殊的動畫--粒子動畫。 一個粒子系統一般有兩部分組成：
1、CAEmitterCell：可以看作是單個粒子的原型（例如，一個單一的粉撲在一團煙霧）。當散發出一個粒子，UIKit根據這個發射粒子和定義的基礎上建立一個隨機粒子。此原型包括一些屬性來控制粒子的圖片，顏色，方向，運動，縮放比例和生命週期。
2、CAEmitterLayer：主要控制發射源的位置、尺寸、發射模式、發射源的形狀等等。 以上兩個類的屬性還是比較多的，這裡就不細講了。大家可以google一下，詳細的瞭解吧。