iOS動畫小結

CoreAnimation核心動畫：

CAAnimation類是一個抽象類，因此我們不會直接創建CAAnimation類的對象，而是使用其子類對象。其有3個子類，分別爲：

• CAPropertyAnimiation屬性動畫
• CAAnimationGroup動畫組
• CATransition轉場動畫

其中，CAPropertyAnimiation屬性動畫又包含兩個子類，分別爲：

• CABasicAnimation基本動畫
• CAKeyframeAnimation關鍵幀動畫

在iOS9發佈後，CABasicAnimation基本動畫又添加了一個子類CASpringAnimation彈簧動畫。

#CAMediaTiming協議常用屬性

CAAnimation類遵守了CAMediaTiming協議，在該協議中定義了一些常用的與動畫播放相關的屬性。常用的包括如下幾個。

• beginTime：動畫開始播放的時間，默認爲0，即立即開始播放

@property CFTimeInterval beginTime;

• duration:動畫持續的時間，默認爲0

@property CFTimeInterval duration;

• speed：動畫播放的速度，默認爲1，數值越大播放的速度越快，例如，當取值爲2時，以兩倍速度播放動畫

@property float speed;

• repeatCount：動畫重複播放的次數

@property float repeatCount;

• repeatDuration：動畫重複播放的時間間隔

@property CFTimeInterval repeatDuration;

• fillMode：定義動畫播放完畢後的動作，一共有4個可選動作，默認爲：kCAFillModeRemoved，即恢復原樣

@property(copy) NSString *fillMode;

CA_EXTERN NSString * const kCAFillModeForwards;
CA_EXTERN NSString * const kCAFillModeBackwards;
CA_EXTERN NSString * const kCAFillModeBoth;
CA_EXTERN NSString * const kCAFillModeRemoved;

#CAAnimation類的代理協議CAAnimationDelegate

CAAnimationDelegate是CAAnimation類的代理協議，其中定義了與動畫播放相關的一些方法，主要包括：

• 動畫開始播放時調用的方法

- (void)animationDidStart:(CAAnimation *)anim;

• 動畫停止播放時調用的方法，停止播放的原因有可能是動畫播放完成，也有可能是人爲控制動畫停止播放

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

介紹一下相對比較常見的兩種動畫CABasicAnimation（基本動畫）和CATransition轉場動畫（轉場動畫），以備後用

#CABasicAnimation基本動畫

CABasicAnimation類是使用最簡單的核心動畫類，我們只需要指定keyPath，然後設置起始值(fromValue)和目標值(toValue)，然後再把該動畫對象添加到一個CALayer類的對象上，即可實現動畫的播放。

• keyPath的初始值，默認情況下爲空。當不設置fromValue的值時，動畫播放的初始值取自layer對象的keyPath指定屬性的當前值

@property(nullable, strong) id fromValue;

• keyPath的目標值，即變動後的值

@property(nullable, strong) id toValue;

• 乘數。當fromValue不爲空時，目標值爲fromValue 乘以 byValue；當fromValue爲空時，目標值爲layer對象的keyPath指定屬性的當前值乘以byValue

@property(nullable, strong) id byValue;

示例代碼

下方的示例代碼中，在控制器類中添加了一個CALayer類型的屬性myLayer，並且針對myLayer設置了一個平移的動畫。

• 在控制器類中添加一個CALayer類的屬性，作爲動畫播放的layer

@interface ViewController ()
@property (nonatomic, strong) CALayer *myLayer;
@end

• 通過懶加載的方式，設置自定義layer的屬性

-(CALayer *)myLayer{
    if (_myLayer == nil) {
        _myLayer = [CALayer layer];
        _myLayer.frame = CGRectMake(140, 100, 100, 100);
        _myLayer.backgroundColor = [UIColor yellowColor].CGColor;
        _myLayer.borderColor = [UIColor redColor].CGColor;
        _myLayer.borderWidth = 4.0;
        _myLayer.cornerRadius = 2.0;
    }
    return _myLayer;
}

• 添加該自定義layer到控制器視圖的layer上

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view.layer addSublayer:self.myLayer];
}

• 當點擊屏幕時，播放平移動畫

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //1. 實例化CABasicAnimation對象
    CABasicAnimation *animation = [CABasicAnimation animation];
    //2. 設置動畫屬性
    animation.keyPath = @"transform.translation.x";
    animation.toValue = @100;
    animation.duration = 2.0;
    //3. 添加動畫對象到一個CALayer類的對象上，播放動畫
    [self.myLayer addAnimation:animation forKey:nil];å
}

 

#CATransition轉場動畫

通過設置CATransition類中的屬性，我們可以定製轉場動畫的效果，常用的屬性主要包括：

• type:動畫的類型。常用的有4種：fade(漸變)、moveIn(移入)、push(推入)、reveal(移出)，默認爲fade(漸變)

@property(copy) NSString *type;

• subType:動畫的子類型，可以指定動畫播放時開始的方位或方向，有4中方式：fromLeft(從左開始)、fromRight(從右開始)、fromTop(從上開始) 、fromBottom(從下開始)

@property(nullable, copy) NSString *subtype;

• 轉場動畫啓動時以及結束時的進度百分比，取值爲0~1，通過設置這兩個屬性，我們可以實現動畫從中間某個狀態開始播放，或者在中間某個狀態提前結束。

@property float startProgress;
@property float endProgress;

示例：

在下方的示例代碼中，我們實現了當點擊屏幕時，切換一個UIImageView控件顯示圖像的動畫過程。

• 在控制器類中添加一個UIImageView類的屬性

@interface ViewController ()
@property (nonatomic ,strong) UIImageView *transitionView;
@end

• 通過懶加載的方式，設置transitionView的屬性

-(UIImageView *)transitionView{
    if (_transitionView == nil) {
        _transitionView = [[UIImageView alloc] initWithFrame:CGRectMake(140, 100, 100, 100)];
        _transitionView.image = [UIImage imageNamed:@"99ios"];
    }
    return _transitionView;
}

• 添加transitionView到控制器視圖的view上

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.transitionView];
}

• 當點擊屏幕時，transitionView顯示的圖片會發生變化，但變化的過程會展示一段動畫。

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //切換圖片顯示
    self.transitionView.image = [UIImage imageNamed:@"football"];
    //創建一個CATransition動畫對象
    CATransition *animation = [CATransition animation];
    animation.type = @"fade";
    animation.duration = 2.0;
    //添加CATransition對象到transitionView的layer上
    [self.transitionView.layer addAnimation:animation forKey:nil];
}