iOS UIKit

Core Animation

CAShapeLayer

https://juejin.cn/post/6992819241124626469
UIBezierPath 绘制圆弧主要利用以下方法：

- (void)addArcWithCenter:(CGPoint)center 	// 圆心
				  radius:(CGFloat)radius				    // 半径
			  startAngle:(CGFloat)startAngle 		// 开始弧度
			    endAngle:(CGFloat)endAngle 			// 结束弧度
			   clockwise:(BOOL)clockwise;				// 绘制方向，YES 为顺时针，NO 为逆时针

// 系统提供了如下宏
#define M_PI        3.14159265358979323846264338327950288   /* pi             */
#define M_PI_2      1.57079632679489661923132169163975144   /* pi/2           */
#define M_PI_4      0.785398163397448309615660845819875721  /* pi/4           */
1
2
3
4
5
6
7
8
9
10

其实圆上的一个弧度有两种表示方法，顺时针（正方向）一种，逆时针（负方向）一种。可以参考下文图示以及文字描述：
从0 PI 的点开始顺时针数算是正方向的弧度，用正数表示（PI 表示 π \piπ）
从0 PI 的点开始逆时针数算是反方向的弧度，用负数表示

CGFloat radius = 40;
CGPoint startPoint = CGPointMake(50, 200);
CGPoint endPoint = CGPointMake(150, 200);
CGPoint centerPoint = CGPointMake(150 + radius, 200);

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addLineToPoint:endPoint];
[path addArcWithCenter:centerPoint radius:radius startAngle:M_PI endAngle:1.5 * M_PI clockwise:NO];

CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor blueColor].CGColor;

[self.view.layer addSublayer:layer];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

可以通过调整CAShapeLayer的更多属性，改变线条或者填充做出不同的动效
https://www.cnblogs.com/xianfeng-zhang/p/7743627.html

#import 
NS_ASSUME_NONNULL_BEGIN
CA_CLASS_AVAILABLE (10.6, 3.0, 9.0, 2.0)
@interface CAShapeLayer : CALayer

@property(nullable) CGPathRef path; //CGPathRef路径，不支持隐式动画
@property(nullable) CGColorRef fillColor; //填充颜色
@property(copy) NSString *fillRule; //填充规则（默认是非零法则） 齐偶原则
@property(nullable) CGColorRef strokeColor; //路径颜色
@property CGFloat strokeStart; //部分绘制[0-1]，开始值和结束值
@property CGFloat strokeEnd;
@property CGFloat lineWidth; //先宽
@property CGFloat miterLimit; //内角和外角距离
@property(copy) NSString *lineCap; //线端口类型
@property(copy) NSString *lineJoin; //线连接处类型
//绘制虚线路径
@property CGFloat lineDashPhase; //线型模板的起始位置
@property(nullable, copy) NSArray *lineDashPattern; //线型模板 数组实线和虚线循环

@end

/* `fillRule' values. */
CA_EXTERN NSString *const kCAFillRuleNonZero    //非零
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
CA_EXTERN NSString *const kCAFillRuleEvenOdd    //齐偶
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);

/* `lineJoin' values. */
CA_EXTERN NSString *const kCALineJoinMiter
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
CA_EXTERN NSString *const kCALineJoinRound
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
CA_EXTERN NSString *const kCALineJoinBevel
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);

/* `lineCap' values. */
CA_EXTERN NSString *const kCALineCapButt
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
CA_EXTERN NSString *const kCALineCapRound
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
CA_EXTERN NSString *const kCALineCapSquare
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);

NS_ASSUME_NONNULL_END

------------------

- (void)starShowCAShapeLayer{
    UIBezierPath *bezi = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)];
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    layer.path = bezi.CGPath;
    layer.strokeColor = [UIColor redColor].CGColor;
    layer.fillColor = [UIColor whiteColor].CGColor;
    layer.lineWidth = 15;
    layer.strokeStart = 0;
    layer.strokeEnd = 0;
    layer.lineDashPattern = @[@4,@4];
    [self.showView.layer addSublayer:layer];
    self.layer = layer;
    
    self.waterTimer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(waterAction) userInfo:nil repeats:YES];
}
- (void)waterAction{
    if (self.layer.strokeEnd >=1) {
        [self.waterTimer invalidate];
        self.waterTimer = nil;
        return;
    }else{
        self.layer.strokeEnd +=0.02;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

CAGradientLayer

一般给UIView添加CAGradientLayer，来实现渐变效果

UIView *gradientView = [[UIView alloc] init];
CAGradientLayer *gradientLayer = [CAGradientLayer alloc] init];
// 设置gradientlayer的各个属性
[gradientView.layer addSublayer:gradientLayer];
1
2
3
4

CAGradientLayer：渐变层在其背景色上绘制颜色渐变，即是填充层的形状（包括圆角），通俗的来说就是根据shape形状来绘制渐变色。

• CAGradientLayer可以用于处理渐变色的层结构，可以用作PNG的遮罩效果
• CAGradientLayer和CAShapeLayer可以配合使用做简单的动画
• CAGradientLayer的坐标系统是从（0，0）到（1，1）绘制的矩形，如果frame值的size不为正方形的话，坐标系统会被拉伸
• CAGradientLayer的startPoint和endPoint决定了颜色的绘制方向
• CAGradientLayer的颜色分割点时以0到1的比例来计算的

CAGradientLayer继承CALayer，所以CAGradientLayer可以使用其父类CALayer所有开放的属性。

1. colors
设置渐变的颜色，可以添加多个颜色，但颜色属于CGColorRef类，所以必须加CGColor，而且前面还要加(id)。

@property(nullable, copy) NSArray *colors;

gradient.colors = @[(id)[UIColor blackColor].CGColor,(id)[UIColor whiteColor].CGColor];
1
2
3

2. locations
渐变颜色的区间分布，locations的数组长度和color可以一致，也可以不一致，默认值是nil，nil表示平均分布。locations用于控制渐变发生的位置，如gradient.locations = @[@(0.5f), @(1.0f)]; 表示渐变范围是[0.5, 1]。

@property(nullable, copy) NSArray<NSNumber *> *locations;
1

3. startPoint和endPoint

startPoint（渐变的起始方向）与endPoint（渐变的结束方向），以矩形的四个角为基础的，（0，0）为左上角、（1，0）为右上角、（0，1）为左下角、（1，1）为右下角，默认是值是（0.5，0）和（0.5，1）

@property CGPoint startPoint;
@property CGPoint endPoint;

//渐变从左下角开始
gradient.startPoint = CGPointMake(0, 1);
//渐变到右上角结束
gradient.endPoint = CGPointMake(1, 0);
1
2
3
4
5
6
7

CAGradientLayer的坐标系统和屏幕的坐标系统是一致的：

4. type
默认值是kCAGradientLayerAxial，表示按像素均匀变化。除了默认值也无其它选项。

@property(copy) NSString *type;
1

CAGradientLayer和CAShapeLayer配合使用

https://www.jianshu.com/p/3ed9ac2ec4fa
https://www.cnblogs.com/YouXianMing/p/3793913.html

CAGradientLayer隐式动画

https://www.jianshu.com/p/9d492373c80f
当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果，而这些属性称为Animatable Properties(可动画属性)

列举几个常见的Animatable Properties：

• bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画。
• backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画。
• position：用于设置CALayer的位置。修改这个属性会产生平移动画。

[CATransaction begin];
[CAT
1