封装了一个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
相关推荐
2501_915909064 小时前
手机崩溃日志导出的工程化体系,从系统级诊断到应用行为分析的多工具协同方法
android·ios·智能手机·小程序·uni-app·iphone·webview
无意feel5 小时前
MacOS 安装neofetch cmatrix lolcat
macos·数字雨·彩虹特效
KevinShi_BJ7 小时前
MacOS 上安装 Docker 和启动 LangBot
macos
2501_915106328 小时前
App HTTPS 抓包实战解析,从代理调试到真实网络流量观察的完整抓包思路
网络协议·http·ios·小程序·https·uni-app·iphone
ricky_fan9 小时前
(25年12月)claude code报错:might not be available in your country
macos·bash
要站在顶端9 小时前
iOS自动化测试全流程教程(基于WebDriverAgent+go-ios)
开发语言·ios·golang
2501_916008899 小时前
深入理解 iPhone 文件管理,从沙盒结构到开发调试的多工具协同实践
android·ios·小程序·https·uni-app·iphone·webview
james bid9 小时前
MacBook Pro 2015 上 XUbuntu 24.04 启用 eGPU (GeForce GTX 1080 Ti) 和核显黑屏问题解决
linux·ubuntu·macos·cuda·egpu
私人珍藏库10 小时前
[Mac] Mac风扇控制软件 iFan V1.1.1
macos
腾讯云qcloud075510 小时前
腾讯位置商业授权iOS 轨迹SDK
macos·ios·cocoa