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 ...
随机推荐
- 基于Quartz.net的远程任务管理系统 二
紧接着上一篇.上一篇讲了表设计与ADO.Net基本操作.接下来,就来说说怎么动态来添加Job任务及清理过期任务吧. 首先,先理一下思路,做事情要先把思绪理清了,然后下手就快准狠了.下面是我的思路:做一 ...
- sqlserver常用函数
1.字符串函数 --ascii函数,返回字符串最左侧字符的ascii码值 SELECT ASCII('dsd') AS asciistr --ascii代码转换函数,返回指定ascii值对应的字符 ) ...
- html开发基础
1 Doctype Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 有和无的区别 BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode].混杂 ...
- AJPFX平台介绍
AJPFX设立于英国,业务框架扩展到欧洲.美洲和亚洲,在新加坡设有专门的亚洲地区服务部门.AJPFX旨在以极具竞争力的交易成本,也就是银行间市场核心点差和低水平的手续费,使客户在交易中获取最大的利润空 ...
- GO学习笔记 - 数据类型转换
官方教程:https://tour.go-zh.org/basics/13 表达式 T(v) 将值 v 转换为类型 T . 一些关于数值的转换: var i int = 42 var f float6 ...
- Python3.5 学习七
心灵鸡汤 好书推荐:消费者行为学.围城.活着.盲井.三体.北京折叠 静态方法: @staticmethod #名义上归类管,和类没什么关系,只是引用用"." 在静态方法中,无法访问 ...
- Sphinx全文检索
全文检索 一.生活中的数据总体分为: 结构化数据:指具有固定格式或有限长度的数据,如数据库,元数据等. 非结构化数据:指没有固定格式或不定长的数据,如邮件,word文档等. 非结构化数据还有一种叫法: ...
- Spark Streaming初步使用以及工作原理详解
在大数据的各种框架中,hadoop无疑是大数据的主流,但是随着电商企业的发展,hadoop只适用于一些离线数据的处理,无法应对一些实时数据的处理分析,我们需要一些实时计算框架来分析数据.因此出现了很多 ...
- B - 영어(字符串)
原题链接 B - 영어 Time Limit:1000MS Memory Limit:131072KB 64bit IO Format:%lld & %llu Submit S ...
- A - 确定比赛名次(拓扑)
点击打开链接 有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后依次排名,但现在裁判委员会不能直接获得每个队的比 ...