封装了一个iOS环形加载动画和成功对号效果

这里要注意一个地方,如果我们这里不设置

_checkLayer.fillColor = [UIColor clearColor].CGColor;

的话,就会造成一个后果,就是,从七点到终点和走过的line中间的地方会有黑色,所以这里要特别注意,fillColor 设置成clearcolor

如果不设置的话,效果就是下面的样子

代码在这里

复制代码
//
//  LBLoadingCheckView.m
//  TEXT
//
//  Created by mac on 2024/5/22.
//  Copyright © 2024 刘博. All rights reserved.
//

#import "LBLoadingCheckView.h"

@interface LBLoadingCheckView ()

@property (nonatomic, strong) CAShapeLayer *progressLayer;

@property (nonatomic, strong) UIView *checkView;

@property (nonatomic, strong) CAShapeLayer *checkLayer;

@property (nonatomic, strong) CABasicAnimation *animation;

@end


@implementation LBLoadingCheckView

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setUpUI];
    }
    return self;
}

- (void)setUpUI
{
    self.frame = CGRectMake(0, 0, 37, 47);
    self.layer.masksToBounds = YES;
    self.layer.cornerRadius = 4;
    self.backgroundColor = [UIColor blackColor];
    [self.layer addSublayer:self.progressLayer];
    [self addSubview:self.checkView];
    [self.checkView.layer addSublayer:self.checkLayer];
}

- (void)showProgress:(CGFloat)progress
{
    self.progressLayer.strokeEnd = progress;
    if (progress >= 0.99) {
        self.progressLayer.hidden = YES;
        self.checkView.hidden = NO;
        [self.checkLayer addAnimation:self.animation forKey:@"strokeEnd"];
    }
}

#pragma mark - lazy load

- (CAShapeLayer *)progressLayer
{
    if (!_progressLayer) {
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(18.25, 30) radius:11 startAngle:-M_PI_2 endAngle:-M_PI_2 + M_PI * 2 clockwise:YES];
        _progressLayer = [[CAShapeLayer alloc] init];
        _progressLayer.strokeColor = [UIColor whiteColor].CGColor;
        _progressLayer.fillColor = [UIColor clearColor].CGColor;
        _progressLayer.lineWidth = 2;
        _progressLayer.frame = CGRectMake(0, 0, 32.5, 43);
        _progressLayer.path = path.CGPath;
        _progressLayer.strokeStart = 0;
        _progressLayer.strokeEnd = 1;
    }
    return _progressLayer;
}

- (UIView *)checkView
{
    if (!_checkView) {
        _checkView = [[UIView alloc] initWithFrame:CGRectMake(10, 20, 20, 20)];
        _checkView.backgroundColor = [UIColor whiteColor];
        _checkView.layer.masksToBounds = YES;
        _checkView.layer.cornerRadius = 10;
        _checkView.hidden = YES;
        _checkView.backgroundColor = [UIColor greenColor];
    }
    return _checkView;
}

- (CAShapeLayer *)checkLayer
{
    if (!_checkLayer) {
        UIBezierPath *path = [[UIBezierPath alloc] init];
        path.lineCapStyle = kCGLineCapRound;
        path.lineJoinStyle = kCGLineJoinRound;
        [path moveToPoint:CGPointMake(5, 11)];
        CGPoint pl = CGPointMake(9, 14);
        [path addLineToPoint:pl];
        
        CGPoint p2 = CGPointMake(15, 6);
        [path addLineToPoint:p2];
        _checkLayer = [[CAShapeLayer alloc] init];
        _checkLayer.fillColor = [UIColor clearColor].CGColor;
        _checkLayer.strokeColor = [UIColor blackColor].CGColor;
        _checkLayer.lineWidth = 2;
        _checkLayer.path = path.CGPath;
    }
    return _checkLayer;
}

- (CABasicAnimation *)animation
{
    if (!_animation) {
        _animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        _animation.fromValue = @(0);
        _animation.toValue = @(1);
        _animation.duration = 0.5;
    }
    return _animation;
}

@end
相关推荐
生而为虫5 分钟前
Claude Code 最新版安装教程(Windows/Mac/Linux 全平台) 面向普通用户的 Claude Code 安装与模型接入指南
linux·windows·macos
懋学的前端攻城狮2 小时前
iOS 列表性能优化实战:从 45fps 到 60fps 的蜕变
ios·性能优化·ui kit
斯班奇的好朋友阿法法2 小时前
鸿蒙 vs iOS vs 微信小程序:开发平台全面对比
ios·微信小程序·harmonyos
李老师的Java笔记3 小时前
如何解决Mac升级完nodejs没有生效的问题?
macos
开开心心_Every3 小时前
轻量级PDF阅读器,仅几M大小打开秒开
linux·运维·服务器·安全·macos·pdf·phpstorm
Chengbei113 小时前
轻量化 Web 安全日志分析神器 星川智盾日志威胁检测、地理溯源、MITRE ATT&CK 映射,支持 Windows/macOS/Linux
前端·人工智能·安全·web安全·macos·系统安全·安全架构
生而为虫3 小时前
在VScode中使用Claude Code agent并配置模型(仅mac电脑实际操作,windows电脑未实际操作如有问题可留言)
windows·vscode·macos
大飞记Python4 小时前
刚从 Win 转 Mac?鼠标滚轮反向、触控板乱跑、第三方鼠标卡顿——这一篇就够了
macos·计算机外设·mac鼠标
国科安芯16 小时前
核电站仪控与监测系统中抗辐射 MCU 芯片应用研究
单片机·嵌入式硬件·macos·无人机·cocos2d·核电站
@大迁世界17 小时前
14个你现在必须关闭的 iOS 26 设置,不然手机很快被它榨干
macos·ios·智能手机·objective-c·cocoa