一、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
zPositiontransform.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"];