通过布赛尔曲线以及CAShapeLayer的strokeStart 、strokeEnd 属性来实现一个圆形进度条

#import <UIKit/UIKit.h>

@interface CircleProgressView : UIView

/**起始值(0-1)*/
@property(nonatomic,assign)CGFloat fstartValue;

/**边框宽度*/
@property(nonatomic,assign)CGFloat flineWidth;

/**线条颜色*/
@property(nonatomic,strong)UIColor *lineColor;

/**变化的值*/
@property(nonatomic,assign)CGFloat fvalue;
@end
#import "CircleProgressView.h"
@interface CircleProgressView ()
{
    CAShapeLayer *_shapeLayer;
}
@end
@implementation CircleProgressView
@synthesize fstartValue=_fstartValue;
@synthesize flineWidth=_flineWidth;
@synthesize lineColor=_lineColor;
@synthesize fvalue=_fvalue;

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        /**创建带形状的图层*/
        _shapeLayer=[CAShapeLayer layer];
        _shapeLayer.frame     = self.bounds;
        _shapeLayer.strokeEnd = 0.f;

        /*创建布赛尔曲线*/
        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.bounds];

        /**把图层和不塞尔曲线通过path进行关联*/
        _shapeLayer.path   = path.CGPath;

        /**设置图层的填充颜色、宽度、边框颜色*/
        _shapeLayer.fillColor   = [UIColor clearColor].CGColor;
        _shapeLayer.lineWidth   = 1.0f;
        _shapeLayer.strokeColor = [UIColor redColor].CGColor;

        [self.layer addSublayer:_shapeLayer];
    }
    return self;
}
/**
 *  @brief  重写fstartValue的setter方法
 *  @param fstartValue  设置圆形strokeStart起始值
 *  @since
 */
- (void)setFstartValue:(CGFloat)fstartValue
{
    _fstartValue          = fstartValue;
    _shapeLayer.strokeStart = fstartValue;

}
- (CGFloat)fstartValue
{
    return _fstartValue;
}
/**
 *  @brief  重写flineWidth的setter方法
 *  @param flineWidth  设置圆形边框宽度
 *  @since
 */

- (void)setFlineWidth:(CGFloat)flineWidth
{
    _flineWidth           = flineWidth;
    _shapeLayer.lineWidth = flineWidth;
}
/**
 *  @brief  重写lineColor的setter方法
 *  @param lineColor  设置圆形边框颜色
 *  @since
 */

- (void)setLineColor:(UIColor *)lineColor
{
    _lineColor              = lineColor;
    _shapeLayer.strokeColor = lineColor.CGColor;
}
- (UIColor *)lineColor
{
    return _lineColor;
}
/**
 *  @brief  重写fvalue的setter方法
 *  @param lineColor  设置圆形的strokeEnd值
 *  @since
 */
- (void)setFvalue:(CGFloat)fvalue
{
    _fvalue                = fvalue;
    _shapeLayer.strokeEnd = fvalue;
}

- (CGFloat)fvalue
{
    return _fvalue;
}
@end
#import "ViewController.h"
#import "CircleProgressView.h"
@interface ViewController ()
{
    CircleProgressView *progress;
}
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    progress             = [[CircleProgressView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
    progress.center      = self.view.center;
    progress.lineColor   = [UIColor redColor];
    progress.flineWidth  = 1.0f;
    progress.fstartValue = 0;
    [self.view addSubview:progress];
    [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(circleAnimation) userInfo:nil repeats:YES];

}
- (void)circleAnimation
{
    progress.fvalue = arc4random()%100/100.f;
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];

}

@end

时间: 2024-08-24 12:38:53

通过布赛尔曲线以及CAShapeLayer的strokeStart 、strokeEnd 属性来实现一个圆形进度条的相关文章

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

初次接触CAShapeLayer和贝塞尔曲线,看了下极客学院的视频.对初学者来说感觉还不错.今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下CAShapeLayer1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性2,CAShapeLayer需要和贝塞尔曲线配合使用才有意义.Shape:形状贝塞尔曲线可以为其提供形状,而单独使用CAShapeLayer是没有任何意义的.3,使用CAShapeLayer与贝塞尔

CAShapeLayer实现圆形进度条效果

一.CAShapeLayer简介: 1.CAShapeLayer继承至CALayer,可以使用CALayer的所有属性值 2.CAShapeLayer需要与贝塞尔曲线配合使用才有意义 3.使用CAShapeLayer与贝塞尔曲线可以实现不在view的drawRect方法中画出一些想要的图形 4.CAShapeLayer属于CoreAnimation框架,其动画渲染直接提交到手机的GPU当中,相较于view的drawRect方法使用CPU渲染而言,其效率极高,能大大优化内存使用情况 五角星动画 #

IOS贝塞尔曲线圆形进度条和加载动画

做项目让做一个加载动画,一个圈圈在转中间加一个图片,网上有好多demo,这里我也自己写了一个,中间的图片可加可不加.其中主要用到贝塞尔曲线.UIBezierPath是对CGContextRef的进一步封装,不多说直接上代码: #import <UIKit/UIKit.h> @interface CircleLoader : UIView //进度颜色 @property(nonatomic, retain) UIColor* progressTintColor ; //轨道颜色 @proper

IOS开发基础篇--CAShapeLayer的strokeStart和strokeEnd属性

http://blog.csdn.net/yixiangboy/article/details/50662704 一.案例演示 最近有一个小需求,就是要做一个圆形进度条,大概样子如下: . 在不知道有CAShapeLayer的strokeStart和strokeEnd属性的时候,我采取的方法就是实时的 移除旧的CAShapeLayer 然后重绘这个圆形的CAShapeLayer.显然这种方式的效率是不高的.后来在一次看别人Demo的时候,发现别人使用了CAShapeLayer的strokeSta

贝塞尔曲线与CAShapeLayer的关系以及Stroke动画

1.贝塞尔曲线与CAShapeLayer的关系    1.1CAShapeLayer须要一个形状才干生效,贝塞尔曲线能够创建基于矢量的路径.进而能够给CAShapeLayer提供路径,路径会闭环.    1.2贝塞尔曲线作为CAShapeLayer的path,其path是一个首尾相接的闭环的曲线. 2.实际应用 2.2画椭圆        2.2画矩形,画圆形的方法和上边的一致,仅仅是绘图时调用的方法不一致而已. 3.注意:贝塞尔曲线与CAShapeLayer的frame值互不干扰,贝塞尔曲线仅

CAShapeLayer的strokeStart和strokeEnd属性

strokeStart和strokeEnd 是一个0-1的取值范围.表示一段路径的开始和结尾.比如开始位置为0.5结束位置为1 那就只渲染出后半段的路径 strokeStart 翻译过来就是清除开始位置 strokeEnd   意思就是清除结束的位置 这里有4个组合 1 keyPath = strokeStart  动画的fromValue = 0,toValue = 1 表示从路径的0位置画到1 怎么画是按照清除开始的位置也就是清除0 一直清除到1 效果就是一条路径慢慢的消失 2 keyPat

HslControls组件库 工业控件库 曲线控件 时间控件 管道控件 温度计控件 阀门控件 传送带控件 进度条控件 电池控件 数码管控件等等

本篇博客主要对 HslControls 组件做一个大概的总览介绍,更详细的内容可以参照页面里的子链接,还有github上的源代码,然后进行相关的学习,和使用. Prepare 先从nuget下载到组件,然后就可以使用组件里的各种组件信息了. 在Visual Studio 中的NuGet管理器中可以下载安装,也可以直接在NuGet控制台输入下面的指令安装: Install-Package HslControls NuGet安装教程  http://www.cnblogs.com/dathlin/p

用杯赛尔曲线(做动画和绘图)

1. 用被塞尔曲线做动画 效果:位置沿着贝瑟尔曲线位置移动,尺寸由大到小,透明度从完全可见过渡到彻底透明. 至于在DrawRect里面绘制贝塞尔曲线,可以直接百度,没有什么难点的. - (void)clickButton:(id)sender { UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:btn.center]; [path addCurveToPoint:btn.center controlPoint1:

使用CAShapeLayer做出圆形的进度条 —— #DF!

CircleView.h的内容如下: #import <UIKit/UIKit.h> @interface CircleView : UIView @property (nonatomic, assign) CGFloat startValue; @property (nonatomic, assign) CGFloat lineWidth; @property (nonatomic, strong) UIColor *lineColor; @property (nonatomic, assi