iOS動畫詳解

iOS動畫詳解

Created: Mar 17, 2019 5:46 PM

今天聊一下iOS經常使用的四種動畫CABasicAnimation，CAKeyframeAnimation，CATransition，以及UIView的animate。

CABasicAnimation，CAKeyframeAnimation，CATransition這三個動畫的基類其實都是CAAnimation，這種動畫有個最大的特色是，執行完動畫，屬性不會發生變化，好比一個View從A點移動到B點，其實座標仍是A點。

下面作一下詳細的介紹：

CAAnimation

CAAnimation在設置動畫的時候有如下通用屬性：

• fromValue: 動畫的開始值
• toValue: 動畫的結束值
• beginTime: 動畫的開始時間
• duration : 動畫的持續時間
• repeatCount : 動畫的重複次數
• fillMode: 動畫的運行場景
• isRemovedOnCompletion: 完成後是否刪除動畫
• autoreverses: 執行的動畫按照原動畫返回執行

CABasicAnimation（基礎動畫）

基礎動畫主要提供了對於CALayer對象中的可變屬性進行簡單動畫的操做。好比：位移、旋轉、縮放、透明度、背景色等。

基礎動畫根據 keyPath 來區分不一樣的動畫。keyPath能夠是：

• transform.scale (比例轉換)
  • transform.scale.x
  • transform.scale.y、
• transform.rotation(旋轉)
  • transform.rotation.x(繞x軸旋轉)
  • transform.rotation.y(繞y軸旋轉)
  • transform.rotation.z(繞z軸旋轉)、
• opacity (透明度)
• margin
• backgroundColor(背景色)
• cornerRadius(圓角)
• borderWidth(邊框寬）
• bounds
• contents
• contentsRect
• cornerRadius
• frame
• hidden
• mask
• masksToBounds
• shadowColor(陰影色)
• shadowOffset
• shadowOpacity

代碼示例：

CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.fromValue = [NSValue valueWithCGPoint:self.aView.center];
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(self.aView.center.x+100, self.aView.center.y)];
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.delegate = self;
    animation.duration = 3.0;
    [animation setRepeatDuration:20];
    animation.repeatCount = 3;
    [self.aView.layer addAnimation:animation forKey:@"click1"];
複製代碼

以上代碼能夠實現將view沿x軸移動100

CAKeyframeAnimation（關鍵幀動畫）

關鍵幀動畫，顧名思義，咱們只須要設定一個關鍵點，而後view即可以將幾個關鍵點造成天然的過分。

關鍵幀動畫，有些特殊的屬性：

• path：關鍵幀動畫中的執行路徑
• values: 關鍵幀動畫中的關鍵點數組

示例代碼：

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
    NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];
    NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
    NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];
    NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 300)];
    NSValue *value6=[NSValue valueWithCGPoint:CGPointMake(200, 400)];
    animation.values=@[value1,value2,value3,value4,value5,value6];
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.delegate = self;
    animation.duration = 3.0;
    [animation setRepeatDuration:20];
    animation.repeatCount = 3;
    [self.aView.layer addAnimation:animation forKey:@"click2"];
複製代碼

CATransition(過渡動畫)

CATransition 用於作過渡動畫或者轉場動畫，可以爲層提供移出屏幕和移入屏幕的動畫效果。

因此這裏要注意的是它的特殊應用場景，CATransition是爲了實現一個view移入或移除屏幕而設計的。能夠將其想象成ppt的動畫效果。

他也有一些特殊屬性：

• type： 過渡動畫的動畫類型，系統提供了多種過渡動畫（官方提供了四種fade, moveIn, push and reveal. Defaults to fade.）
• subtype : 過渡動畫的動畫方向,（系統提供了四種：fromLeft(從左側)fromRight (從右側)fromTop (有上面）fromBottom (從下面））

代碼示例：

CATransition * animation = [CATransition animation];
    animation.type = @"pageCurl";
    animation.subtype = kCATransitionFromLeft;
    animation.duration = 3;
    [self.aView.layer addAnimation:animation forKey:@"click3"];
複製代碼

UIView

UIView的動畫是能夠改變View組件的屬性的，它支持對一下屬性進行更改：

• frame
• bounds
• center
• transform
• alpha
• backgroundColor
• contentStretch

如：

- (void)clicked4:(id)sender{
    
    [UIView animateWithDuration:3 animations:^{
        self.aView.frame = CGRectMake(80, 80, 80, 80);
    } completion:^(BOOL finished) {
        NSLog(@"aaaaaa 結束");
    }];
}
複製代碼

UIView動畫有如下幾個參數：

• animateWithDuration執行時間
• animations 動畫的類型，實際上是一個回調，能夠在這個回調中設置aView最終的屬性，而後根據如今的屬性到這個最終屬性，實現一個動畫
• completion執行完畢的回調
• delay等待時間
• options 一個設置數組，能夠設置動畫的執行狀態，如重複，加速度方式等等