iOS 動畫專題（UIView二維形變動畫與CAAnimation核心動畫）

文章目錄

- 1. iOS動畫
- 2. UIView動畫
- - - 2.1 設定UIView動畫的兩種文法形式
    - 2.2 設定屬性形變動畫的兩種類型
    - 2.3 與動畫相關的屬性
    - - 2.3.1 UIView與動畫相關的屬性--與CGAffineTransform對應
    - 2.4 管理二維形變和三維形變的封裝類：CGAffineTransform與CATransform3D
    - - 2.4.1 CGAffineTransform操作API
    - CGAffineTransform操作API
    - - 2.4.2 CATransform3D操作API
        
        2.4.3 CATransform3D與CGAffineTransform互相轉換API
    - 2.5 “組合動畫” 與 CGAffineTransformConcat
    - - 2.5.1 連接配接設定多個屬性組合成一個動畫
        
        2.5.2 利用CGAffineTransformConcat設定組合動畫
    - 2.6 動畫後将屬性還原
    - 2.7 注意點: transform對frame的影響
- 3. CAAnimation核心動畫
- - - 3.1 設定動畫的一種文法形式
    - 3.2 CAAnimation繼承結構
    - 3.3 CAAnimation類的屬性
    - 3.4 幾個重要屬性值
    - - removedOnCompletion屬性值
        
        fillMode屬性值
        
        timingFunction屬性值
- 4. CABasicAnimation
- - - 4.1 特别屬性說明:
    - 4.2 keyPath可以是哪些值
    - 4.3 舉例
- 5. CAKeyframeAnimation關鍵幀動畫
- - - 5.1 參數數組形式
    - 5.2 path形式
- 6. 組動畫
- - - 6.1 組動畫
    - 6.2 示例
- 7. 貝塞爾曲線
- - - 7.1 CGMutablePathRef
    - 7.2 UIBezierPath

1. iOS動畫

總的來說，從涉及類的形式來看，iOS動畫有：基于UIView的仿射形變動畫，基于CAAnimation及其子類的動畫，基于CG的動畫。這篇文章着重總結前兩種動畫。

2. UIView動畫

設定UIView形變動畫有兩種常見用到的屬性，.frame，.transform，是以有的人也可以分别稱之為：

① frame動畫

② transform動畫

這兩種動畫隻需要在動畫文法中适當的位置，基于UIView和CALayer的屬性設定變化值即可。這種動畫，不需要調用核心動畫CAAnimation裡面的專用類和API。

其中，frame動畫設定方式有限，必須确切地制定形變前後的frame，平移還好，特别是旋轉的時候，隻能通過數學知識計算出新的frame。這就得不償失了。是以，更多的時候，當涉及一些frame，bounds，center的改變或是形變的時候可以用transform來取代frame。

2.1 設定UIView動畫的兩種文法形式

begin — commit

//偏移動畫
  [UIView beginAnimations:@"move" context:nil];  
  [UIView setAnimationDuration:2];  
  [UIView setAnimationDelegate:self];  
  imageContainView.frame = CGRectMake(80, 80, 200, 200);  
  [label1 setBackgroundColor:[UIColor yellowColor]];  
  [label1 setTextColor:[UIColor redColor]];  
  [UIView commitAnimations];

animations block

//縮放動畫
  view.transform = CGAffineTransformIdentity;
  [UIView animateWithDuration:1.0f animations:^{
     view.transform = CGAffineTransformMakeScale(2.0f, 2.0f);
  }];

2.2 設定屬性形變動畫的兩種類型

UIView的 CGAffineTransform 類型屬性：animatedView.transform

一般是View的旋轉，拉伸移動等屬性，是二維的，通常使用都是字首CGAffineTransform的類。

CGAffineTransform transform = CGAffineTransformScale(imageContainView.transform, 1.2, 1.2); 
[UIView beginAnimations: @"scale"context: nil]; 
[UIView setAnimationDuration: 2];
[UIView setAnimationDelegate: self];
[imageView setTransform: transform]; 
[UIView commitAnimations];

CALayer的CATransform3D 類型屬性：animaView.layer.transform

通過 .layer.transform 可以在3D模式下面的變化，通常使用的都是字首為CATransform3D的類。

imageView.layer.transform =  CATransform3DIdentity;
[UIView animateWithDuration:1.0f animations:^{
      imageView.layer.transform = CATransform3DMakeScale(2.0, 2.0, 1.0);
}];

2.3 與動畫相關的屬性

2.3.1 UIView與動畫相關的屬性–與CGAffineTransform對應

下面是UIView的一些屬性介紹

@property(nonatomic) CGRect            frame;
@property(nonatomic) CGRect            bounds;      // default bounds is zero origin, frame size. animatable
@property(nonatomic) CGPoint           center;      // center is center of frame. animatable
@property(nonatomic) CGAffineTransform transform;   // default is CGAffineTransformIdentity. animatable
@property(nonatomic) CGFloat           contentScaleFactor NS_AVAILABLE_IOS(4_0);

@property(nonatomic,getter=isMultipleTouchEnabled) BOOL multipleTouchEnabled __TVOS_PROHIBITED;   // default is NO
@property(nonatomic,getter=isExclusiveTouch) BOOL       exclusiveTouch __TVOS_PROHIBITED;         // default is NO

在實際開發中，使用場景：

(1) 當涉及一些frame, bounds, center的改變或是形變的時候可以用 transform 來取代 frame。

(2) 一般在實際開發中都是平移，旋轉，縮放組合使用。

######2.3.2 CALayer與動畫相關的屬性–與CATransform3D對應

下面是CALayer的一些屬性介紹

//寬度和高度
@property CGRect bounds;

//位置(預設指中點，具體由anchorPoint決定)
@property CGPoint position;

//錨點(x,y的範圍都是0-1)，決定了position的含義
@property CGPoint anchorPoint;

//背景顔色(CGColorRef類型)
@property CGColorRef backgroundColor;

//形變屬性
@property CATransform3D transform;

//邊框顔色(CGColorRef類型)
@property CGColorRef  borderColor;

//邊框寬度
@property CGFloat borderWidth;

//圓角半徑
@property CGFloat cornerRadius;

//内容(比如設定為圖檔CGImageRef)
@property(retain) id contents;

2.4 管理二維形變和三維形變的封裝類：CGAffineTransform與CATransform3D

2.4.1 CGAffineTransform操作API

CGAffineTransform結構體定義

struct CGAffineTransform {
  CGFloat a, b, c, d;
  CGFloat tx, ty;
};

它其實表示的是一個矩陣：