1、CALayer简介
CALayer是个与UIView很类似的概念,同样有backgroundColor、frame等相似的属性,我们可以将UIView看做一种特殊的CALayer。但实际上UIView是对CALayer封装,在CALayer的基础上再添加交互功能。UIView的显示必须依赖于CALayer。
我们同样可以跟新建view一样新建一个layer,然后添加到某个已有的layer上,同样可以对layer调整大小、位置、透明度等。
一般来说,layer可以有两种用途:一是对view相关属性的设置,包括圆角、阴影、边框等参数;二是实现对view的动画操控。因此对一个view进行动画,本质上是对该view的.layer进行动画操纵。
2.CAAnimation的分类
(1) CABasicAnimation
基础动画,通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation
(2) CAKeyframeAnimation
关键帧动画
(3) CAAnimationGroup
组动画,支持多个CABasicAnimation或者CAKeyframeAnimation动画同时执行
基本动画代码:
/**创建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"];
参数解释:
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"];