IOS贝塞尔曲线圆形进度条和加载动画
做项目让做一个加载动画,一个圈圈在转中间加一个图片,网上有好多demo,这里我也自己写了一个,中间的图片可加可不加。其中主要用到贝塞尔曲线。UIBezierPath是对CGContextRef的进一步封装,不多说直接上代码:
#import <UIKit/UIKit.h> @interface CircleLoader : UIView //进度颜色 @property(nonatomic, retain) UIColor* progressTintColor ; //轨道颜色 @property(nonatomic, retain) UIColor* trackTintColor ; //轨道宽度 @property (nonatomic,assign) float lineWidth; //中间图片 @property (nonatomic,strong) UIImage *centerImage; //进度 @property (nonatomic,assign) float progressValue; //提示标题 @property (nonatomic,strong) NSString *promptTitle; //开启动画 @property (nonatomic,assign) BOOL animationing; //隐藏消失 - (void)hide; @end
#import "CircleLoader.h" @interface CircleLoader () @property (nonatomic,strong) CAShapeLayer *trackLayer; @property (nonatomic,strong) CAShapeLayer *progressLayer; @end @implementation CircleLoader - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.backgroundColor=[UIColor clearColor]; } return self; } -(void)drawRect:(CGRect)rect { [super drawRect:rect]; _trackLayer=[CAShapeLayer layer]; _trackLayer.frame=CGRectMake(, , self.frame.size.width, self.frame.size.height); _trackLayer.lineWidth=_lineWidth; _trackLayer.strokeColor=_trackTintColor.CGColor; _trackLayer.fillColor = self.backgroundColor.CGColor; _trackLayer.lineCap = kCALineCapRound; [self.layer addSublayer:_trackLayer]; _progressLayer=[CAShapeLayer layer]; _progressLayer.frame=CGRectMake(, , self.frame.size.width, self.frame.size.height); _progressLayer.lineWidth=_lineWidth; _progressLayer.strokeColor=_progressTintColor.CGColor; _progressLayer.fillColor = self.backgroundColor.CGColor; _progressLayer.lineCap = kCALineCapRound; [self.layer addSublayer:_progressLayer]; if (_centerImage!=nil) { UIImageView *centerImgView=[[UIImageView alloc]initWithImage:_centerImage]; centerImgView.frame=CGRectMake(_lineWidth, _lineWidth, self.frame.size.width-*_lineWidth, self.frame.size.height-_lineWidth*); // centerImgView.center=self.center; centerImgView.layer.cornerRadius=(self.frame.size.width+_lineWidth)/; centerImgView.clipsToBounds=YES; [self.layer addSublayer:centerImgView.layer]; } [self start]; } - (void)drawBackgroundCircle:(BOOL) animationing { //贝塞尔曲线 0度是在十字右边方向 -M_PI/2相当于在十字上边方向 CGFloat startAngle = - ((); // 90 Degrees // CGFloat endAngle = ( * ();; CGPoint center = CGPointMake(self.bounds.size.width/, self.bounds.size.height/); CGFloat radius = (self.bounds.size.width - _lineWidth)/; UIBezierPath *processPath = [UIBezierPath bezierPath]; // processPath.lineWidth=_lineWidth; UIBezierPath *trackPath = [UIBezierPath bezierPath]; // trackPath.lineWidth=_lineWidth; //--------------------------------------- // Make end angle to 90% of the progress //--------------------------------------- if (!animationing) { endAngle = (_progressValue * *(float)M_PI) + startAngle; } else { endAngle = (*(float)M_PI) + startAngle; } [processPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES]; [trackPath addArcWithCenter:center radius:radius startAngle: endAngle:*M_PI clockwise:YES]; _progressLayer.path = processPath.CGPath; _trackLayer.path=trackPath.CGPath; } - (void)start { [self drawBackgroundCircle:_animationing]; if (_animationing) { CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI * 2.0]; rotationAnimation.duration = ; rotationAnimation.cumulative = YES; rotationAnimation.repeatCount = HUGE_VALF; [_progressLayer addAnimation:rotationAnimation forKey:@"rotationAnimation"]; } } - (void)hide { [_progressLayer removeAllAnimations]; [self removeFromSuperview]; } @end
调用:
#import "ViewController.h" #import "CircleLoader.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. //设置视图大小 CircleLoader *view=[[CircleLoader alloc]initWithFrame:CGRectMake(, , , )]; //设置轨道颜色 view.trackTintColor=[UIColor redColor]; //设置进度条颜色 view.progressTintColor=[UIColor greenColor]; //设置轨道宽度 view.lineWidth=5.0; //设置进度 view.progressValue=0.7; //设置是否转到 YES进度不用设置 view.animationing=YES; //添加中间图片 不设置则不显示 view.centerImage=[UIImage imageNamed:@"yzp_loading"]; //添加视图 [self.view addSubview:view]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)( * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ //视图隐藏 // [view hide]; }); } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
效果:
IOS贝塞尔曲线圆形进度条和加载动画的更多相关文章
- 超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
- 用HTML、CSS、JS制作圆形进度条(无动画效果)
逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果: 然后我们再用一个比底圆小的圆去覆盖这个大 ...
- CSS3 Loading进度条加载动画特效
在线演示 本地下载
- CSS3彩色进度条加载动画 带进度百分比
在线演示 本地下载
- 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画
通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下CAShapeLayer1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性2 ...
- 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【装载】
初次接触CAShapeLayer和贝塞尔曲线,看了下极客学院的视频.对初学者来说感觉还不错.今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下C ...
- iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- [iOS]圆形进度条及计时功能
平时用战网安全令的时候很喜欢圆形倒计时的效果,然后简单看了一下Android的圆形进度条,后来又写了一个IOS的.整体界面参照IOS系统的倒计时功能,顺便熟悉了UIPickerView的一些特性的实现 ...
- IOS 圆形进度条
// // CCProgressView.h // Demo // // Created by leao on 2017/8/7. // Copyright © 2017年 zaodao. All r ...
随机推荐
- PostSharp 结合 log4net 自动记录日志
环境: VS 2012 PostSharp-4.1.28 (下载地址)https://visualstudiogallery.msdn.microsoft.com/a058d5d3-e654-43f ...
- 【Dnc.Api.Throttle】适用于.Net Core WebApi接口限流框架
Dnc.Api.Throttle 适用于Dot Net Core的WebApi接口限流框架 使用Dnc.Api.Throttle可以使您轻松实现WebApi接口的限流管理.Dnc.Api.Thr ...
- 「WC2006」水管局长
题目链接 戳我 \(Solution\) 这道题实际上是维护一个最小生成树,因为正的搞不好搞,所以反着搞会比较好,现将没有没删掉的边留下来生成一颗最小生成树,再加边就好了,现在\(LCT\) 来看看怎 ...
- 八.linux系统文件属性知识
1.文件属性权限是12位,现在只看9位,其中每3个一组,为:属主权限.属组权限.其他权限,其中r可读,w可写,x可执行,如图: 2.文件属性之软硬链接 linux系统中有两种链接,为硬链接(ln) ...
- “全栈2019”Java多线程第十三章:线程组ThreadGroup详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- docker启动时报错
docker安装成功后,启动时报错. 1.后来排查后发现yum install docker安装的是从test存储库中安装的. 后来我指定了特定的版本后,而且从stable存储库安装的,以后再启动就好 ...
- LOJ#2882. 「JOISC 2014 Day4」两个人的星座(计算几何)
题面 传送门 题解 我们发现如果两个三角形相离,那么这两个三角形一定存在两条公切线 那么我们可以\(O(n^2)\)枚举其中一条公切线,然后可以暴力\(O(n^3)\)计算 怎么优化呢?我们可以枚举一 ...
- ELK安装成windows服务
一.Elasticsearch安装成windows服务 我的es所在路径为:D:\ELK5.5.0\elasticsearch-5.5.0 Java 安装目录为:C:\Program Files\Ja ...
- 记一名软件实施自学转Java开发,附学习计划
2015年毕业到现在已经3年了,而我转型开发已经有一年的时间了.写这篇文章除了记录,主要还是想分享一些经历给想要转型开发的同学们,不要走那些我走过的弯路. 2015年入职了第一家公司,当时是做的分销系 ...
- day03 --class --homework
'''# >>>>>>2 :,有字符串s = "123a4b5c"#>>>>>^ 1: # 1)通过对s切片形成新 ...