iOS學習44之動畫_ZenDei技術網路在線

1. 簡單動畫 1> UIImageView GIF 動畫 GIF圖的原理是：獲取圖片，存儲在圖片數組中，按照圖片數組的順序將圖片以一定的速度播放 2> UIActivityIndicatorView 風火輪動畫在APP中，載入界面的時候我們都會看到一個想風火輪的動畫在不停的轉，這個動畫其實是iO ...

1. 簡單動畫

　1> UIImageView GIF 動畫

　　GIF圖的原理是：獲取圖片，存儲在圖片數組中，按照圖片數組的順序將圖片以一定的速度播放

　　UIImageView *showGifimageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 100, 300, 300)];
    
    [self.view addSubview:showGifimageView];
    
    // 創建一個存儲圖片的數組
    NSMutableArray *saveImageArray = [NSMutableArray array];
    
    // 獲取圖片
    for (int i = 1; i < 12; i++) {
        // 拼接圖片名
        NSString *imageName = [NSString stringWithFormat:@"%d.tiff", i];
        // 根據圖片名獲取圖片
        UIImage *image = [UIImage imageNamed:imageName];
        // 將圖片加到數組
        [saveImageArray addObject:image];
    }
    // 設置gif的圖片組
    showGifimageView.animationImages = saveImageArray;
    // 設置播放速率
    showGifimageView.animationDuration = 1;
    // 設置播放的次數
    showGifimageView.animationRepeatCount = 0;
    // 開始動畫
    [showGifimageView startAnimating];

　2> UIActivityIndicatorView 風火輪動畫

　　在APP中，載入界面的時候我們都會看到一個想風火輪的動畫在不停的轉，這個動畫其實是iOS中的一個類 UIActivityIndicatorView

    // 載入旋轉的菊花效果
    // 無需設置frame
    UIActivityIndicatorView *indicatorView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
    // 確定位置
    indicatorView.center = self.view.center;
    
    [self.view addSubview:indicatorView];
    
    // 將菊花動畫效果開啟
    [indicatorView startAnimating];

　3> 動畫可以達到的效果

傳達狀態
提高用戶對直接操作的感知
幫助用戶可視化操作的結果

　4> 使用動畫應該註意

謹慎添加動畫，尤其是在那些不能提供沉浸式用戶體驗(讓人專註在當前由設計者營造的情境下感到愉悅和滿足暫時忘記真實世界的情境)的App中。

　　如果App主要關註一些嚴肅的任務或者生產性任務，那麼動畫就顯得多餘了，還會無端打亂App的使用流程，降低應用的性能，讓用戶從當前的任務中分心。

開發者的自定義動畫應該適當符合內置iOS應用的動畫。

　　用戶習慣於內置iOS App使用的精細動畫。事實上，用戶趨向於把視圖之間的平滑轉換，對設備方向改變的流暢響應和基於物理力學的滾動效果看作是iOS體驗的一部分。除非你的應用能夠給用戶沉浸式的體驗—比如游戲(自定義動畫應該可以與內置應用的動畫相媲美)

使用風格類型一致的動畫。

　　在App中使用風格類型一致的動畫非常重要，可以讓用戶構建基於使用App獲得的用戶體驗。

2. UIView動畫之UIView基礎動畫

　1> 概述

UIKit 直接將動畫集成到 UIView 類中，當內部的一些屬性發生改變時，UIView將為這些改變提供動畫支持。
執行動畫的工作由 UIView 類自動完成，但仍希望在執行動畫時通知視圖，為此需要將改變屬性的代碼放在 [UIView beginAnimations:nil context:nil] 和 [UIView commitAnimations] 之間。

　2> UIView基礎動畫種類

UIView位置大小動畫（改變View的frame）
UIView顏色動畫（改變View的color）
UIView透明度動畫（改變View的alpha）
仿射-翻轉rotation
仿射-旋轉transform

　3> UIView基礎動畫步驟

第一步：開始UIView動畫

+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context;

　　參數animationID：是一個標識符字元串，用於告訴系統要進行哪一個動畫，可以自由定義

　　參數context：額外的上下文信息傳遞，沒有就置為 nil

第二步：設置動畫時長

+ (void)setAnimationDuration:(NSTimeInterval)duration;

　　參數duration：表示動畫持續的時間長度，系統預設為0.2s，具體值可以根據需求自行設置

第三步：設置UIView動畫的回調代理

+ (void)setAnimationDelegate:(nullable id)delegate;

　　參數delegate：設置代理變數，一般為nil，代理主要用於監聽動畫的開始和結束

第四步：處理相關的動畫

　　主要是對frame、color、alpha、翻轉方向和旋轉角度的操作

第五步：提交動畫效果

+ (void)commitAnimations;

　　該方法主要是提交動畫，也就是告訴系統動畫執行完成

　4> UIView位置大小動畫（改變View的frame）

    // UIView動畫有開始beginAnimation，有結束commitAnimations
    // 第一步：開始UIView動畫
    [UIView beginAnimations:@"mov" context:nil];
    // 第二步：設置動畫時常
    [UIView setAnimationDuration:3];
    // 第三步：設置UIView動畫的回調代理
    [UIView setAnimationDelegate:self];
    // 第四步：設置相關的對象的frame
    _showView.frame = CGRectMake(100, 100, 200, 100);
    // 第五步：提交動畫效果
    [UIView commitAnimations];

　5> UIView顏色動畫（改變View的color）

    [UIView beginAnimations:@"color" context:nil];
    [UIView setAnimationDuration:4];
    [UIView setAnimationDelegate:self];
    _showView.backgroundColor = [UIColor purpleColor];
    [UIView commitAnimations];

　6> UIView透明度動畫（改變View的alpha）

    [UIView beginAnimations:@"alpha" context:nil];
    [UIView setAnimationDuration:5];
    [UIView setAnimationDelegate:self];
    _showView.alpha = 0.1;
    [UIView commitAnimations];

　7> 仿射-翻轉rotation

    // 第一步：開始UIView動畫
    [UIView beginAnimations:@"rotation" context:nil];
    // 第二步：設置動畫時常
    [UIView setAnimationDuration:0.5];
    // 第2.5步：設置淡入的效果(感覺效果不明顯）
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    // 第三步：設置UIView動畫的回調代理
    [UIView setAnimationDelegate:self];
    // 第4步：設置翻轉的方式
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:_showView cache:YES];
    [UIView commitAnimations];

　8> 仿射-旋轉transform

    [UIView beginAnimations:@"transform" context:nil];
    [UIView setAnimationDuration:2];
    [UIView setAnimationDelegate:self];
    // 第4步：設置旋轉角度
    CGAffineTransform transform = CGAffineTransformMakeRotation(-M_PI_2);
    // 第4.5步：設置旋轉角度的對象
    [_showView setTransform:transform];
    [UIView commitAnimations];

　9> UIView基礎動畫回調方法

+ (void)setAnimationWillStartSelector:(nullable SEL)selector;
+ (void)setAnimationDidStopSelector:(nullable SEL)selector;

　　這兩個方法預設是 nil，不能使用，一般使用它們的替代方法

- (void)animationWillStart:(NSString *)animationID context:(void *)context;
- (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context;

　　實際操作的代碼

#pragma mark - UIViewAnimationDelegate的協議方法
- (void)animationWillStart:(NSString *)animationID context:(void *)context
{
    NSLog(@"%s__%d--ID = %@, context = %@", __FUNCTION__, __LINE__, animationID, context);
}

- (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context
{
    NSLog(@"%s__%d--ID = %@, context = %@", __FUNCTION__, __LINE__, animationID, context);
}

　註：UIViewAnimationDelegate 代理不需要我們在遵循，系統已經封裝好了

3. UIView動畫之Block動畫

　1> Block簡單動畫

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion;

參數duration：設置動畫時長
參數animations：是一個Block，主要用於設置動畫
參數completion：也是一個Block，主要用於設置在動畫結束後的一些操作

    __weak typeof(self)weakSelf = self;
    // 第1個參數：設置動畫時長
    // 第2個參數：設置動畫
    // 第3個參數：動畫完成時進行的事情
    [UIView animateWithDuration:2 animations:^{
        weakSelf.playImageView.frame = CGRectMake(67, 74, 240, 286);
    } completion:^(BOOL finished) {
        NSLog(@"finished");
    }];

　2> Block複雜動畫

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion;

參數duration：設置動畫時長
參數delay:動畫執行的延遲時間
參數options：枚舉值動畫效果，有很多枚舉值，大家可以根據需要進行選取
參數animations：是一個Block，主要用於設置動畫
參數completion：也是一個Block，主要用於設置在動畫結束後的一些操作

    // 第1個參數：設置動畫時長
    // 第2個參數：動畫的延遲時間
    // 第3個參數：枚舉值動畫效果
    // 第4個參數：設置動畫
    // 第5個參數：動畫完成時進行的事情
    __weak typeof(self)weakSelf = self;
    [UIView animateWithDuration:2 delay:1 options:UIViewAnimationOptionOverrideInheritedOptions animations:^{
        weakSelf.playImageView.center = weakSelf.view.center;
    } completion:^(BOOL finished) {
        NSLog(@"finished");
    }];

　3> Block關鍵幀動畫

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion

參數duration：設置動畫時長
參數delay:動畫執行的延遲時間
參數options：關鍵幀枚舉值動畫效果，有很多枚舉值，大家可以根據需要進行選取
參數animations：是一個Block，主要用於設置動畫。在這裡需要添加一個方法，即創建Block的關鍵幀

　　　　+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations;

　參數frameStartTime：幀動畫的開始時間
　參數frameDuration：幀動畫的持續時間
　參數animations：Block，用於設置動畫
參數completion：也是一個Block，主要用於設置在動畫結束後的一些操作

    // 第1個參數：設置動畫時長
    // 第2個參數：動畫的延遲時間
    // 第3個參數：關鍵幀枚舉值動畫效果
    // 第4個參數：開始動畫
    // 第5個參數：動畫完成時進行的事情
    __weak typeof(self)weakSelf = self;
    [UIView animateKeyframesWithDuration:2 delay:1 options:UIViewKeyframeAnimationOptionAllowUserInteraction animations:^{
        // 在這裡需要添加一個方法，即創建Block的關鍵幀
        // 幀動畫的開始時間
        // 幀動畫的持續時間
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.5 animations:^{
            weakSelf.playImageView.center = weakSelf.view.center;
        }];
        
    } completion:^(BOOL finished) {
        NSLog(@"finished");
    }];

4. Spring動畫

　1> 概述

　　Spring Animation 是一種特殊的動畫曲線，自從 iOS 7 開始被廣泛應用在系統動畫中。

　　事實上，從 iOS 7 起幾乎所有的系統動畫都用的是 Spring Animation，包括 App 文件夾打開/關閉效果、鍵盤彈出效果、UISwitch 控制項的開關效果、不同 View Controller 之間的 Push 動畫、Modal 出現和消失的動畫、Siri 的出現和消失動畫，等等

　2> Spring動畫API

+ (void)animateWithDuration:(NSTimeInterval)duration //動畫時長參數
                      delay:(NSTimeInterval)delay //動畫延遲參數
     usingSpringWithDamping:(CGFloat)dampingRatio //動畫阻尼參數,0.0~1.0,越小動畫越明顯
      initialSpringVelocity:(CGFloat)velocity //動畫初始變化速率
                    options:(UIViewAnimationOptions)options //動畫可選參數
                 animations:(void (^)(void))animations //動畫最終效果代碼塊
                 completion:(void (^)(BOOL finished))completion //動畫播放完成後執行的代碼塊

　　Spring Animation 是線性動畫或 ease-out 動畫的理想替代品。由於 iOS 本身大量使用的就是 Spring Animation，用戶已經習慣了這種動畫效果，因此使用它能使 App 讓人感覺更加自然，用 Apple 的話說就是「instantly familiar」。此外，Spring Animation 不只能針對位置變化使用，它適用於所有可被添加動畫效果的屬性。

　3> 實例代碼

   __weak typeof(self)weakSelf = self; 
    [UIView animateWithDuration:3.0 // 動畫時長
                          delay:0.0 // 動畫延遲
         usingSpringWithDamping:1.0 // 類似彈簧振動效果 0~1
          initialSpringVelocity:15.0 // 初始速度                        options:UIViewAnimationOptionCurveEaseInOut // 動畫過渡效果
                     animations:^{
                         CGPoint point = _imageView.center;
                         point.y += 150;
                         [_imageView setCenter:point];
                     } completion:^(BOOL finished) {  // 動畫完成後執行
                         NSLog(@"finished");
                     }];

5. CoreAnimation動畫（CALayer動畫）

　1> CoreAnimation基本介紹

CoreAnimation 動畫位於 iOS 框架的 Media 層
CoreAnimation 動畫實現需要添加 QuartzCore.Framework
CoreAnimation 基本上是 Layer Animation

　2> CALayer基本介紹

　① CALayer與UIView

CALayer 負責繪製，提供 UIView 需要展示的內容，不能交互。

UIView 負責交互，顯示 CALayer 繪製的內容。
UIView 是 iOS 系統中界面元素的基礎，所有的界面元素都是繼承自它。它本身完全是由 CoreAnimation 來實現的。它真正的繪圖部分，是由一個 CALayer 類來管理。UIView 本身更像是一個 CALayer 的管理器，訪問它的跟繪圖和跟坐標有關的屬性，例如frame，bounds等，實際上內部都是在訪問它所包含的 CALayer 的相關屬性。
UIView 有個重要屬性 layer ，可以返回它的主 CALayer 實例。
UIView 的 CALayer 類似 UIView 的子View樹形結構，也可以向它的 layer 上添加子layer，來完成某些特殊的表示。即 CALayer 層是可以嵌套的。

　② CALayer介紹

CALayer(層) 是屏幕上的一個矩形區域，在每一個 UIView 中都包含一個根CALayer，在 UIView 上的所有視覺效果都是在這個 Layer 上進行的。

CALayer 外形特征主要包括：

　　　層的大小尺寸

　　　背景色

　　　內容（可以填充圖片或者使用Core Graphics繪製的內容）

　　　矩形是否使用圓角

　　　矩形是否有陰影

　③ Layer的種類

　　Layer 有很多種，最常用也是最基本的是 CALayer，當然還包括其他的子類：

　　　CAScrollerLayer 簡化顯示層的一部分

　　　CATextLayer 文本層

　　　CAGradientLayer、CAShapeLayer等等

iOS學習44之動畫

1. 簡單動畫

2> UIActivityIndicatorView 風火輪動畫

3> 動畫可以達到的效果

4> 使用動畫應該註意

2. UIView動畫之UIView基礎動畫

1> 概述

2> UIView基礎動畫種類

3> UIView基礎動畫步驟

4> UIView位置大小動畫（改變View的frame）

5> UIView顏色動畫（改變View的color）

6> UIView透明度動畫（改變View的alpha）

7> 仿射-翻轉rotation

8> 仿射-旋轉transform

9> UIView基礎動畫回調方法

3. UIView動畫之Block動畫

1> Block簡單動畫

2> Block複雜動畫

3> Block關鍵幀動畫

4. Spring動畫

1> 概述

2> Spring動畫API

3> 實例代碼

5. CoreAnimation動畫（CALayer動畫）

1> CoreAnimation基本介紹

2> CALayer基本介紹

① CALayer與UIView

② CALayer介紹

③ Layer的種類

3> CALayer的常用屬性

　2> UIActivityIndicatorView 風火輪動畫

　3> 動畫可以達到的效果

　4> 使用動畫應該註意

　1> 概述

　2> UIView基礎動畫種類

　3> UIView基礎動畫步驟

　4> UIView位置大小動畫（改變View的frame）

　5> UIView顏色動畫（改變View的color）

　6> UIView透明度動畫（改變View的alpha）

　7> 仿射-翻轉rotation

　8> 仿射-旋轉transform

　9> UIView基礎動畫回調方法

　1> Block簡單動畫

　2> Block複雜動畫

　3> Block關鍵幀動畫

　1> 概述

　2> Spring動畫API

　3> 實例代碼

　1> CoreAnimation基本介紹

　2> CALayer基本介紹

　① CALayer與UIView

　② CALayer介紹

　③ Layer的種類

　3> CALayer的常用屬性