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
效果:
IOS贝塞尔曲线圆形进度条和加载动画相关推荐
- ios弧形进度条_IOS贝塞尔曲线圆形进度条和加载动画-阿里云开发者社区
做项目让做一个加载动画,一个圈圈在转中间加一个图片,网上有好多demo,这里我也自己写了一个,中间的图片可加可不加.其中主要用到贝塞尔曲线.UIBezierPath是对CGContextRef的进一步 ...
- css实现圆形进度条加载动画
这里我会把遇到这个需求时的实现过程和遇到的问题记录下来,如果只是要看最终实现结果可直接滑到底部看实现代码. 我们经常可以看到网上有一些圆形进度条跟随数字的变化慢慢变成一个圆,这个动画实际上可以通过纯c ...
- 超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
- 从零开始实现一个基于贝塞尔曲线的进度条动画
开发环境 Android Studio 3.6.3 前言 在APP开发的时候,UI的效果图里提供了一个比较炫酷的进度条效果,琢磨着找了几篇资料实现了. 效果预览 先来看下Demo的效果,实际效果会比这 ...
- 自定义圆形进度条 100% ,动画 ,拖延进入
.CircleProgressBar public class CircleProgressBar extends View {private Context context;private int ...
- 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画
通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程 先简单的介绍下CAShapeLayer 1,CAShapeLayer继承自CALayer,可使用CALayer的所有属 ...
- ios弧形进度条_iOS手把手教你实现圆形进度条
在做音频项目的时候,播放音频需要显示圆形进度条.今天,教大家如何简单地实现进度条效果!其实,实现这种效果并不困难.前提是需要了解UIBezierPath,如果未接触过,可以先阅读笔者在很久以前所写过的 ...
- 圆形进度条(包括仿QQ图片加载进度图)
原文:圆形进度条(包括仿QQ图片加载进度图) 源代码下载地址:http://www.zuidaima.com/share/1581277496822784.htm 以前找到的自定义圆形进度条
- iOS精品源码,GHConsole图片浏览器圆形进度条音视频传输连击礼物弹出动画
2019独角兽企业重金招聘Python工程师标准>>> 1.可在app中显示的控制台框架GHConsole 2.GKPhotoBrowser--自定义图片浏览器 3.圆形进度条 4. ...
最新文章
- python的with语句
- python安装不了bs4_怎么在python安装bs4
- C# (类型、对象、线程栈和托管堆)在运行时的相互关系
- linux u盘分区 mdev 卸载问题,嵌入式linux 实现mdev SD卡和U盘自动挂载和卸载的方法 mdev.conf...
- 信息学奥赛一本通 1116:最长平台 | OpenJudge NOI 1.9 12:最长平台 | 洛谷 B2097 最长平台
- python判断字母大写_python判断字符串是字母 数字 大小写(转载)
- java generatedvalue_java-@GeneratedValue和@GenericGen之间的区别
- VASP_Si的能带结构计算_步骤整理
- 通过代理服务器下载网页
- Speedoffice(Excel)怎样给文字添加删除线?
- 【验证码识别】OpenCV挑战腾讯防水墙滑动验证码
- 腾讯云数据库TDSQL-C(原CynosDB)的外网访问配置
- FASTAPI接口服务
- Dubbo系列(二)源码分析之SPI机制
- php单链表检测有没有环,写一段代码判断单向链表中有没有形成环,如果形成环,请找出环的入口处,即P点...
- 仿起点中文网的小说网站——JavaEE大作业
- 【1066】满足条件的数累加
- python 在企业微信通过群机器人发送消息
- Product-based Neural Networks
- 怎么通过按钮进行一键截图并保留在文件中