http://www.jianshu.com/p/5abc038e4d94

iOS的動畫效果一直都很棒很，給人的感覺就是很炫酷很流暢，起到增強使用者體驗的作用。在APP開發中實現動畫效果有很多種方式，對於簡單的應用場景，我們可以使用UIKit提供的動畫來實現。

UIView動畫簡介

UIView動畫實質上是對Core Animation的封裝，提供簡潔的動畫介面。

UIView動畫可以設定的動畫屬性有:
1、大小變化(frame)
2、拉伸變化(bounds)
3、中心位置(center)
4、旋轉(transform)
5、透明度(alpha)
6、背景顏色(backgroundColor)
7、拉伸內容(contentStretch)

UIview 類方法動畫

1）動畫的開始和結束方法

1.1 動畫開始標記

[UIView beginAnimations:(nullable NSString *) context:(nullable void *)];

第一個引數：動畫標識
第二個引數：附加引數，在設定了代理的情況下，此引數將傳送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法。大部分情況下，我們設定為nil即可。

1.2 結束動畫標記

    [UIView commitAnimations];

2）動畫引數的設定方法

    //動畫持續時間
    [UIView
 
 setAnimationDuration:(NSTimeInterval)];

    //動畫的代理物件
    [UIView setAnimationDelegate:(nullable id)];

    //設定動畫將開始時代理物件執行的SEL
    [UIView setAnimationWillStartSelector:(nullable SEL)];

    //設定動畫結束時代理物件執行的SEL
    [UIView setAnimationDidStopSelector:(nullable SEL)];

    //設定動畫延遲執行的時間
    [UIView setAnimationDelay:(NSTimeInterval
 
)];

    //設定動畫的重複次數
    [UIView setAnimationRepeatCount:(float)];

    //設定動畫的曲線
    [UIView setAnimationCurve:(UIViewAnimationCurve)];
    UIViewAnimationCurve的列舉值如下：
    UIViewAnimationCurveEaseInOut,         // 慢進慢出（預設值）
    UIViewAnimationCurveEaseIn,            // 慢進
    UIViewAnimationCurveEaseOut,           // 慢出
    UIViewAnimationCurveLinear             // 勻速

    //設定是否從當前狀態開始播放動畫
    [UIView setAnimationBeginsFromCurrentState:YES];
    假設上一個動畫正在播放，且尚未播放完畢，我們將要進行一個新的動畫：
    當為YES時：動畫將從上一個動畫所在的狀態開始播放
    當為NO時：動畫將從上一個動畫所指定的最終狀態開始播放（此時上一個動畫馬上結束）

    //設定動畫是否繼續執行相反的動畫
    [UIView setAnimationRepeatAutoreverses:(BOOL)];

    //是否禁用動畫效果（物件屬性依然會被改變，只是沒有動畫效果）
    [UIView setAnimationsEnabled:(BOOL)];

    //設定檢視的過渡效果
    [UIView setAnimationTransition:(UIViewAnimationTransition) forView:(nonnull UIView *) cache:(BOOL)];
     第一個引數：UIViewAnimationTransition的列舉值如下
         UIViewAnimationTransitionNone,              //不使用動畫
         UIViewAnimationTransitionFlipFromLeft,      //從左向右旋轉翻頁
         UIViewAnimationTransitionFlipFromRight,     //從右向左旋轉翻頁
         UIViewAnimationTransitionCurlUp,            //從下往上捲曲翻頁
         UIViewAnimationTransitionCurlDown,          //從上往下捲曲翻頁
     第二個引數：需要過渡效果的View
     第三個引數：是否使用檢視快取，YES：檢視在開始和結束時渲染一次；NO：檢視在每一幀都渲染

3）例項程式碼：

1、屬性變化動畫（以frame變化為例）

- (void)changeFrame {
    [UIView beginAnimations:@"FrameAni" context:nil];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationWillStartSelector:@selector(startAni:)];
    [UIView setAnimationDidStopSelector:@selector(stopAni:)];
    [UIView setAnimationRepeatCount:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    self.cartCenter.frame = self.centerShow.frame;
    [UIView commitAnimations];
}

- (void)startAni:(NSString *)aniID {
    NSLog(@"%@ start",aniID);
}

- (void)stopAni:(NSString *)aniID {
    NSLog(@"%@ stop",aniID);
}

動畫效果：

NormalAni.gif

2、轉場效果動畫（以Flip效果為例）

- (void)flipAni {
    [UIView beginAnimations:@"FlipAni" context:nil];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationWillStartSelector:@selector(startAni:)];
    [UIView setAnimationDidStopSelector:@selector(stopAni:)];
    [UIView setAnimationRepeatCount:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.centerShow cache:YES];
    self.centerShow.image = [UIImage imageNamed:@"service"];
    [UIView commitAnimations];
}

動畫效果：

ScreenTransitionAni.gif

UIview Block動畫

iOS4.0以後，增加了Block動畫塊，提供更簡潔的方式來實現動畫。

1）Block動畫方法

1、最簡潔的Block動畫：包含時間和動畫

 [UIView animateWithDuration:(NSTimeInterval)  //動畫持續時間
                  animations:^{
                  //執行的動畫
 }];

2、帶有動畫完成回撥的Block動畫

 [UIView animateWithDuration:(NSTimeInterval)  //動畫持續時間
                  animations:^{
                //執行的動畫
 }                completion:^(BOOL finished) {
                //動畫執行完畢後的操作
 }];

3、可設定延遲時間和過渡效果的Block動畫

 [UIView animateWithDuration:(NSTimeInterval) //動畫持續時間
                       delay:(NSTimeInterval) //動畫延遲執行的時間
                     options:(UIViewAnimationOptions) //動畫的過渡效果
                  animations:^{
                   //執行的動畫
 }                completion:^(BOOL finished) {
                   //動畫執行完畢後的操作
 }];

UIViewAnimationOptions的列舉值如下，可組合使用：

 UIViewAnimationOptionLayoutSubviews            //進行動畫時佈局子控制元件
 UIViewAnimationOptionAllowUserInteraction      //進行動畫時允許使用者互動
 UIViewAnimationOptionBeginFromCurrentState     //從當前狀態開始動畫
 UIViewAnimationOptionRepeat                    //無限重複執行動畫
 UIViewAnimationOptionAutoreverse               //執行動畫迴路
 UIViewAnimationOptionOverrideInheritedDuration //忽略巢狀動畫的執行時間設定
 UIViewAnimationOptionOverrideInheritedCurve    //忽略巢狀動畫的曲線設定
 UIViewAnimationOptionAllowAnimatedContent      //轉場：進行動畫時重繪檢視
 UIViewAnimationOptionShowHideTransitionViews   //轉場：移除（新增和移除圖層的）動畫效果
 UIViewAnimationOptionOverrideInheritedOptions  //不繼承父動畫設定

 UIViewAnimationOptionCurveEaseInOut            //時間曲線，慢進慢出（預設值）
 UIViewAnimationOptionCurveEaseIn               //時間曲線，慢進
 UIViewAnimationOptionCurveEaseOut              //時間曲線，慢出
 UIViewAnimationOptionCurveLinear               //時間曲線，勻速

 UIViewAnimationOptionTransitionNone            //轉場，不使用動畫
 UIViewAnimationOptionTransitionFlipFromLeft    //轉場，從左向右旋轉翻頁
 UIViewAnimationOptionTransitionFlipFromRight   //轉場，從右向左旋轉翻頁
 UIViewAnimationOptionTransitionCurlUp          //轉場，下往上捲曲翻頁
 UIViewAnimationOptionTransitionCurlDown        //轉場，從上往下捲曲翻頁
 UIViewAnimationOptionTransitionCrossDissolve   //轉場，交叉消失和出現
 UIViewAnimationOptionTransitionFlipFromTop     //轉場，從上向下旋轉翻頁
 UIViewAnimationOptionTransitionFlipFromBottom  //轉場，從下向上旋轉翻頁

4、Spring動畫
iOS7.0後新增Spring動畫（iOS系統動畫大部分採用Spring Animation，適用於所有可被新增動畫效果的屬性）

 [UIView animateWithDuration:(NSTimeInterval)//動畫持續時間
                       delay:(NSTimeInterval)//動畫延遲執行的時間
      usingSpringWithDamping:(CGFloat)//震動效果，範圍0~1，數值越小震動效果越明顯
       initialSpringVelocity:(CGFloat)//初始速度，數值越大初始速度越快
                     options:(UIViewAnimationOptions)//動畫的過渡效果
                  animations:^{
                     //執行的動畫
 }
                  completion:^(BOOL finished) {
                     //動畫執行完畢後的操作
 }];

5、Keyframes動畫
iOS7.0後新增關鍵幀動畫，支援屬性關鍵幀，不支援路徑關鍵幀

 [UIView animateKeyframesWithDuration:(NSTimeInterval)//動畫持續時間
                                delay:(NSTimeInterval)//動畫延遲執行的時間
                              options:(UIViewKeyframeAnimationOptions)//動畫的過渡效果
                           animations:^{
                         //執行的關鍵幀動畫
 }
                           completion:^(BOOL finished) {
                         //動畫執行完畢後的操作
 }];

UIViewKeyframeAnimationOptions的列舉值如下，可組合使用：

UIViewAnimationOptionLayoutSubviews           //進行動畫時佈局子控制元件
UIViewAnimationOptionAllowUserInteraction     //進行動畫時允許使用者互動
UIViewAnimationOptionBeginFromCurrentState    //從當前狀態開始動畫
UIViewAnimationOptionRepeat                   //無限重複執行動畫
UIViewAnimationOptionAutoreverse              //執行動畫迴路
UIViewAnimationOptionOverrideInheritedDuration //忽略巢狀動畫的執行時間設定
UIViewAnimationOptionOverrideInheritedOptions //不繼承父動畫設定

UIViewKeyframeAnimationOptionCalculationModeLinear     //運算模式 :連續
UIViewKeyframeAnimationOptionCalculationModeDiscrete   //運算模式 :離散
UIViewKeyframeAnimationOptionCalculationModePaced      //運算模式 :均勻執行
UIViewKeyframeAnimationOptionCalculationModeCubic      //運算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //運算模式 :平滑均勻

各種運算模式的直觀比較如下圖：

圖片來源網路.png

增加關鍵幀的方法：

 [UIView addKeyframeWithRelativeStartTime:(double)//動畫開始的時間（佔總時間的比例）
                         relativeDuration:(double) //動畫持續時間（佔總時間的比例）
                               animations:^{
                             //執行的動畫
 }];

6、轉場動畫
6.1 從舊檢視轉到新檢視的動畫效果

 [UIView transitionFromView:(nonnull UIView *)
                     toView:(nonnull UIView *)
                   duration:(NSTimeInterval)
                    options:(UIViewAnimationOptions)
                 completion:^(BOOL finished) {
                     //動畫執行完畢後的操作
 }];

在該動畫過程中，fromView 會從父檢視中移除，並講 toView 新增到父檢視中，注意轉場動畫的作用物件是父檢視（過渡效果體現在父檢視上）。
呼叫該方法相當於執行下面兩句程式碼：

[fromView.superview addSubview:toView];
[fromView removeFromSuperview];

6.2 單個檢視的過渡效果

 [UIView transitionWithView:(nonnull UIView *)
                   duration:(NSTimeInterval)
                    options:(UIViewAnimationOptions)
                 animations:^{
                 //執行的動畫
 }
                 completion:^(BOOL finished) {
                 //動畫執行完畢後的操作
 }];

2）例項程式碼：

1、普通動畫
下面三段程式碼都實現了相同的檢視frame的變化，不同之處只在於其延遲時間、過渡效果和結束回撥。

- (void)blockAni1 {
    [UIView animateWithDuration:1.0 animations:^{
        self.cartCenter.frame = self.centerShow.frame;
    }];
}

- (void)blockAni2 {
    [UIView animateWithDuration:1.0 animations:^{
        self.cartCenter.frame = self.centerShow.frame;
    } completion:^(BOOL finished) {
        NSLog(@"動畫結束");
    }];
}

- (void)blockAni3 {
    [UIView animateWithDuration:1.0 delay:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        self.cartCenter.frame = self.centerShow.frame;
    } completion:^(BOOL finished) {
        NSLog(@"動畫結束");
    }];
}

動畫效果：

NormalAni.gif

2、Spring動畫

- (void)blockAni4 {
    [UIView animateWithDuration:1.0 delay:0.f usingSpringWithDamping:0.5 initialSpringVelocity:5.0 options:UIViewAnimationOptionCurveLinear animations:^{
        self.cartCenter.frame = self.centerShow.frame;
    } completion:^(BOOL finished) {
        NSLog(@"動畫結束");
    }];
}

動畫效果：

SpringAni.gif

3、Keyframes動畫
這裡以實現檢視背景顏色變化（紅-綠-藍-紫）的過程來演示關鍵幀動畫。

- (void)blockAni5 {
    self.centerShow.image = nil;
    [UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
        [UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{
            self.centerShow.backgroundColor = [UIColor colorWithRed:0.9475 green:0.1921 blue:0.1746 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.centerShow.backgroundColor = [UIColor colorWithRed:0.1064 green:0.6052 blue:0.0334 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.centerShow.backgroundColor = [UIColor colorWithRed:0.1366 green:0.3017 blue:0.8411 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.centerShow.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0];
        }];
    } completion:^(BOOL finished) {
        NSLog(@"動畫結束");
    }];
}

動畫效果：

KeyFramesAni.gif

4、轉場動畫
4.1 單個檢視的過渡效果

- (void)blockAni6 {
    [UIView transitionWithView:self.centerShow duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
        self.centerShow.image = [UIImage imageNamed:@"Service"];
    } completion:^(BOOL finished) {
        NSLog(@"動畫結束");
    }];
}

動畫效果：

TransitionAni.gif

4.2 從舊檢視轉到新檢視的動畫效果

- (void)blockAni7 {
    UIImageView * newCenterShow = [[UIImageView alloc]initWithFrame:self.centerShow.frame];
    newCenterShow.image = [UIImage imageNamed:@"Service"];
    [UIView transitionFromView:self.centerShow toView:newCenterShow duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
        NSLog(@"動畫結束");
    }];
}

動畫效果：

ScreenTransitionAni.gif

Next

接下來將更新核心動畫Core Animation

文／明仔Su（簡書作者）
原文連結：http://www.jianshu.com/p/5abc038e4d94
著作權歸作者所有，轉載請聯絡作者獲得授權，並標註“簡書作者”。