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

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

     今天帮朋友写了一个小巧的圆弧进度控件,控件十分简单,主要设计思路采用CAShapeLayer来创建控件圆弧形状,使用CAGradientLayer来进行颜色渐变的渲染,两者结合来创建出颜色渐变的圆弧进度条控件,关于进度动画采用CoreAnimation动画处理。控件进行了简洁的封装,提供了面向使用的接口,需要的朋友可以自取,Demo地址如下:

http://pan.baidu.com/s/1gfqDbtp

      控件中主要提供了,改变进度条渐变颜色,圆弧进度条宽度,带动画效果的改变进度,改变进度百分比字体颜色等方法。效果是例如如下:

改变字体颜色

改变进度

改变进度条颜色

改变进度条宽度

    控件接口的设计:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

#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

实现方法如下:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

#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;

}

 

-(void)awakeFromNib{

    [self reloadView];

}

-(instancetype)initWithFrame:(CGRect)frame{

    self = [super initWithFrame:frame];

    if (self) {

        [self reloadView];

    }

    return self;

}

 

-(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;

//    _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);

   [_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];

    

}

 

-(void)removeFromSuperview{

    _timer.fireDate = [NSDate distantFuture];

    [_timer invalidate];

    _timer =nil;

    [super removeFromSuperview];

}

-(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];

    }

}

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

    _minLineColor = minLineColor;

    [_gradLayerR setColors:@[(id)_minLineColor.CGColor,(id)_midLineColor.CGColor]];

    [_gradLayerL setColors:@[(id)_maxLineColor.CGColor,(id)_midLineColor.CGColor]];

}

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

    _midLineColor = midLineColor;

    [_gradLayerR setColors:@[(id)_minLineColor.CGColor,(id)_midLineColor.CGColor]];

    [_gradLayerL setColors:@[(id)_maxLineColor.CGColor,(id)_midLineColor.CGColor]];

}

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

    _maxLineColor = maxLineColor;

    [_gradLayerR setColors:@[(id)_minLineColor.CGColor,(id)_midLineColor.CGColor]];

    [_gradLayerL setColors:@[(id)_maxLineColor.CGColor,(id)_midLineColor.CGColor]];

}

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

    _lineTintColor = tintColor;

    _contentLayer.strokeColor = tintColor.CGColor;

}

-(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;

}

 

-(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];

     

}

- (void)dealloc

{

     

}

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

    if (flag) {

        [_shapeLayer removeAllAnimations];

        _shapeLayer.strokeEnd = _progress>1?1:_progress;

    }

}

-(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;

 

}

-(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;

}

-(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];

}

@end

时间: 2024-10-30 02:55:00

带动画渐进效果与颜色渐变的圆弧进度控件设计的相关文章

vb mschart 字体颜色-关于VB的MSChart控件中显示标签文本颜色的问题?

问题描述 关于VB的MSChart控件中显示标签文本颜色的问题? 我的目标是显示两条温度-时间曲线,一条是实际值(红色),一条是设定值(蓝色),两条线的颜色不同,字体与曲线颜色相同,显示完成后,红色的曲线中,有几个点的字体颜色为黑色,代码如下: With MSChart1 .ChartType = VtChChartType2dLine .Plot.Axis(VtChAxisIdX).ValueScale.Auto = False .Plot.Axis(VtChAxisIdY).ValueSca

请问大家是怎么解决这个问题的?用户能自己编辑文本框中的文字,也能放上图片,视频,动画,是用FreeTextBox,还是其他的什么控件?或方法?

问题描述 我下了个FreeTextBox不能用的. 解决方案 解决方案二:Fckeditor就帮你解决了给你几个配置Fckeditor的地址http://www.cnblogs.com/chjw8016/archive/2008/03/09/1097509.htmlhttp://www.chinaret.com/user/topic_view.aspx?u=%E8%8A%B1%E6%97%97%E9%98%BF%E5%B8%85&id=10ba9ddc-9833-41dc-801d-57315b

IOS绘制动画颜色渐变折线条_IOS

先给大家展示下效果图: 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有的也使用了动画,但是线条颜色渐变的折线图的demo少之又少,甚至可以说没有.该Blog阐述了动画绘制线条颜色渐变的折线图的实现方案,以及折线图线条颜色渐变的实现原理,并附以完整的示例. 成果 本人已将折线图封装到了一个UIView子类中,并提供了相应的接口.该自定义折线图视图,基本上可以适用于大部分需要集成折线图的项目.若你

背水一战 Windows 10 (42) - 控件(导航类): Frame 动画

原文:背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 [源码下载] 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 动画 示例Animation/NavigationTransitionInfo/Demo.xaml <Page x:Class="Windows10.Animation.NavigationTransitionInfo.

增加duilib edit控件的提示功能和多种文字颜色

转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41786407       duilib的CEditUI控件内部使用了win32的原生edit控件,最近在做的一个项目里需要增强CEditUI控件的一些功能,我就把改进的代码写到博客里.实际上改进代码很简单,不过也许能其他人会用到,就不用再费时了.     增加的功能如下:      1.增加提示文本,并且可以设置提示文本的颜色,当CEditUI初始化或者无文本的状态下,

android 中win10 使用uwp控件实现进度条Marquez效果

本文将告诉大家,如何做一个带文字的进度条,这个进度条可以用在游戏,现在我做的挂机游戏就使用了他. 如何做上图的效果,实际需要的是两个控件,一个是显示文字 的 TextBlock 一个是进度条. 那么如何让 文字和左边的距离变化?使用 TranslateTransform 看起来 Marquez 的界面就是: <ProgressBar x:Name="Mcdon" Maximum="100" Minimum="0" Value="2

Windows Phone 的控件倾斜效果

原文:Windows Phone 的控件倾斜效果 Windows Phone 7的系统设置里,按钮都有一个点击倾斜的效果,但自己添加的控件就没有.但微软提供了这个效果的代码:TiltEffect  MSDN的介绍:http://msdn.microsoft.com/zh-cn/library/ff941108(v=vs.92).aspx 先下载此处的示例:http://go.microsoft.com/fwlink/?LinkId=200720 把里面的TiltEffect.cs添加到自己的项目

js实现按钮颜色渐变动画效果_javascript技巧

本文实例讲述了js实现按钮颜色渐变动画效果的方法.分享给大家供大家参考.具体如下: 这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/ 具体代码如下: <HTML><HEAD><TITLE>按钮慢慢变色&

JS实现网页右侧带动画效果的伸缩窗口代码_javascript技巧

本文实例讲述了JS实现网页右侧带动画效果的伸缩窗口代码.分享给大家供大家参考,具体如下: 这是一款带缓冲效果的网页右侧固定伸缩窗口,点击带颜色的区域,浮动的层窗口就会伸缩出来,再次点击则缩进去.无jQuery,完全JavaScript实现的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-dh-dlg-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH