封装了一个iOS对号成功动画

基本思绪实在很简单，就是通过贝塞尔曲线画出路径，然后
利用CAShapeLayer 渲染路径，然后通过strokeEnd 动画实现
路径的结果，这里注意，这个过程中过碰到过一个题目，就是
对号动画完成之后，整个对号不见了，后来颠末仔细观察，发现，是自己初始化 checkLayer的时候，将strokeEnd属设置为0了，注意，虽然我们是通过"strokeEnd"设置的动画，但是我们进行动画之后，并不会真正的改变layer.strokeEnd属性的值，所以我们初始化对号layer的时候,照旧要将strokeEnd设置为1
下面贴出所有代码

1. //
2. //  ViewController.m
3. //  LBProgressCircle
4. //
5. //  Created by mac on 2024/5/31.
6. //
8. #import "ViewController.h"
10. @interface ViewController ()
12. @property (nonatomic, strong) UIView *loadingView;
14. //进度圆环曲线
15. @property (nonatomic, strong) UIBezierPath *circlePath;
16. //整个圆环
17. @property (nonatomic, strong) CAShapeLayer *wholeCircleLayer;
18. //进度圆环layer
19. @property (nonatomic, strong) CAShapeLayer *progressLayer;
20. //对号圆环
21. @property (nonatomic, strong) CAShapeLayer *checkRoundLayer;
22. //对号layer
23. @property (nonatomic, strong) CAShapeLayer *checkLayer;
25. @end
27. @implementation ViewController
29. - (void)viewDidLoad {
30.     [super viewDidLoad];
31.    
32.     self.view.backgroundColor = [UIColor lightGrayColor];
33.     [self.view addSubview:self.loadingView];
34.     [self.loadingView.layer addSublayer:self.wholeCircleLayer];
35.     [self.loadingView.layer addSublayer:self.progressLayer];
36.     [self.loadingView.layer addSublayer:self.checkLayer];
37.     [self.loadingView.layer addSublayer:self.checkRoundLayer];
38.     [self handle];
39.    
40.     // Do any additional setup after loading the view.
41. }
43. - (void)handle
44. {
45.     self.progressLayer.strokeEnd = 0;
46.     __block CGFloat second = 0;
47.     NSTimer *time = [NSTimer scheduledTimerWithTimeInterval:0.1 repeats:YES block:^(NSTimer * _Nonnull timer) {
48.         if (second >= 1) {
49.             return;
50.         }
51.         second += 0.1;
52.         [self updateProgress:second];
53.     }];
54. }
56. - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
57. {
58.     [self handle];
59. }
61. - (void)updateProgress:(CGFloat)progress
62. {
63.     self.progressLayer.strokeEnd = progress;
64.     if (progress >= 1) {
65.         [self showProgressCirce:NO];
66.         [self.checkRoundLayer addAnimation:[self animation] forKey:@"strokeEnd"];
67.         dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
68.             self.checkLayer.hidden = NO;
69.             [self.checkLayer addAnimation:[self animation] forKey:@"strokeEnd"];
70.         });
71.     } else {
72.         self.checkLayer.hidden = YES;
73.         [self showProgressCirce:YES];
74.     }
75. }
77. - (void)showProgressCirce:(BOOL)showCircle
78. {
79.     self.checkRoundLayer.hidden = showCircle;
80.     self.wholeCircleLayer.hidden = !showCircle;
81.     self.progressLayer.hidden = !showCircle;
82. }
84. #pragma mark - lazy load
86. - (UIView *)loadingView
87. {
88.     if (!_loadingView) {
89.         _loadingView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
90.         _loadingView.backgroundColor = [UIColor blackColor];
91.     }
92.     return _loadingView;
93. }
95. - (UIBezierPath *)circlePath
96. {
97.     if (!_circlePath) {
98.         _circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(27.5, 44) radius:19 startAngle:-M_PI_2 endAngle:-M_PI_2 + M_PI * 2 clockwise:YES];
99.         _circlePath.lineCapStyle = kCGLineCapRound;
100.         _circlePath.lineJoinStyle = kCGLineJoinRound;
101.     }
102.     return _circlePath;
103. }
105. - (CAShapeLayer *)progressLayer
106. {
107.     if (!_progressLayer) {
108.         _progressLayer = [[CAShapeLayer alloc] init];
109.         _progressLayer.path = self.circlePath.CGPath;
110.         _progressLayer.strokeStart = 0;
111.         _progressLayer.strokeEnd = 0;
112.         _progressLayer.strokeColor = [UIColor redColor].CGColor;
113.         _progressLayer.fillColor = [UIColor clearColor].CGColor;
114.         _progressLayer.lineWidth = 2;
115.     }
116.     return _progressLayer;
117. }
119. - (CAShapeLayer *)wholeCircleLayer
120. {
121.     if (!_wholeCircleLayer) {
122.         _wholeCircleLayer = [[CAShapeLayer alloc] init];
123.         _wholeCircleLayer.path = self.circlePath.CGPath;
124.         _wholeCircleLayer.strokeStart = 0;
125.         _wholeCircleLayer.strokeEnd = 1;
126.         _wholeCircleLayer.strokeColor = [[UIColor redColor] colorWithAlphaComponent:0].CGColor;
127.         _wholeCircleLayer.fillColor = [UIColor clearColor].CGColor;
128.         _wholeCircleLayer.lineWidth = 2;
129.     }
130.     return _wholeCircleLayer;
131. }
133. - (CAShapeLayer *)checkRoundLayer
134. {
135.     if (!_checkRoundLayer) {
136.         UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(27.5, 44) radius:16 startAngle:- M_PI_2 endAngle:- M_PI_2 + M_PI * 2 clockwise:YES];
137.         path.lineCapStyle = kCGLineCapRound;
138.         path.lineJoinStyle = kCGLineJoinRound;
139.         _checkRoundLayer = [[CAShapeLayer alloc] init];
140.         _checkRoundLayer.path = path.CGPath;
141.         _checkRoundLayer.strokeColor = [UIColor whiteColor].CGColor;
142.         _checkRoundLayer.fillColor = [UIColor clearColor].CGColor;
143.         _checkRoundLayer.hidden = YES;
144.         _checkRoundLayer.lineWidth = 2;
145.     }
146.     return _checkRoundLayer;
147. }
149. - (CAShapeLayer *)checkLayer
150. {
151.     if (!_checkLayer) {
152.         UIBezierPath *path = [[UIBezierPath alloc] init];
153.         path.lineCapStyle = kCGLineCapRound;
154.         path.lineJoinStyle = kCGLineJoinRound;
155.         [path moveToPoint:CGPointMake(19, 43)];
156.         CGPoint pl = CGPointMake(25, 49);
157.         [path addLineToPoint:pl];
158.         CGPoint p2 = CGPointMake(36, 39);
159.         [path addLineToPoint:p2];
160.         _checkLayer = [[CAShapeLayer alloc] init];
161.         _checkLayer.fillColor = [UIColor clearColor].CGColor;
162.         //线条颜色
163.         _checkLayer.strokeColor = [UIColor whiteColor].CGColor;
164.         _checkLayer.lineWidth = 2;
165.         _checkLayer.path = path.CGPath;
166.         _checkLayer.hidden = YES;
167.     }
168.     return _checkLayer;
169. }
171. - (CABasicAnimation *)animation
172. {
173.     CABasicAnimation *checkAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
174.     checkAnimation.duration = 0.5;
175.     checkAnimation.fromValue = @(0);
176.     checkAnimation.toValue = @(1);
177.     return checkAnimation;
178. }
180. @end

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。