封装了一个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
相关推荐
Digitally1 小时前
比较 iPhone:全面比较 iPhone 17 系列
android·ios·iphone
dyxal1 小时前
使用tree命令导出文件夹/文件的目录树( Windows 和 macOS)
windows·macos·策略模式
2501_915909065 小时前
HTTPS 错误解析,常见 HTTPS 抓包失败、443 端口错误与 iOS 抓包调试全攻略
android·网络协议·ios·小程序·https·uni-app·iphone
心灵宝贝13 小时前
Kite Compositor for Mac v2.1.2 安装教程|DMG文件安装步骤(Mac用户必看)
macos
他们都不看好你,偏偏你最不争气17 小时前
【iOS】UIViewController
开发语言·macos·ios·objective-c·cocoa
李游Leo19 小时前
Rust 开发环境安装与 crates.io 国内源配置(Windows / macOS / Linux 全流程)
windows·macos·rust
前端小超超21 小时前
如何配置capacitor 打包的ios app固定竖屏展示?
前端·ios·web app
CocoaKier21 小时前
AI让35岁程序员再次伟大
ios·微信小程序·aigc
库奇噜啦呼1 天前
【iOS】单例模式
ios·单例模式
2501_915909061 天前
苹果上架App软件全流程指南:iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传与审核技巧详解
android·ios·小程序·https·uni-app·iphone·webview