做项目让做一个加载动画,一个圈圈在转中间加一个图片,网上有好多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贝塞尔曲线圆形进度条和加载动画的更多相关文章

  1. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

  2. 用HTML、CSS、JS制作圆形进度条(无动画效果)

    逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果:   然后我们再用一个比底圆小的圆去覆盖这个大 ...

  3. CSS3 Loading进度条加载动画特效

    在线演示 本地下载

  4. CSS3彩色进度条加载动画 带进度百分比

    在线演示       本地下载

  5. 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画

    通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下CAShapeLayer1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性2 ...

  6. 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【装载】

    初次接触CAShapeLayer和贝塞尔曲线,看了下极客学院的视频.对初学者来说感觉还不错.今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下C ...

  7. iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  8. [iOS]圆形进度条及计时功能

    平时用战网安全令的时候很喜欢圆形倒计时的效果,然后简单看了一下Android的圆形进度条,后来又写了一个IOS的.整体界面参照IOS系统的倒计时功能,顺便熟悉了UIPickerView的一些特性的实现 ...

  9. IOS 圆形进度条

    // // CCProgressView.h // Demo // // Created by leao on 2017/8/7. // Copyright © 2017年 zaodao. All r ...

随机推荐

  1. (一)ElasticSearch-入门

    目录:一.前言二.安装三.索引四.搜索五.聚合六.分布式的特性 一.前言Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被 ...

  2. js虚拟数字小键盘

    效果图 页面代码: @Html.TextBoxFor(m=>Model.FBP[i].RealNumb,new{onclick="showKeyboard('txtRealNumbOp ...

  3. update sharepoint 2013 cu error

    1. 安装过程合理: A. 可以同时在管理中心.两台前端.搜索服务器上安装重新发布的SP1补丁包(所提供的链接) B. 等待所有SP1补丁包安装完成,依次在管理中心.两台前端.搜索服务器上运行配置向导 ...

  4. java中-的流-与操作

    /* 字节输出流  OutputStrema:     * OutputStream抽象类     * write(int b); 将指定的字节写入此流中     * write(byte[] b); ...

  5. rpm 安装卸载

    安装命令 rpm -i example.rpm 安装 example.rpm 包: rpm -iv example.rpm 安装 example.rpm 包并在安装过程中显示正在安装的文件信息: rp ...

  6. WebStorm 简单部署服务器进行测试操作

    WebStorm 简单部署服务器对外发布接口 第一步: 查看webstorm防火墙是否允许链接,控制面板-->防火墙-->高级设置 入站规则-->webstrom是否允许链接 ,双击 ...

  7. Python 的 GIL 是什么鬼,多线程性能究竟如何

    作者:卢钧轶(cenalulu) 本文原文地址: http://cenalulu.github.io/python/gil-in-python/ 前言:博主在刚接触Python的时候时常听到GIL这个 ...

  8. mysql随机取出若干条记录的实用方法

    1.常见的方法 ; 这种方法可以随机取得数据,但是如果表比较大,数据量很多的时候会很耗时. 2.优化后的方式 ) as t ); 分析,首先根据条件筛选出要选的数据,然后随机排序取出要的条数的id , ...

  9. leetcode-74-搜索二维矩阵

    题目描述:  编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. 每行的第一个整数大于前一行的最后一个整数. 示例 1: 输入: ...

  10. freemaker的函数使用

    如下: <html> <body> <div class="container"> <h4>修改用户角色</h4> &l ...