带动画渐进效果与颜色渐变的圆弧进度控件设计(二)

简介: 带动画渐进效果与颜色渐变的圆弧进度控件设计

控件接口的设计:

import <UIKit/UIKit.h>

@interface YHBaseCircleView : UIView
//==============下面三个渐变色必须全部设置 否则效果可能与预期不同================//
/**
*设置圆弧渐变色的起始色
*/
@property(nonatomic,strong)UIColor * minLineColor;
/**
*设置圆弧渐变色的中间色
*/
@property(nonatomic,strong)UIColor * midLineColor;
/**
*设置圆弧渐变色的终止色
*/
@property(nonatomic,strong)UIColor * maxLineColor;
/**
*设置圆弧背景色
*/
@property(nonatomic,strong)UIColor * lineTintColor;
/**
*设置进度
*/
@property(nonatomic,assign)CGFloat progress;
/**
*设置线的宽度 max = 20 min = 0.5
*/
@property(nonatomic,assign)CGFloat lineWidth;
/**
*设置是否显示百分比标签
*/
@property(nonatomic,assign)BOOL showTipLabel;
/**
*设置百分比标签进度颜色
*/
@property(nonatomic,strong)UIColor * textColor;
/**

  • @brief 设置进度

*

  • @param progress 进度 取值0-1

*

  • @param animated 是否显示动画

*
*/
-(void)setProgress:(CGFloat)progress animated:(BOOL)animated;
@end
实现方法如下:

import "YHBaseCircleView.h"

@implementation YHBaseCircleView
{

//进度控件内容尺寸
float _contentWidth;
float _contentHeight;
//形状layer
CAShapeLayer * _shapeLayer;
//颜色渐变layer
CAGradientLayer * _gradLayerR;
CAGradientLayer * _gradLayerL;
CALayer * _gradLayer;
//内容layer
CAShapeLayer * _contentLayer;
UILabel * _tipLabel;
//专门用来更新label
NSTimer * _timer;
float _oldProgress;
//进度新旧进度值
int old;
int new;
AI 代码解读

}

-(void)awakeFromNib{

[self reloadView];
AI 代码解读

}
-(instancetype)initWithFrame:(CGRect)frame{

self = [super initWithFrame:frame];
if (self) {
    [self reloadView];
}
return self;
AI 代码解读

}

-(void)reloadView{

self.backgroundColor = [UIColor clearColor];
//取设置的frame的最小长或款作为内容区域
_contentWidth = _contentHeight = CGRectGetWidth(self.frame)>CGRectGetHeight(self.frame)?CGRectGetHeight(self.frame):CGRectGetWidth(self.frame);
//创建内容layer
_contentLayer = [CAShapeLayer layer];
_contentLayer.bounds = CGRectMake(0, 0, _contentWidth, _contentHeight);
_contentLayer.position = CGPointMake(_contentWidth/2, _contentHeight/2);
_contentLayer.backgroundColor = [UIColor clearColor].CGColor;
//进行边界描绘 默认线宽为4px
UIBezierPath * pathT = [UIBezierPath bezierPathWithArcCenter:_contentLayer.position radius:_contentWidth/2-2 startAngle:-M_PI_2 endAngle:M_PI_2*3 clockwise:YES];
_contentLayer.path = pathT.CGPath;
//默认填充颜色为白色
_contentLayer.fillColor = [UIColor whiteColor].CGColor;
_contentLayer.lineWidth = 4;
_contentLayer.strokeColor = [UIColor grayColor].CGColor;
[self.layer addSublayer:_contentLayer];

_shapeLayer = [CAShapeLayer layer];
_shapeLayer.bounds = CGRectMake(0, 0, _contentWidth, _contentHeight);
_shapeLayer.position = CGPointMake(_contentWidth/2, _contentHeight/2);
_shapeLayer.backgroundColor = [UIColor clearColor].CGColor;
AI 代码解读

// _shapeLayer.lineCap = kCALineCapRound;

//进行边界描绘 默认线宽为4px
UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:_shapeLayer.position radius:_contentWidth/2-2 startAngle:-M_PI_2 endAngle:M_PI_2*3 clockwise:YES];
_shapeLayer.path = path.CGPath;
_shapeLayer.fillColor = [UIColor clearColor].CGColor;
_shapeLayer.lineWidth = 4;
_shapeLayer.strokeColor = [UIColor redColor].CGColor;
//默认黄转橙转红的边界线 分别由两个gradLayer进行控制
_gradLayer = [CALayer layer];
_gradLayer.bounds = _contentLayer.bounds;
_gradLayer.position = _contentLayer.position;
_gradLayer.backgroundColor = [UIColor clearColor].CGColor;
_gradLayerL = [CAGradientLayer layer];
_gradLayerL.bounds = CGRectMake(0, 0, _contentWidth/2, _contentHeight);
_gradLayerL.locations = @[@0.6];
[_gradLayerL setColors:@[(id)[UIColor redColor].CGColor,(id)[UIColor orangeColor].CGColor]];
_gradLayerL.position = CGPointMake(_gradLayerL.bounds.size.width/2, _gradLayerL.bounds.size.height/2);
AI 代码解读

[_gradLayer addSublayer:_gradLayerL];

_gradLayerR = [CAGradientLayer layer];
_gradLayerR.locations = @[@0.6];
_gradLayerR.bounds = CGRectMake(_contentWidth/2, 0, _contentWidth/2, _contentHeight);
[_gradLayerR setColors:@[(id)[UIColor yellowColor].CGColor,(id)[UIColor orangeColor].CGColor]];
_gradLayerR.position = CGPointMake(_gradLayerR.bounds.size.width/2+_contentWidth/2, _gradLayerR.bounds.size.height/2);
[_gradLayer addSublayer:_gradLayerR];
[_gradLayer setMask:_shapeLayer];
[_contentLayer addSublayer:_gradLayer];


//setter方法初始化
_minLineColor = [UIColor yellowColor];
_midLineColor = [UIColor orangeColor];
_maxLineColor = [UIColor redColor];
_lineTintColor = [UIColor grayColor];
_progress = 1;
_lineWidth = 4;
_lineTintColor = [UIColor grayColor];
_textColor = [UIColor orangeColor];
_oldProgress = 1;
//创建tiplabel
[self creatTipLabel];
_timer = [NSTimer scheduledTimerWithTimeInterval:1/60.0 target:self selector:@selector(updateLabel) userInfo:nil repeats:YES];
_timer.fireDate = [NSDate distantFuture];
AI 代码解读

}

-(void)removeFromSuperview{

_timer.fireDate = [NSDate distantFuture];
[_timer invalidate];
_timer =nil;
[super removeFromSuperview];
AI 代码解读

}
-(void)updateLabel{

if (old<new) {
    old++;
    NSMutableAttributedString * attri = [[NSMutableAttributedString alloc]initWithString:[NSString stringWithFormat:@"%d%%",old]];
    [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:22] range:NSMakeRange(0, attri.length-1)];
    [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:15] range:NSMakeRange(attri.length-1, 1)];
    [attri addAttribute:NSForegroundColorAttributeName value:_textColor range:NSMakeRange(0, attri.length)];
    _tipLabel.attributedText = attri;
}else if (old>new){
    old--;
    NSMutableAttributedString * attri = [[NSMutableAttributedString alloc]initWithString:[NSString stringWithFormat:@"%d%%",old]];
    [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:22] range:NSMakeRange(0, attri.length-1)];
    [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:15] range:NSMakeRange(attri.length-1, 1)];
    [attri addAttribute:NSForegroundColorAttributeName value:_textColor range:NSMakeRange(0, attri.length)];
    _tipLabel.attributedText = attri;
}else{
    _timer.fireDate = [NSDate distantFuture];
}
AI 代码解读

}
-(void)setMinLineColor:(UIColor *)minLineColor{

_minLineColor = minLineColor;
[_gradLayerR setColors:@[(id)_minLineColor.CGColor,(id)_midLineColor.CGColor]];
[_gradLayerL setColors:@[(id)_maxLineColor.CGColor,(id)_midLineColor.CGColor]];
AI 代码解读

}
-(void)setMidLineColor:(UIColor *)midLineColor{

_midLineColor = midLineColor;
[_gradLayerR setColors:@[(id)_minLineColor.CGColor,(id)_midLineColor.CGColor]];
[_gradLayerL setColors:@[(id)_maxLineColor.CGColor,(id)_midLineColor.CGColor]];
AI 代码解读

}
-(void)setMaxLineColor:(UIColor *)maxLineColor{

_maxLineColor = maxLineColor;
[_gradLayerR setColors:@[(id)_minLineColor.CGColor,(id)_midLineColor.CGColor]];
[_gradLayerL setColors:@[(id)_maxLineColor.CGColor,(id)_midLineColor.CGColor]];
AI 代码解读

}
-(void)setTintColor:(UIColor *)tintColor{

_lineTintColor = tintColor;
_contentLayer.strokeColor = tintColor.CGColor;
AI 代码解读

}
-(void)setProgress:(CGFloat)progress{

_oldProgress = _progress;
_progress=progress;
_shapeLayer.strokeStart = 0;
_shapeLayer.strokeEnd = progress>1?1:progress;
NSMutableAttributedString * attri ;
if (progress==1) {
    attri = [[NSMutableAttributedString alloc]initWithString:@"100%"];
}else{
    attri = [[NSMutableAttributedString alloc]initWithString:[NSString stringWithFormat:@"%2d%%",(int)(progress*100)]];
}
[attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:22] range:NSMakeRange(0, attri.length-1)];
[attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:15] range:NSMakeRange(attri.length-1, 1)];
[attri addAttribute:NSForegroundColorAttributeName value:_textColor range:NSMakeRange(0, attri.length)];
_tipLabel.attributedText = attri;
AI 代码解读

}

-(void)setProgress:(CGFloat)progress animated:(BOOL)animated{

_oldProgress = _progress;
_progress = progress;
old = (int)(_oldProgress*100);
new = (int)(_progress*100);
CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
ani.toValue = progress>1?@1:@(progress);
ani.duration = 0.3;
ani.delegate=self;
ani.fillMode=kCAFillModeForwards;
ani.removedOnCompletion=NO;
[_shapeLayer addAnimation:ani forKey:nil];
_timer.fireDate = [NSDate distantPast];
AI 代码解读

}

  • (void)dealloc

{

}
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

if (flag) {
    [_shapeLayer removeAllAnimations];
    _shapeLayer.strokeEnd = _progress>1?1:_progress;
}
AI 代码解读

}
-(void)setLineWidth:(CGFloat)lineWidth{

if (lineWidth<0.5) {
    lineWidth=0.5;
}
if (lineWidth>20) {
    lineWidth = 20;
}
_lineWidth = lineWidth;
UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:_shapeLayer.position radius:_contentWidth/2-lineWidth/2 startAngle:-M_PI_2 endAngle:M_PI_2*3 clockwise:YES];
_shapeLayer.path = path.CGPath;
_shapeLayer.fillColor = [UIColor clearColor].CGColor;
_shapeLayer.lineWidth = lineWidth;
_shapeLayer.strokeColor = [UIColor redColor].CGColor;
[_gradLayer setMask:_shapeLayer];
UIBezierPath * pathT = [UIBezierPath bezierPathWithArcCenter:_contentLayer.position radius:_contentWidth/2-lineWidth/2 startAngle:-M_PI_2 endAngle:M_PI_2*3 clockwise:YES];
_contentLayer.path = pathT.CGPath;
_contentLayer.lineWidth = lineWidth;
AI 代码解读

}
-(void)setTextColor:(UIColor *)textColor{

_textColor = textColor;
NSMutableAttributedString * attr = [[NSMutableAttributedString alloc]initWithAttributedString:_tipLabel.attributedText];
[attr addAttribute:NSForegroundColorAttributeName value:textColor range:NSMakeRange(0, attr.length)];
_tipLabel.attributedText = attr;
AI 代码解读

}
-(void)creatTipLabel{

_tipLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, sqrt(2)/2*(_contentWidth-_lineWidth*2), sqrt(2)/2*(_contentWidth-_lineWidth*2))];
_tipLabel.center = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);
_tipLabel.backgroundColor = [UIColor clearColor];
_tipLabel.textAlignment = NSTextAlignmentCenter;
NSMutableAttributedString * attri = [[NSMutableAttributedString alloc]initWithString:@"100%"];
[attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:22] range:NSMakeRange(0, 3)];
[attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:15] range:NSMakeRange(3, 1)];
[attri addAttribute:NSForegroundColorAttributeName value:[UIColor orangeColor] range:NSMakeRange(0, 4)];
_tipLabel.attributedText = attri;
[self addSubview:_tipLabel];
AI 代码解读

}
@end

目录
打赏
0
0
0
0
47
分享
相关文章
|
9月前
|
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
218 1
老程序员分享:OpenGL学习进程(10)第七课:四边形绘制与动画基础
老程序员分享:OpenGL学习进程(10)第七课:四边形绘制与动画基础
周期矩形波的傅里叶级数展开(Matlab代码实现)
周期矩形波的傅里叶级数展开(Matlab代码实现)
216 0
【项目经验】elementui抽屉(从下到上方向)实现向上拉伸
elementui抽屉二次封装(可以向上拉伸)改变抽屉高度
286 0
Photoshop绘制立体效果的拟物化时钟图标
Photoshop绘制立体效果的拟物化时钟图标
95 0
封装一个函数,山峰 高度不固定、纸张厚度不固定,计算折叠几次后超过山峰
封装一个函数,山峰 高度不固定、纸张厚度不固定,计算折叠几次后超过山峰
71 0
求小球下落弹起的高度与路程
求小球下落弹起的高度与路程
178 0
如何做一个俄罗斯方块6:形状停靠
在处理形状停靠之前,有一点儿东西需要了解,就是已经停靠的方块和正在下落的方块不是一种方块,如图,红色的表示的是已经停靠的方块,绿色的表示下落的绿色方块的作用是展示当前下落的形状,红色方块的作用是标识出哪些位置已经摆放了方块。
146 0
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)
每日学一点加强技术水平,夯实基础。 阅读这篇文章,一起学习rem布局吧。
461 0
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)
html+css鼠标经过的样式变化例题
当用户移动鼠标到指定的区域或内容时,会出现什么不一样的渲染效果呢?看这篇文章一起来了解吧!
162 0
 html+css鼠标经过的样式变化例题