开发者社区> 社会主义> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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开发:下架App的步骤
首先登陆你的 iTunes Connect
0 0
2022 ios APP最新iOS开发上架测试教程
2022 ios APP最新iOS开发上架测试教程
0 0
[ios开发]-APP-上架流程
由于苹果的机制,在非越狱机器上安装必须通过官方的Appstore, 开发者开发好应用后上传Appstore,也需要通过审核等环节。 AppCan作为一个跨主流平台的一个开发平台,也对ipa包上传Appstore作了支持。 本文从三个流程来介绍如何实现AppCan在 线编译出ipa包,以及上传到苹果Appstore。
0 0
iOS开发之打包上传到App Store——(一)各种证书的理解
iOS开发之打包上传到App Store——(一)各种证书的理解
0 0
IOS APP开发:苹果app从开发到上架教程详解
IOS APP开发:苹果app从开发到上架教程详解
0 0
IOS开发:UniAPP实现BLE低功耗蓝牙开发1
1、Uni-app介绍 2、Uni-app优点 3、BLE开发流程
0 0
iOS开发 - 穿针引线之内存管理(二)
iOS开发 - 穿针引线之内存管理
0 0
iOS开发 - 穿针引线之内存管理(一)
iOS开发 - 穿针引线之内存管理
0 0
iOS开发 - NSTimer极限使用(二)
iOS开发 - NSTimer极限使用
0 0
iOS开发 - NSTimer极限使用(一)
iOS开发 - NSTimer极限使用
0 0
+关注
社会主义
从.Net到iOS,在撸的道路上越走越远,工作之余经营着博客园http://www.cnblogs.com/5ishare,欢迎小伙伴(妹子更好)一起交流,谈谈人生理想。作为经常从网上索取免费资料的一员,要有回报回报的思想,也让更多的人少走弯路.
文章
问答
文章排行榜
最热
最新
相关电子书
更多
From Java_Android to Swift iOS
立即下载
From Java/Android to Swift iOS
立即下载
深入剖析 iOS 性能优化
立即下载