CALayer属性及描述
| 属性 | 描述 | 是否支持隐式动画 |
|---|---|---|
| position | 图层中心点的位置，类似与UIView的center | 支持 |
| anchorPoint | 锚点，默认（0.5、0.5） | 支持 |
| backgroundColor | 背景颜色 | 支持 |
| borderColor | 边框颜色 | 支持 |
| borderWidth | 边框宽度 | 支持 |
| bounds | 图层大小 | 支持 |
| contents | 图层内容显示 | 支持 |
| contentsRect | 图层内容的大小和位置 | 支持 |
| cornerRadius | 圆角半径 | 支持 |
| frame | 图层大小和位置，通常使用bound和position代替 | 不支持 |
| hidden | 隐藏 | 支持 |
| mask | 蒙版 | 支持 |
| masksToBounds | 图层边界裁剪 | 支持 |
| opacity | 图层透明度，类似与UIView的alpha | 支持 |
| shadowColor | 阴影颜色 | 支持 |
| shadowOffset | 阴影偏移量 | 支持 |
| shadowOpacity | 阴影透明度，默认为0 | 支持 |
| shadowPath | 阴影形状 | 支持 |
| shadowRadius | 阴影圆角半径 | 支持 |
上面有几个不经常使用到的属性。例如。
anchorPoint
这个属性默认这为(0.5,0.5)，可以把它理解为图层的支点，我们都知道，frame是当前界面在其父界面中的位置和大小。bounds是当前界面在其自身坐标系统中的位置和大小。中心点在UIView中称做Center，在CALayer中则使用的是Position。中心点的计算公式为
position.x = frame.origin.x + anchorPoint.x * bounds.size.width；
position.y = frame.origin.y + anchorPoint.y * bounds.size.height；
UIView的界面显示也是依靠默认的view.layer来显示，只是layer的默认anchorPoint为(0.5,0.5)，计算出来中心点center在视图中心，在layer中如果改变anchorPoint，则图层的position则相应改变。
锚点anchorPoint主要用作旋转。
CABasicAnimation *anchorAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
anchorAnimation.toValue = @(M_PI * 2);
anchorAnimation.duration = 2;
锚点(0.5,0.5)
0.5,0.5锚点.gif
锚点(0,0)
锚点.gif
contents
图层的内容显示
UIImage *contents = [UIImage imageNamed:@"swimCircle_Top"];
_aniLayer.contents = (__bridge id _Nullable)(contents.CGImage);
content.gif
contentsRect，图层内容的大小和位置,
CABasicAnimation *bgColorAnimation = [CABasicAnimation animationWithKeyPath:@"contentsRect"];
// 0.25, 0.25，表示开始显示的位置
// 0.5, 0.5 ，表示图片显示相对原图片的大小
bgColorAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(0.25, 0.25, 0.5, 0.5)];
bgColorAnimation.duration = 2;
contentRect.gif
shadowColor ，shadowOffset，shadowOpacity, shadowRadius
四个属性做个简单的阴影。这个只能做两面的偏移阴影。
_aniLayer.shadowColor = [UIColor blackColor].CGColor;
_aniLayer.shadowOffset = CGSizeMake(10, 10);
_aniLayer.shadowRadius = 5.f;
_aniLayer.shadowOpacity = 0.5;
屏幕快照 2018-06-09 上午10.15.33.png
shadowPath
自定义阴影的路径，扩展高。
CALayer的子类
CALayer的子类很多，在实际开发过程中，我们用到的子类多为CAShapeLayer,CAGradientLayer,``,CAEmitterLayer,CAReplicatorLayer这四种，能学好我觉得能应付绝大多数的图层创建和动画制作了。
CAShapeLayer
CAShapeLayer相对CALayer多出的属性
- 贝塞尔曲线path
@property(nullable) CGPathRef path;
path 和CAShapeLayer是一个绝配，能画出几乎所有图形。
UIBezierPath的方法在之前中
- 填充颜色
@property(nullable) CGColorRef fillColor;
- 填充规则
@property(copy) NSString *fillRule;
even-odd --- 奇偶判断规则，从任意一点出发 与边界交点个数为 奇数则表示在圆或者说图形内，如果为偶数表示在圆外或者说图形外
non-zero --- 非0判断规则，从任意一点出发，与边界交点个数为不为0时表示在圆内，为0表示在圆外，不为0在圆内。
利用奇偶原则画圆环
UIBezierPath *bezierPath1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 200, 200)];
UIBezierPath *bezierPath2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(75, 75, 150, 150)];
[bezierPath1 appendPath:bezierPath2];
_shapeLayer.path = bezierPath1.CGPath;
_shapeLayer.fillRule = kCAFillRuleEvenOdd; // 奇偶原则
fillRule.gif
fillRule2.gif
- 线的颜色
@property(nullable) CGColorRef strokeColor;
- 绘制的开始和结束位置
@property CGFloat strokeStart;
@property CGFloat strokeEnd;
这两个属性经常用作动画。
strokeEnd.gif
以下属性这里类似的已经介绍过了
@property CGFloat lineWidth;
@property CGFloat miterLimit；
@property(copy) NSString *lineCap;
@property(copy) NSString *lineJoin;
@property CGFloat lineDashPhase;
@property(nullable, copy) NSArray<NSNumber *> *lineDashPattern;
CAGradientLayer(渐变色图层)
属性较少
- 颜色数组
@property(nullable, copy) NSArray *colors;
- 颜色的渐变区间
@property(nullable, copy) NSArray<NSNumber *> *locations;
- 颜色的绘制开始点和结束点
@property CGPoint startPoint;
@property CGPoint endPoint;
属性都很简单，关键要弄清locations对颜色分布的影响
_layer = [CAGradientLayer layer];
_layer.frame = CGRectMake(0, 0, kScreenWidth, kScreenHeight - 64);
_layer.startPoint = CGPointMake(0, 1);
_layer.endPoint = CGPointMake(1, 0);
_layer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor];
_layer.locations = @[@0.3,@0.6,@0.8];
[self.view.layer addSublayer:_layer];
Simulator Screen Shot - iPhone 6 - 2018-06-09 at 14.16.22.png
可以看出渐变开始的位置是在左下角，结束在右上角。对应startPoint为CGPointMake(0, 1)，endPoint为CGPointMake(1, 0)。
渐变是红色-红绿渐变-绿蓝渐变-蓝色 。对应0-0.3,0.3-0.6, 0.6-0.8,0.8-1。即_layer.locations = @[@0.3,@0.6,@0.8];
+渐变色，常用作mask，mask顾名思义遮罩，把layer1设置为layer2的遮罩，根据透明度进行裁剪，只保留非透明部分，显示底部内容。
-
渐变色文字
Simulator Screen Shot - iPhone 6 - 2018-06-09 at 14.27.04.png
- 渐变色文字变化
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"locations"];
animation.fromValue = @[@0,@0.2,@0.4];
animation.toValue = @[@01,@1,@1];
animation.duration = 3;
animation.repeatCount = MAXFLOAT;
[_layer addAnimation:animation forKey:@"animation"];
label颜色改变.gif
_layer = [CAGradientLayer layer];
_layer.frame = CGRectMake(0, 0, kScreenWidth, kScreenHeight - 64);
_layer.startPoint = CGPointMake(0, 0.5);
_layer.endPoint = CGPointMake(1, 0.5);
_layer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor whiteColor].CGColor,
(__bridge id)[UIColor clearColor].CGColor];
_layer.locations = @[@0,@0,@0.25];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"locations"];
animation.fromValue = @[@0,@0,@0.25];
animation.toValue = @[@0.75,@1,@1];
animation.duration = 3;
animation.repeatCount = MAXFLOAT;
[_layer addAnimation:animation forKey:@"animation"];
[self.view.layer addSublayer:_layer];
_layer.mask = label.layer;
label颜色改变2.gif
CAReplicatorLayer
属性
- 复制的图层的个数
@property NSInteger instanceCount;
- 动画时间延迟
@property CFTimeInterval instanceDelay;
- CAReplicatorLayer里复制的图层相对上一个复制的图层的变换。变换相对于CAReplicatorLayer图层的锚点。如果是CATransform3DMakeRotation，则圆形排布。CATransform3DMakeTranslation，则水平排步。
@property CATransform3D instanceTransform;
- R G B Alpha 复制的偏移值。
@property float instanceRedOffset;
@property float instanceGreenOffset;
@property float instanceBlueOffset;
@property float instanceAlphaOffset;
_replicatorLayer = [CAReplicatorLayer layer];
_replicatorLayer.instanceCount = 12;
_replicatorLayer.bounds = CGRectMake(0, 0, 200, 200);
_replicatorLayer.position = CGPointMake(100, 100);
CGFloat angle = M_PI * 2 / _replicatorLayer.instanceCount;
_replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
_replicatorLayer.instanceDelay = 1.5/12;
[self.layer addSublayer:_replicatorLayer];
CALayer *layer = [CALayer layer];
layer.bounds = CGRectMake(0, 0, 20, 20);
layer.position = CGPointMake(40, 40);
layer.cornerRadius = 10;
layer.masksToBounds = YES;
layer.backgroundColor = [UIColor redColor].CGColor;
layer.transform = CATransform3DMakeScale(0.4, 0.4, 0.4);
[_replicatorLayer addSublayer:layer];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.fromValue = @1;
animation.toValue = @0.5;
animation.duration = 1.5;
animation.repeatCount = CGFLOAT_MAX;
[layer addAnimation:animation forKey:@"ani"];
复制.gif
CAEmitterLayer
- 还是先看下CAEmitterLayer的属性
// 数组 ，里面是粒子列表
@property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells;
// 粒子产生速度，默认每秒1个
@property float birthRate;
// 粒子的生命周期 默认1s
@property float lifetime;
// 发射器在xy平面的中心位置
@property CGPoint emitterPosition;
// 发射器在z平面的位置
@property CGFloat emitterZPosition;
// 发射器的尺寸
@property CGSize emitterSize;
// 发射器的深度
@property CGFloat emitterDepth;
// 发射器的形状
@property(copy) NSString *emitterShape;
// 发射器发射模式
@property(copy) NSString *emitterMode;
// 发射器渲染模式
@property(copy) NSString *renderMode;
// 是否开启景深
@property BOOL preservesDepth;
// 粒子运动速度
@property float velocity;
// 粒子的缩放比例
@property float scale;
// 自旋转速度
@property float spin;
这里有三个枚举要认识
- emitterShape, 发射器的形状,
NSString * const kCAEmitterLayerPoint; //点
NSString * const kCAEmitterLayerLine;//线
NSString * const kCAEmitterLayerRectangle;//矩形
NSString * const kCAEmitterLayerCuboid;//立方体
NSString * const kCAEmitterLayerCircle;//圆形
NSString * const kCAEmitterLayerSphere;//球型
- emitterMode,发射器发射模式
NSString * const kCAEmitterLayerPoints;//从发射器中发出
NSString * const kCAEmitterLayerOutline;//从发射器边缘发出
NSString * const kCAEmitterLayerSurface;//从发射器表面发出
NSString * const kCAEmitterLayerVolume;//从发射器中点发出
- renderMode,发射器渲染模式
NSString * const kCAEmitterLayerUnordered;//粒子无序出现
NSString * const kCAEmitterLayerOldestFirst;//声明久的粒子会被渲染在最上层
NSString * const kCAEmitterLayerOldestLast;//年轻的粒子会被渲染在最上层
NSString * const kCAEmitterLayerBackToFront;//粒子的渲染按照Z轴的前后顺序进行
NSString * const kCAEmitterLayerAdditive;//粒子混合
CAEmitterCell
| 属性 | 描述 |
|---|---|
| emitterCell | 初始化方法 |
| name | 粒子的名字 |
| color | 粒子的颜色 |
| enabled | 粒子是否渲染。 |
| contents | 渲染粒子，是个CGImageRef的对象，即粒子要展示的图片。 |
| contentsRect | 渲染范围。 |
| birthRate | 粒子产生速度。 |
| lifetime | 生命周期。 |
| lifetimeRange | 生命周期增减范围。 |
| velocity | 粒子运动速度。 |
| velocityRange | 速度范围。 |
| spin | 粒子旋转角度。 |
| spinrange | 粒子旋转角度范围。 |
| scale | 缩放比例。 |
| scaleRange | 缩放比例范围。 |
| scaleSpeed | 缩放比例速度。 |
| alphaRange | 一个粒子的颜色alpha能改变的范围。 |
| alphaSpeed | 粒子透明度在生命周期内的改变速度。 |
| redRange | 一个粒子的颜色red能改变的范围。 |
| redSpeed | 粒子red在生命周期内的改变速度。 |
| blueRange | 一个粒子的颜色blue能改变的范围。 |
| blueSpeed | 粒子blue在生命周期内的改变速度。 |
| greenRange | 一个粒子的颜色green能改变的范围。 |
| greenSpeed | 粒子green在生命周期内的改变速度。 |
| xAcceleration | 粒子x方向的加速度分量。 |
| yAcceleration | 粒子y方向的加速度分量。 |
| zAcceleration | 粒子z方向的加速度分量。 |
| emissionRange | 粒子发射角度范围。 |
| emissionLongitude | 粒子在xy平面的发射角度。 |
| emissionLatitude | 发射的z轴方向的发射角度。 |
- 简单做个红包雨效果
CAEmitterLayer *redPacketEmitter = [CAEmitterLayer layer];
CGRect viewBounds = self.layer.bounds;
redPacketEmitter.emitterPosition = CGPointMake(viewBounds.size.width/2.0, -40);
redPacketEmitter.emitterSize = CGSizeMake(kScreenWidth, 1);
redPacketEmitter.emitterMode = kCAEmitterLayerSurface;
redPacketEmitter.emitterShape = kCAEmitterLayerLine;
redPacketEmitter.renderMode = kCAEmitterLayerOldestLast;
CAEmitterCell* redPacket = [CAEmitterCell emitterCell];
redPacket.birthRate = 5;
redPacket.velocity = 125;
redPacket.yAcceleration = 150;
redPacket.lifetime = 15;
redPacket.contents = (id) [[UIImage imageNamed:@"redPacket"] CGImage];
redPacket.spinRange = M_PI_4;
redPacket.spin = M_PI_4;
redPacketEmitter.emitterCells = [NSArray arrayWithObject:redPacket];
[self.layer addSublayer:redPacketEmitter];
红包雨.gif
网友评论