iOS 動畫相關知識

Core Animation，它是一組很是強大的動畫處理API，使用它能作出很是炫麗的動畫效果，並且每每是事半功倍。在後臺移動圖層中的內容,  執行完畢後圖層自己的位置並無發生變化，全部的動畫都繼承自CAAnimation。iOS開發中實現動畫的方式也不僅是核心動畫一種，也有UIView的幾種動畫。

1、核心動畫

       Core Animation的動畫執行過程都是在後臺操做的，不會阻塞主線程。要注意的是，Core Animation是直接做用在CALayer上的，並不是UIView。因此，CALayer是核心動畫的基礎。

       建立動畫的流程通常爲：

              一、建立動畫對象；二、設置動畫屬性；三、把動畫對象添加到某個CALayer 對象上；四、須要中止動畫：能夠調用 remove 方法移除動畫。

       動畫類型有：

             一、 屬性動畫：設定某個屬性的值，能夠實現屬性動畫。二、基本動畫（CABasicAnimation）：設定某個屬性從某個值到某個值，實現基本動畫。

             三、關鍵幀動畫（CAKeyframeAnimation）：設定某個屬性的值從某個值到某個值，再到某個值。按照關鍵值改變的順序，實現動畫。

             四、 組動畫（CAAnimationGroup）：把全部其餘的動畫添加到組裏面，這樣就能夠按照添加的動畫一次執行。

             五、 轉場動畫（CATransition）：從一個場景轉換到另外一個場景，系統已經實現好了，不須要咱們再去寫，按照需求直接調用。

   一、CAAnimation

        全部動畫對象的父類，負責控制動畫的持續時間和速度，是個抽象類，不能直接使用，應該使用它具體的子類。

        屬性有：一、duration（動畫的持續時間，默認是0.25s） 二、repeatCount（動畫重複次數） 三、repeatDuration（動畫重複時間） 四、removedOnCompletion（默認爲YES，表明動畫執行完畢後就從圖層上移除，圖形會恢復到動畫執行前的狀態。） 五、fillMode（決定當前對象在非active時間段的行爲.好比動畫開始以前,動畫結束以後）六、beginTime（能夠用來設置動畫延遲執行時間）七、timingFunction（速度控制函數，控制動畫運行的節奏）

       它還有一個隱式代理delegate，能夠監聽動畫開始   -(void)animationDidStart:(CAAnimation *)anim ，監聽動畫結束   - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

  二、CAPropertyAnimation（CAAnimation的子類）

       它自己也是一個抽象類，要想建立動畫對象，應該使用它的兩個子類：CABasicAnimation和CAKeyframeAnimation。

        重要屬性keyPath：將CALayer的一個屬性名稱做爲keyPath(NSString類型)，而且對CALayer的這個屬性的值進行修改，達到相應的動畫效果。好比，指定@」position」爲keyPath，就修改CALayer的position屬性的值，以達到平移的動畫效果。

      1、CABasicAnimation 基本動畫

             有fromValue和toValue兩個重要屬性，隨着動畫的進行，在長度爲duration的持續時間內，keyPath相應屬性的值從fromValue漸漸地變爲toValue，若是fillMode=kCAFillModeForwards和removedOnComletion=NO，那麼在動畫執行完畢後，圖層會保持顯示動畫執行後的狀態。但在實質上，圖層的屬性值仍是動畫執行前的初始值，並無真正被改變。好比，CALayer的position初始值爲(0,0)，CABasicAnimation的fromValue爲(10,10)，toValue爲(100,100)，雖然動畫執行完畢後圖層保持在(100,100)這個位置，實質上圖層的position仍是爲(0,0)。

             例子：一、按路徑移動（基本動畫）

                           1、先建立動畫對象，設置keypath  CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];意思是沿着x軸平移

                           2、設置起始值和到達值 animation.fromValue= @(150);  animation.toValue = @(-150);  animation.duration=1;

                           3、添加到layer  [self.button.layer addAnimation:animation forKey:nil];

                       二、旋轉（基本動畫）

                          1、先建立動畫對象 設置keypath CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];意思是沿着y軸旋轉

                          2、設置屬性值  NSNumber * num = @(M_PI*2); animation.toValue=num; animation.removedOnCompletion=NO;animation.fillMode=kCAFillModeForwards;

                                 animation.duration=3;animation.repeatCount=CGFLOAT_MAX;

                          3、添加到layer [self.button.layer addAnimation:animation forKey:nil];

        2、CAKeyframeAnimation 關鍵幀動畫

              關鍵幀動畫是多個值之間的變化實現動畫的，有 values屬性：關鍵幀數組，動畫對象會在指定的時間(duration)內，依次顯示values數組中的每個關鍵幀；path：能夠設置一個CGPathRef\CGMutablePathRef,讓層跟着路徑移動。path只對CALayer的anchorPoint和position起做用。若是你設置了path，那麼values將被忽略；keyTimeshare：能夠爲對應的關鍵幀指定對應的時間點,其取值範圍爲0到1.0,keyTimes中的每個時間值都對應values中的每一幀.當keyTimes沒有設置的時候,各個關鍵幀的時間是平分的。

            例子：一、按方形路徑移動

                       1、建立動畫對象，設置keypath CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

                       2、設置values，NSValue * v1 = [NSValue valueWithCGPoint:CGPointMake(100, 200)];  NSValue * v2 = [NSValue valueWithCGPoint:CGPointMake(100, 400)];

                              NSValue * v2 = [NSValue valueWithCGPoint:CGPointMake(300, 400)];  NSValue * v2 = [NSValue valueWithCGPoint:CGPointMake(300, 200)];

                              NSValue * v2 = [NSValue valueWithCGPoint:CGPointMake(100, 200)];

                             animation.values=@[v1,v2,v3,v4,v5];

                             animation.duration=2;

                             animation.repeatCount=CGFLOAT_MAX;

                             animation.removedOnCompletion=NO;

                     3、添加到layer  [self.button.layer addAnimation:animation forKey:nil];

                      二、size變化

                            1、建立動畫對象 CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"bounds.size"];

                            2、設置values NSValue * v0 = [NSValue valueWithCGSize:CGSizeMake(100, 100)]; NSValue * v1 = [NSValue valueWithCGSize:CGSizeMake(200, 200)];

                                   NSValue *v2 = [NSValue valueWithCGSize:CGSizeMake(100,100)];

                                   animation.values=@[v0,v1,v2];animation.duration=0.5;animation.repeatCount=CGFLOAT_MAX；

                                   animation.removedOnCompletion=NO; animation.fillMode=kCAFillModeForwards;

                            3、添加layer  [self.button.layer addAnimation:animation forKey:nil];

       基本動畫和關鍵幀動畫的區別在於CABasicAnimation只能從一個數值(fromValue)變到另外一個數值(toValue)，而CAKeyframeAnimation會使用一個NSArray保存這些數值。CABasicAnimation可看作是最多隻有2個關鍵幀的CAKeyframeAnimation。

      3、CAAnimationGroup 組動畫

            能夠保存一組動畫對象，將CAAnimationGroup對象加入層後，組中全部動畫對象能夠同時併發運行。有屬性animations：用來保存一組動畫對象的NSArray，默認狀況下一組動畫對象是同時運行的，也能夠經過設置動畫對象的beginTime屬性來更改動畫開始的時間

            例子：移動動畫+抖動動畫

                       1、建立動畫對象

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

                       2、設置屬性，如上面的按方形移動

                       3、建立抖動動畫對象，keypath爲rotation.z

                       4、設置抖動動畫對象的屬性

                       5、建立組動畫 CAAnimationGroup * animation = [CAAnimationGroup animation];  animation.animations=@[animation1,animation2];

                       6、將組動畫添加到layer [self.button.layer addAnimation:animation forKey:nil];

        4、CATransition 轉場動畫

               用於作頁面跳轉時的轉場動畫，可以爲層提供移出屏幕和移入屏幕的效果，這些動畫的效果系統已經寫好，咱們只要配置一些屬性便可。

               屬性解析：一、type：動畫過渡類型；二、subtype：動畫過渡方向；三、startProgress：動畫起點（在總體動畫的百分比）；四、endProgress：動畫終點（在總體動畫的百分比）

            例子：背景是界面上有一個UIImageview，添加了左滑和右滑手勢，左右滑動實現UIImageview內容變化

                     一、使用CATransition實現轉場（漸變消失）

                          1、建立動畫  CATransition * animation = [CATransition animation];  

                          2、屬性設置  animation.type = kCATransitionFade;（前一張消失）

                          3、添加到layer  [self.imageView.layer addAnimation:animation forKey:nil];

                     二、使用UIView（block）實現轉場（向左拖：左右旋轉+ 向右拖：上下翻頁）

                          //若是向左滑動，向左旋轉顯示

        if (rec.direction==UISwipeGestureRecognizerDirectionLeft) {
            
            [UIView transitionWithView:self.imageView duration:1 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
                
               //block裏面是控件的屬性變化，這裏和CATransition實現不一樣
                UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld",self.index]];
                self.imageView.image=image;
                
                
            } completion:nil];
        }
        
        //若是向右滑動，子頁面向下推出
        else{
            [UIView transitionWithView:self.imageView duration:1 options:UIViewAnimationOptionTransitionCurlUp animations:^{
                
                UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld",self.index]];
                self.imageView.image=image;
                
            } completion:nil];
            
        }
    }

         三、使用CATransition實現轉場（向左滑：向左退出 + 向右滑：向下推出）

        CATransition * animation = [CATransition animation];

        //若是向右滑動，子頁面從左推出
        if (rec.direction == UISwipeGestureRecognizerDirectionRight) {
            animation.subtype = kCATransitionFromBottom;
            
        }
        //若是向右滑動，子頁面從下推出
        
        else{
            animation.subtype = kCATransitionFromRight;
            
        }
        
        animation.type = kCATransitionPush;
        
        [self.imageView.layer addAnimation:animation forKey:nil];

      5、UIView block動畫———（也可實現轉場動畫）

             UIKit框架直接將動畫集成到UIView類中，當內部的一些屬性發生改變時，UIView將爲這些改變提供動畫支持。將改變視圖屬性的代碼寫在block中，實現動畫。有三種方式：

            一、+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion 其中，delay：動畫延遲delay秒後開始，options：動畫的節奏控制

            二、+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion 其中，view是須要進行轉場動畫的視圖

            三、+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion  這個方法調用後至關於添加toview到父視圖 [fromView.superview addSubview:toView]; ，把fromView從父視圖中移除[fromView.superview removeFromSuperview];

     6、UIView  首尾式動畫

            這是UIView的另外一種實現動畫方式。執行動畫所須要的工做由UIView類自動完成，但仍要在但願執行動畫時通知視圖，爲此須要將改變屬性的代碼放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之間，俗稱首尾式動畫。常見的方法有：

           一、設置動畫代理對象，當動畫開始或者結束時會發消息給代理對象  + (void)setAnimationDelegate:(id)delegate

           二、當動畫即將開始時，執行delegate對象的selector，而且把beginAnimations:context:中傳入的參數傳進selector   + (void)setAnimationWillStartSelector:(SEL)selector

           三、當動畫結束時，執行delegate對象的selector，而且把beginAnimations:context:中傳入的參數傳進selector   + (void)setAnimationDidStopSelector:(SEL)selector

           四、動畫的持續時間，秒爲單位  + (void)setAnimationDuration:(NSTimeInterval)duration

           五、動畫延遲delay秒後再開始  + (void)setAnimationDelay:(NSTimeInterval)delay

           六、動畫的開始時間，默認爲now   + (void)setAnimationStartDate:(NSDate *)startDate

           七、動畫的節奏控制  + (void)setAnimationCurve:(UIViewAnimationCurve)curve

           八、動畫的重複次數 + (void)setAnimationRepeatCount:(float)repeatCount

           九、若是設置爲YES,表明動畫每次重複執行的效果會跟上一次相反  + (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses

          十、設置視圖view的過渡效果, transition指定過渡類型, cache設置YES表明使用視圖緩存，性能較好   + (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache

     7、UIImageView的幀動畫

             UIImageView可讓一系列的圖片在特定的時間內按順序顯示。

            屬性解析：

             一、animationImages：要顯示的圖片(一個裝着UIImage的NSArray)

             二、animationDuration：完整地顯示一次animationImages中的全部圖片所需的時間

             三、animationRepeatCount：動畫的執行次數(默認爲0，表明無限循環)

       8、UIActivityIndicatorView 轉輪動畫

             是一個旋轉進度輪，能夠用來告知用戶有一個操做正在進行中，通常用initWithActivityIndicatorStyle初始化（以前的文章有作介紹）。