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

news2024/11/20 19:19:35

请添加图片描述

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

//
//  ViewController.m
//  LBProgressCircle
//
//  Created by mac on 2024/5/31.
//

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) UIView *loadingView;

//进度圆环曲线
@property (nonatomic, strong) UIBezierPath *circlePath;
//整个圆环
@property (nonatomic, strong) CAShapeLayer *wholeCircleLayer;
//进度圆环layer
@property (nonatomic, strong) CAShapeLayer *progressLayer;
//对号圆环
@property (nonatomic, strong) CAShapeLayer *checkRoundLayer;
//对号layer
@property (nonatomic, strong) CAShapeLayer *checkLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:self.loadingView];
    [self.loadingView.layer addSublayer:self.wholeCircleLayer];
    [self.loadingView.layer addSublayer:self.progressLayer];
    [self.loadingView.layer addSublayer:self.checkLayer];
    [self.loadingView.layer addSublayer:self.checkRoundLayer];
    [self handle];
    
    // Do any additional setup after loading the view.
}

- (void)handle
{
    self.progressLayer.strokeEnd = 0;
    __block CGFloat second = 0;
    NSTimer *time = [NSTimer scheduledTimerWithTimeInterval:0.1 repeats:YES block:^(NSTimer * _Nonnull timer) {
        if (second >= 1) {
            return;
        }
        second += 0.1;
        [self updateProgress:second];
    }];
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [self handle];
}

- (void)updateProgress:(CGFloat)progress
{
    self.progressLayer.strokeEnd = progress;
    if (progress >= 1) {
        [self showProgressCirce:NO];
        [self.checkRoundLayer addAnimation:[self animation] forKey:@"strokeEnd"];
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            self.checkLayer.hidden = NO;
            [self.checkLayer addAnimation:[self animation] forKey:@"strokeEnd"];
        });
    } else {
        self.checkLayer.hidden = YES;
        [self showProgressCirce:YES];
    }
}

- (void)showProgressCirce:(BOOL)showCircle
{
    self.checkRoundLayer.hidden = showCircle;
    self.wholeCircleLayer.hidden = !showCircle;
    self.progressLayer.hidden = !showCircle;
}

#pragma mark - lazy load

- (UIView *)loadingView
{
    if (!_loadingView) {
        _loadingView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
        _loadingView.backgroundColor = [UIColor blackColor];
    }
    return _loadingView;
}

- (UIBezierPath *)circlePath
{
    if (!_circlePath) {
        _circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(27.5, 44) radius:19 startAngle:-M_PI_2 endAngle:-M_PI_2 + M_PI * 2 clockwise:YES];
        _circlePath.lineCapStyle = kCGLineCapRound;
        _circlePath.lineJoinStyle = kCGLineJoinRound;
    }
    return _circlePath;
}

- (CAShapeLayer *)progressLayer
{
    if (!_progressLayer) {
        _progressLayer = [[CAShapeLayer alloc] init];
        _progressLayer.path = self.circlePath.CGPath;
        _progressLayer.strokeStart = 0;
        _progressLayer.strokeEnd = 0;
        _progressLayer.strokeColor = [UIColor redColor].CGColor;
        _progressLayer.fillColor = [UIColor clearColor].CGColor;
        _progressLayer.lineWidth = 2;
    }
    return _progressLayer;
}

- (CAShapeLayer *)wholeCircleLayer
{
    if (!_wholeCircleLayer) {
        _wholeCircleLayer = [[CAShapeLayer alloc] init];
        _wholeCircleLayer.path = self.circlePath.CGPath;
        _wholeCircleLayer.strokeStart = 0;
        _wholeCircleLayer.strokeEnd = 1;
        _wholeCircleLayer.strokeColor = [[UIColor redColor] colorWithAlphaComponent:0].CGColor;
        _wholeCircleLayer.fillColor = [UIColor clearColor].CGColor;
        _wholeCircleLayer.lineWidth = 2;
    }
    return _wholeCircleLayer;
}

- (CAShapeLayer *)checkRoundLayer
{
    if (!_checkRoundLayer) {
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(27.5, 44) radius:16 startAngle:- M_PI_2 endAngle:- M_PI_2 + M_PI * 2 clockwise:YES];
        path.lineCapStyle = kCGLineCapRound;
        path.lineJoinStyle = kCGLineJoinRound;
        _checkRoundLayer = [[CAShapeLayer alloc] init];
        _checkRoundLayer.path = path.CGPath;
        _checkRoundLayer.strokeColor = [UIColor whiteColor].CGColor;
        _checkRoundLayer.fillColor = [UIColor clearColor].CGColor;
        _checkRoundLayer.hidden = YES;
        _checkRoundLayer.lineWidth = 2;
    }
    return _checkRoundLayer;
}

- (CAShapeLayer *)checkLayer
{
    if (!_checkLayer) {
        UIBezierPath *path = [[UIBezierPath alloc] init];
        path.lineCapStyle = kCGLineCapRound;
        path.lineJoinStyle = kCGLineJoinRound;
        [path moveToPoint:CGPointMake(19, 43)];
        CGPoint pl = CGPointMake(25, 49);
        [path addLineToPoint:pl];
        CGPoint p2 = CGPointMake(36, 39);
        [path addLineToPoint:p2];
        _checkLayer = [[CAShapeLayer alloc] init];
        _checkLayer.fillColor = [UIColor clearColor].CGColor;
        //线条颜色
        _checkLayer.strokeColor = [UIColor whiteColor].CGColor;
        _checkLayer.lineWidth = 2;
        _checkLayer.path = path.CGPath;
        _checkLayer.hidden = YES;
    }
    return _checkLayer;
}

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

@end

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1720207.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微服务 feign-gateway

早期微服务跨集群调用 使用的是Eureka 和RestTemplate&#xff0c;这种写法虽然可以解决服务之间的调用问题 ,但是随着服务的增多&#xff0c;实例变动&#xff0c;早期的写法相当于把请求方式&#xff0c;请求地址&#xff0c;参数写死了&#xff0c;耦合度太高&#xff0c;参…

C#知识|通用数据访问类SQLHelper的编写

哈喽,你好啊,我是雷工! 前面学习了C#操作SQLServer数据库数据的增删改查, 《C#知识|通过ADO.NET实现应用程序对数据库的增、删、改操作。》 其中实现的过程中有很多代码是重复的,此时作为高阶程序员为了使代码更优雅,避免重复, 从而要考虑代码的复用技术,针对此案例中代…

【稳定检索】2024年心理学与现代化教育、媒体国际会议(PMEM 2024)

2024年心理学与现代化教育、媒体国际会议 2024 International Conference on Psychology and Modern Education and Media 【1】会议简介 2024年心理学与现代化教育、媒体国际会议即将召开&#xff0c;这是一场汇聚全球心理学、教育及媒体领域精英的学术盛宴。 本次会议将深入探…

23 vue3面试重难点复习:响应式原理、特点、8大生命钩子、data数据定义、组件、全家桶

vue作为用的最为广泛的当前热门框架&#xff0c;总结如下重难点核心知识&#xff1a; 1.vue特点是什么&#xff1f; 1.1优点 渐进式 vue本身只提供数据响应式&#xff0c;需要全局缓存用 vuex&#xff0c;需要路由用 vue-router 组件化 封装组件&#xff0c;利于复用 响应式数…

美颜插件技术详解:第三方美颜SDK的选择与集成教学

为了满足用户对美颜的需求&#xff0c;开发者们可以利用第三方美颜SDK来快速、高效地集成美颜功能到他们的应用中。今天&#xff0c;小编将详细解析美颜插件技术&#xff0c;介绍如何选择适合的第三方美颜SDK&#xff0c;并提供集成教学指南。 一、美颜插件技术概述 通过美颜…

轻兔推荐 —— MyIP

via&#xff1a;轻兔推荐 简介 一个功能全面的IP工具箱。轻松检查你的 IP&#xff0c;IP 地理位置&#xff0c;检查DNS泄漏&#xff0c;检查 WebRTC 连接&#xff0c;速度测试&#xff0c;ping 测试&#xff0c;MTR测试&#xff0c;检查网站可用性&#xff0c;查询 Whois 信…

QT系列教程(6) 几种标准对话框

几种标准对话框 本文介绍几种标准对话框&#xff0c;都是Qt封装好的&#xff0c;我们先创建一个界面&#xff0c;添加几个按钮&#xff0c;然后分别在几个按钮的回调函数里添加创建不同对话框的逻辑 颜色对话框 颜色对话框用来选择颜色&#xff0c;创建后会显示各种颜色和透明…

海外高清短视频:四川京之华锦信息技术公司

海外高清短视频&#xff1a;探索世界的新窗口 在数字化时代的浪潮下&#xff0c;海外高清短视频成为了人们探索世界、了解异国风情的新窗口。四川京之华锦信息技术公司这些短视频以其独特的视角、丰富的内容和高清的画质&#xff0c;吸引了无数观众的目光&#xff0c;让人们足…

收银系统源码--商超水果生鲜店收银硬件要怎么选择?

新零售时代&#xff0c;越来越多的商家开始明白&#xff0c;除了要做好店铺定位、店面装潢和商品的设定&#xff0c;还要选购最适合店铺运营需求的收银机和硬件&#xff0c;好的收银机和收银系统可以帮助商家做好收支统计、库存管理、人员配置。客户服务等工作。现在的智能收银…

大数据在金融行业的深度应用与未来展望

一、引言 随着信息技术的迅猛发展,大数据已经成为推动金融行业创新的重要力量。从精准营销、个性化服务到风险管理和产品创新,大数据的应用正在不断重塑金融行业的格局。本文将深入探讨大数据在金融行业的深度应用,分析其特征特点、解决方案以及面临的挑战与机遇,并展望其…

数据治理基础知识

文章目录 基本概念相关名词术语数据治理对象 基本概念 1&#xff09;从管理者视角看数据治理 数据治理是企业发展战略的组成部分&#xff0c;是指导整个集团进行数字化变革的基石&#xff0c;要将数据治理纳入企业的顶 层规划&#xff0c;各分/子公司、各业务部门都需要按照企…

【漏洞复现】电信网关配置管理系统 rewrite.php 文件上传漏洞

0x01 产品简介 中国电信集团有限公司(英文名称"China Telecom”、简称“"中国电信”)成立于2000年9月&#xff0c;是中国特大型国有通信企业、上海世博会全球合作伙伴。电信网关配置管理系统是一个用于管理和配置电信网络中网关设备的软件系统。它可以帮助网络管理员…

【教学类-60-01】彩色消划掉01(四个数字,X*Y宫格)

背景需求&#xff1a; &#x1f9e0;思维启蒙 - 小红书注意力训练小分享-彩色划消 训练孩子的视觉辨别能力、视觉稳定性、注意力分配额能力&#x1f440; 一起来试试吧&#xff5e; #分享学习方法 #注意力训练 #专注力训练#天津 #亲子时光 #孩子成长 #思维启蒙 #数学思维启蒙 …

容量为0多线程操作的SynchronousQueue(FIFO)

一:简介 SynchronousQueue是一个没有数据缓冲的BlockingQueue,生产者线程对其的插入操作put必须等待消费者的移除操作take。SynchronousQueue的优点在于其直接性和高效性,它实现了线程间的即时数据交换,无需中间缓存,确保了数据传输的实时性和准确性,同时,其灵活的阻塞机…

数字化前沿:Web3如何引领未来技术演进

在当今数字化时代&#xff0c;随着技术的不断发展和创新&#xff0c;Web3作为一种新兴的互联网范式&#xff0c;正逐渐成为数字化前沿的代表。Web3以其去中心化、加密安全的特性&#xff0c;正在引领着未来技术的演进&#xff0c;为全球范围内的科技创新带来了新的可能性和机遇…

中国BI步入增长大周期,腾讯云ChatBI加速AI+BI融合

过去十年&#xff0c;大数据技术的快速发展&#xff0c;让数据消费前进一大步&#xff0c;数据价值得到一定程度的挖掘与释放&#xff0c;真正开启了“用数”的大时代。但数据分析繁杂的技术栈、复杂的处理过程以及程式化的交互方式&#xff0c;让“数据消费”的门槛始终降不下…

论文笔记:Image Anaimation经典论文-运动关键点模型(Monkey-Net)

Monkey-Net&#xff08;MOviNg KEYpoints&#xff09; paper: https://arxiv.org/pdf/1812.08861, CVPR 2019 code: https://github.com/AliaksandrSiarohin/monkey-net/tree/master 相关工作 视频生成演变过程&#xff1a; spatio-temporal network: 如基于GAN网络的生成模…

探索重庆耶非凡科技:揭秘其背后的技术实力与市场布局

重庆耶非凡科技有限公司&#xff0c;作为重庆当地一家知名的综合性服务型企业&#xff0c;近年来在多个领域取得了显著的成绩。其业务范围广泛&#xff0c;不仅涵盖了传统的行业服务&#xff0c;还积极探索并实践了一系列创新项目&#xff0c;其中最为引人注目的便是选品师项目…

第100+9步 ChatGPT文献复现:ARIMA预测百日咳

基于WIN10的64位系统演示 一、写在前面 我们来继续换一篇文章来学习学习&#xff1a; 《BMC Public Health》杂志的2022年一篇题目为《ARIMA and ARIMA-ERNN models for prediction of pertussis incidence in mainland China from 2004 to 2021》文章的模拟数据做案例。 这…

C++之类(class)的三种成员修饰符(public、private、protected)总结

1、背景介绍 在C中&#xff0c;类&#xff08;class&#xff09;中成员的三种访问修饰符&#xff08;access specifiers&#xff09;用于控制类的成员&#xff08;属性和方法&#xff09;的访问权限。这些修饰符决定了类成员在类的外部和内部是否可以被访问。以下是这三种访问…