iOS開發CABasicAnimation動畫理解

一、CALayer簡介html

CALayer是個與UIView很相似的概念,一樣有backgroundColor、frame等類似的屬性,咱們能夠將UIView看作一種特殊的CALayer。但實際上UIView是對CALayer封裝,在CALayer的基礎上再添加交互功能。UIView的顯示必須依賴於CALayer。
咱們一樣能夠跟新建view同樣新建一個layer,而後添加到某個已有的layer上,一樣能夠對layer調整大小、位置、透明度等。
通常來講,layer能夠有兩種用途:一是對view相關屬性的設置,包括圓角、陰影、邊框等參數;二是實現對view的動畫操控。所以對一個view進行動畫,本質上是對該view的.layer進行動畫操縱。ios

2.CAAnimation的分類app

(1) CABasicAnimationide

基礎動畫,經過設定起始點,終點,時間,動畫會沿着你這設定點進行移動。能夠看作特殊的CAKeyFrameAnimation動畫

(2) CAKeyframeAnimation
關鍵幀動畫spa

(3) CAAnimationGroup
組動畫,支持多個CABasicAnimation或者CAKeyframeAnimation動畫同時執行code

基本動畫代碼:orm

    /**建立CALayer*/
    CALayer * testLayer = [[CALayer alloc] init];
    testLayer.backgroundColor = [UIColor greenColor].CGColor;
    testLayer.frame = CGRectMake(100, 100, 100, 100);
    testLayer.cornerRadius = 10;
    [self.view.layer addSublayer:testLayer];
    /**建立動畫*/
    CABasicAnimation * testAnimiation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    testAnimiation.fromValue = [NSNumber numberWithFloat:1.0];
    testAnimiation.toValue = [NSNumber numberWithFloat:1.5];
    testAnimiation.autoreverses = YES;
    testAnimiation.fillMode = kCAFillModeBackwards;
    testAnimiation.removedOnCompletion = NO;
    testAnimiation.repeatCount = MAXFLOAT;
    testAnimiation.duration = 1;
    [testLayer addAnimation:testAnimiation forKey:@"testAnimiation"];

參數解釋:htm

1.animationWithKeyPath的值以下:對象

anchorPoint 
backgroundColor 
backgroundFilters 
borderColor 
borderWidth 
bounds 
compositingFilter 
contents 
contentsRect 
cornerRadius 
doubleSided 
filters 
frame :This property is not animatable. You can achieve the same results by animating theboundsandpositionproperties. 
hidden 
mask 
masksToBounds 
opacity 
position 
shadowColor 
shadowOffset 
shadowOpacity 
shadowPath 
shadowRadius 
sublayers 
sublayerTransform 
transform 翻轉包含scale rotation 
zPosition

大部分咱們經常使用的是:

transform.scale = 比例縮放動畫 
transform.scale.x = 寬的比例動畫 
transform.scale.y = 高的比例動畫 
transform.rotation.z = 平面的旋轉 
opacity = 透明度

2.fromValue: 動畫的起始狀態值,雖然iOS文檔給出的類型是id,不過這裏應該傳NSValue對象,好比NSNumber(NSNubmer繼承自NSValue)。其具體含義

3.autoreverse: 當動畫執行到toValue指定的狀態時是從toValue的狀態逆回去,仍是直接跳到fromValue的狀態再執行一遍

4.fileMode: fillMode的做用就是決定當前對象過了非active時間段的行爲. 非active時間段是指動畫開始以前以及動畫結束以後。若是是一個動畫CAAnimation,則須要將其removedOnCompletion設置爲NO,要否則fillMode不起做用. 下面來說各個fillMode的意義:

kCAFillModeRemoved 這個是默認值,也就是說當動畫開始前和動畫結束後,動畫對layer都沒有影響,動畫結束後,layer會恢復到以前的狀態

kCAFillModeForwards 當動畫結束後,layer會一直保持着動畫最後的狀態

kCAFillModeBackwards 這個和kCAFillModeForwards是相對的,就是在動畫開始前,你只要將動畫加入了一個layer,layer便當即進入動畫的初始狀態。由於有可能出現fromValue不是目前layer的初始狀態的狀況,若是fromValue就是layer當前的狀態,則這個參數就沒太大意義。

kCAFillModeBoth 理解了上面兩個,這個就很好理解了,這個其實就是上面兩個的合成.動畫加入後開始以前,layer便處於動畫初始狀態,動畫結束後layer保持動畫最後的狀態.

CAAnimationGroup實現動畫

 /**建立CALayer*/
//    CALayer * testLayer = [[CALayer alloc] init];
//    testLayer.backgroundColor = [UIColor greenColor].CGColor;
//    testLayer.frame = CGRectMake(100, 100, 100, 100);
//    testLayer.cornerRadius = 10;
//    [self.view.layer addSublayer:testLayer];
    UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    label.backgroundColor = [UIColor greenColor];
    [self.view addSubview:label];
    /**建立動畫*/
    /**縮放*/
    CABasicAnimation * testAnimiation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    testAnimiation.fromValue = [NSNumber numberWithFloat:1.0];
    testAnimiation.toValue = [NSNumber numberWithFloat:1.5];
    testAnimiation.autoreverses = YES;
    testAnimiation.fillMode = kCAFillModeBackwards;
    testAnimiation.removedOnCompletion = NO;
    testAnimiation.repeatCount = MAXFLOAT;
    testAnimiation.duration = 1;
//    [label.layer addAnimation:testAnimiation forKey:@"testAnimiation"];
    /**移動*/
    CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    moveAnimation.fromValue = [NSValue valueWithCGPoint:label.layer.position];
    moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(320 - 80, label.layer.position.y)];
    moveAnimation.autoreverses = YES;
    moveAnimation.repeatCount = MAXFLOAT;
    moveAnimation.duration = 2;
    /**旋轉*/
    CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];
    rotateAnimation.toValue = [NSNumber numberWithFloat:6.0 * M_PI];
    rotateAnimation.autoreverses = YES;
    rotateAnimation.repeatCount = MAXFLOAT;
    rotateAnimation.duration = 2;
    /**動畫組合*/
    CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];
    groupAnnimation.duration = 2;
    groupAnnimation.autoreverses = YES;
    groupAnnimation.animations = @[moveAnimation, testAnimiation, rotateAnimation];
    groupAnnimation.repeatCount = MAXFLOAT;
    
    [label.layer addAnimation:groupAnnimation forKey:@"groupAnnimation"];
相關文章
相關標籤/搜索