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(0, 0, 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(0, 0, 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-2*_lineWidth, self.frame.size.height-_lineWidth*2);
//        centerImgView.center=self.center;centerImgView.layer.cornerRadius=(self.frame.size.width+_lineWidth)/2;centerImgView.clipsToBounds=YES;[self.layer addSublayer:centerImgView.layer];}[self start];
}- (void)drawBackgroundCircle:(BOOL) animationing {//贝塞尔曲线 0度是在十字右边方向   -M_PI/2相当于在十字上边方向CGFloat startAngle = - ((float)M_PI / 2); // 90 Degrees//
    CGFloat endAngle = (2 * (float)M_PI) + - ((float)M_PI / 8);;CGPoint center = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);CGFloat radius = (self.bounds.size.width - _lineWidth)/2;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 * 2*(float)M_PI) + startAngle;}else{endAngle = (0.1 * 2*(float)M_PI) + startAngle;}[processPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];[trackPath addArcWithCenter:center radius:radius startAngle:0 endAngle:2*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 = 1;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(100, 100, 70, 70)];//设置轨道颜色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)(5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{//视图隐藏
//        [view hide];
    });}- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated.
}@end

效果:

转载于:https://www.cnblogs.com/5ishare/p/4810437.html

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

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

相关文章

CM3计算板EC20模组拨号上网

1、安装 ppp 安装ppp&#xff1a;sudo apt-get install ppp 2、配置路由 查看路由和网卡 ifconfig ; route -n增加路由设备&#xff1a; sudo route add default dev ppp0 3、执行拨号脚本 进入linux-ppp-scripts 文件下&#xff1a;sudo ./quectel-pppd.sh /dev/ttyUSB3 …

[react] 你是如何划分React组件的?

[react] 你是如何划分React组件的&#xff1f; 可复用的功能 可复用的页面 当你在多个地方写一样或类似的代码时&#xff0c;就该考虑封装组件 个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录…

VLC播放器安装

From: http://blog.csdn.net/lqrensn/article/details/6179171 想边上班边听歌&#xff0c;可惜办公电脑有点差&#xff0c;所以装的是fedora 10.又用的是代理上网&#xff0c;网速严重受限&#xff0c;同事传了些mp3,居然听不了&#xff0c;没mp3解码器&#xff0c;晕倒。。…

Linux安装配置apache

1.获取软件&#xff1a; http://httpd.apache.org/ httpd-2.2.21.tar.gz wget http://apache.fayea.com//httpd/httpd-2.2.31.tar.gz 2.安装步骤&#xff1a; 解压源文件&#xff1a; 1 tar zvxf httpd-2.2.21.tar.gz 2 cd httpd-2.2.213 ./configure --prefix/usr/local/apac…

CM3计算板I/O编程

1、CM3计算板的IO资源 CM3支持的I/O管脚数为54个&#xff0c;每个管脚包括一个或多个复用功能&#xff0c;分别位于ALT0~ALT5&#xff0c;如下表&#xff1a; 2、设备树启用IO外设的方式 通过在/boot/config.txt 文件中描述IO行为&#xff0c;可以在系统启动时&#xff0c;初…

Apt-get使用指南

From: http://bbs.chinaunix.net/thread-2115236-1-1.html 命令 下面将要介绍的所有命令都需要sudo&#xff01;使用时请将“packagename”和“string”替换成您想要安装或者查找的程序。 apt-get update——在修改/etc/apt/sources.list或者/etc/apt/preferences之後运行…

[react] 在JSX中如何写注释?

[react] 在JSX中如何写注释&#xff1f; {/* A JSX comment */} 个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

重构:改善既有代码的设计(评注版) 评注者序

重构&#xff1a;改善既有代码的设计&#xff08;评注版&#xff09; 评注者序评注者序近十年来&#xff0c;若要讨论如何改进代码的质量&#xff0c;很难绕过Martin Fowler的这本经典著作。这本书已经影响了几代程序员&#xff0c;或许会持续不断地影响未来的一批程序员。遗憾…

BusyBox编译配置

1. 下载Busybox tar包&#xff0c;如busybox-1.23.0.tar.bz2。 官网&#xff1a;http://www.busybox.net/ 2. make distclean&#xff1b;清除原有配置 make menuconfig; 配置命令选项 make&#xff1b;编译 make install&#xff1b;安装编译文件&#xff0c;主要为bin, s…

python类型转换、数值操作

From: http://canofy.iteye.com/blog/298263 python类型转换 Java代码 函数 描述 int(x [,base ]) 将x转换为一个整数 long(x [,base ]) 将x转换为一个长整数 float(x ) 将x转换到一个浮点数 complex(real [,imag ]…

串口字符传输时间计算

1、字符时间 串口字符发送时间可根据串口参数配置计算&#xff0c;计算示例如下&#xff1a; e.g.1. 固定起始位1位&#xff0c;数据位8位&#xff0c;奇校验位1位&#xff0c;停止位1位&#xff0c;波特率9600bps&#xff0c;计算单个字符传输时间为&#xff1a; &#xff…

[react] React什么是有状态组件?

[react] React什么是有状态组件&#xff1f; 有状态的组件总是一个类组件,并且拥有一个在构造函数中初始化的state 个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题…

Bloomfilter 的应用场景

Bloomfilter 一般用于检测某元素是否在集合中存在&#xff0c;它的目标是解决在大数据量情况的元素判定。它的优点是它提供的数据结构具有非常高的时间查询和空间存储效率&#xff0c;缺点是可能造成误判&#xff0c;就是说&#xff0c;它判定某元素在集合中&#xff0c;但是其…

运放搭建的窗口电压比较器电路

1、窗口比较器 设输入电压为Vin&#xff0c;输入范围为&#xff08;-V1~V2&#xff09;&#xff0c;要求设计电路识别输入是否在给定的电压区间&#xff08;Vd~Vt&#xff09;。 可以设计为一个电压窗口比较电路&#xff0c;窗口电压VwVsδ&#xff0c;Vs为窗口基准电压&…

ImageView倒影效果

先看下效果图&#xff1a;import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.LinearGradient; import android.graphi…

在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别

转自&#xff1a;http://blog.csdn.net/zoohouse/article/details/7552594 概述&#xff1a; “刷新”是在你现有页面的基础上&#xff0c;检查网页是否有更新的内容。在检查时&#xff0c;会保留之前的一些变量的值&#xff0c;因此有可能会造成刷新后网页出现错误&#xff0c…

[react] 为什么建议Fragment包裹元素?它的简写是什么?

[react] 为什么建议Fragment包裹元素&#xff1f;它的简写是什么&#xff1f; 为一个组件添加多个元素,可以讲你的子组件列表添加到一个分组中(<></>),并且不会再DOM增加额外节点 个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&…

uboot开机logo

From: http://blog.chinaunix.net/uid-9688646-id-1998453.html 参考资料&#xff1a; 【1】U-boot开机logo的制作方法&#xff08;Tekkaman Ninja&#xff09;&#xff1a;http://blog.chinaunix.net/u1/34474/showart_2085233.html 【2】U-Boot中的Splash Screen&#xff0…

USB连接TF卡 SD卡硬件电路

1、电路芯片 TF卡芯片选择&#xff1a;GL823K。USB2.0 SD/MMC闪存读卡器单芯片。支持USB2.0高速传输&#xff0c;并符合通用串行总线规范。 它的引脚设计适合卡插口提供更容易的PCB布局。 TF卡防静电芯片&#xff1a;SMF05C。 2、电路 分享实际项目中用到的接口电路&#…

R语言-Kindle特价书爬榜示例 输出HTML小技巧

20170209更新&#xff1a; 根据回复提示&#xff0c;rvest包更新&#xff0c;原用函数html作废&#xff0c;需改用read_html 并后续amazon网页改版等 因此此文章代码失效&#xff01;各位可看评论内容了解详情 等以后有空再重写一遍代码&#xff0c;抱歉。果然代码还是放在gith…