zoukankan      html  css  js  c++  java
  • 通过布赛尔曲线以及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

  • 相关阅读:
    《一网打尽》:贝佐斯粗暴刻薄,商业战略上的几次成功决策造了今天的亚马逊
    《信息简史》:计算机史前史
    《孵化Twitter》:Twitter创始人勾心斗角史,细节披露程度令人吃惊
    《走出电商困局》:与《我看电商》有不少重复,反复强调电商要重视成本
    转贴健康资讯:感冒了,是因为着凉吗?
    《众病之王》:人类探索癌症诊断治疗的历史
    转发健康资讯:寒冷会导致关节炎吗?
    《淘宝十年产品事》淘宝产品演进史及作者的思考
    [React] How to use a setState Updater Function with a Reducer Pattern
    [HTML5] Text Alternatives
  • 原文地址:https://www.cnblogs.com/thbbsky/p/4383978.html
Copyright © 2011-2022 走看看