本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 软件编程 > IOS >

收藏
分享到

iOS实现轮盘动态效果的代码

IOS 来源：互联网搜集 作者：秩名 发布时间：2020-04-17 17:51:04 人浏览
摘要

一个常用的绘图，主要用来打分之类的动画，效果如下。 主要是iOS的绘图和动画，本来想用系统自带动画实现呢，发现实现不了，用了其他办法延时并重绘视图没有成功，用了gcd延时，nsthread休眠，performselector delay 都不行。最后用了一个定时器实现类似效果

一个常用的绘图，主要用来打分之类的动画，效果如下。

主要是iOS的绘图和动画，本来想用系统自带动画实现呢，发现实现不了，用了其他办法延时并重绘视图没有成功，用了gcd延时，nsthread休眠，performselector delay 都不行。最后用了一个定时器实现类似效果，总感觉不太明智，以后应该考虑下对CALayer和

隐式动画的角度考虑下

?
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
#import <UIKit/UIKit.h>
 
/**
 *  自定义变量里面以s结尾的表示具体的数值，否则表示的是表示显示具体内容的标签，以lbe的表示对内容的说明
 
   比如comments 表示的具体评价内容，comment 表示评价的具体内容，lbecomment 是一个显示 "评价："的标签
 */
 
@interface ScorePlateView : UIView
 
/*速度满意度*/
@property (nonatomic,assign) CGFloat speedValues;
 
/*态度满意度*/
@property (nonatomic,assign) CGFloat altitudeValues;
 
/*把半圆分割的份数*/
@property (nonatomic,assign) int precision;
/**
 * 整体评价
 */
@property (nonatomic,strong) NSString * comments;
/**
 * 满分是多少分
 */
@property (nonatomic,assign) CGFloat fullValues;
/**
 * 综合评分
 */
@property (nonatomic,assign) CGFloat compreValues;
/**
 * 开始角度
 */
 
@property (nonatomic,assign) CGFloat startAngle;
/**
 * 终止角度
 */
@property (nonatomic,assign) CGFloat endAngle;
 
//-(void)startAnimation;
@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
#import "ScorePlateView.h"
 
@interface ScorePlateView()
{
  CGFloat d_speed;//执行动画时候每个的增量
  CGFloat d_altitude;
  CGFloat d_comp;
}
 
@property (nonatomic,strong) UILabel*lbeCompreValue;//综合分数的标签
 
@property (nonatomic,strong) UILabel *compreValue;//综合分数的具体数值
 
@property (nonatomic,strong) UILabel * comment;//评价
 
@property (nonatomic,assign) CGFloat cur_speedV;//当前的值
 
@property (nonatomic,assign) CGFloat cur_altitudeV;//当前的态度；
 
@property (nonatomic,assign) CGFloat cur_compV;//当前的综合分数
@property (nonatomic,assign) NSTimer * timer;
 
@end
 
@implementation ScorePlateView
 
- (instancetype)initWithFrame:(CGRect)frame
{
  if (self = [super initWithFrame:frame]) {
    
    self.precision= 50;//这里设置默认值;
    self.fullValues =5;
    self.altitudeValues=3.0;
    self.speedValues=4.0;
    self.backgroundColor = [UIColor clearColor];
    self.startAngle=0.1*M_PI;
    self.endAngle = 0.9*M_PI;
    self.comments =@"真是太不可思议了";
    self.backgroundColor = [UIColor greenColor];
    _cur_compV=0;
    _cur_speedV=0;
    _cur_altitudeV=0;
  }
  return self;
}
- (void)drawRect:(CGRect)rect {
  
  //1. 画圆
  
  CGFloat circleMargin = 0; //上下两个半圆的间距
  CGFloat topBottomMargin =20;//这个间距用来显示服务态度和服务速度那样标签内容
  
  CGFloat radius = (self.frame.size.height-circleMargin-2*topBottomMargin)/2;//半径
  //上边圆的圆心
  CGPoint centerTop = CGPointMake(self.frame.size.width/2,self.frame.size.height/2-circleMargin/2);
  [self drawHalfCircle:centerTop andWithRadius:radius isTop:YES];
  //下面圆的圆心
  CGPoint centerBottom = CGPointMake(self.frame.size.width/2, self.frame.size.height/2+circleMargin/2);
  [self drawHalfCircle:centerBottom andWithRadius:radius isTop:NO];
  
  //2. 创建需要的标签,并在合适的位置绘制内容
  UILabel * lbeAltitude = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, topBottomMargin)];
  lbeAltitude.text = @"服务速度";
  lbeAltitude.textColor = [UIColor whiteColor];
  lbeAltitude.textAlignment = NSTextAlignmentCenter;
  lbeAltitude.font = [UIFont systemFontOfSize:12];
  [lbeAltitude drawTextInRect:lbeAltitude.frame];
  
  //服务态度评分
  UILabel * lbeSpeed = [[UILabel alloc]initWithFrame:CGRectMake(0, self.frame.size.height-topBottomMargin, self.frame.size.width, topBottomMargin)];
  lbeSpeed.text = @"服务态度";
  lbeSpeed.textColor = [UIColor whiteColor];
  lbeSpeed.textAlignment = NSTextAlignmentCenter;
  lbeSpeed.font = [UIFont systemFontOfSize:12];
  [lbeSpeed drawTextInRect:lbeSpeed.frame];
  
  //绘制综合评分
  NSString *attitudeScore = [NSString stringWithFormat:@"%.2f/%.2f",_cur_altitudeV,self.fullValues];
  NSMutableAttributedString* attributeString = [[NSMutableAttributedString alloc]initWithString:attitudeScore];
  [attributeString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:26] range:NSMakeRange(0, 4)];
  [attributeString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:16] range:NSMakeRange(4, 3)];
  self.compreValue = [[UILabel alloc]initWithFrame:CGRectMake(0, radius-topBottomMargin,self.frame.size.width, 2*topBottomMargin)];
  self.compreValue.attributedText = attributeString;
  self.compreValue.textAlignment = NSTextAlignmentCenter;
  self.compreValue.textColor = [UIColor whiteColor];
  self.compreValue.frame = CGRectMake(0, centerTop.y-topBottomMargin+circleMargin/2, self.frame.size.width, topBottomMargin*2);
  [self.compreValue drawTextInRect:self.compreValue.frame];
  
  self.lbeCompreValue = [[UILabel alloc]initWithFrame:CGRectMake(0, centerTop.y-radius*0.5, self.frame.size.width, topBottomMargin*2)];
  self.lbeCompreValue.text =@"综合评分";
  self.lbeCompreValue.textAlignment = NSTextAlignmentCenter;
  self.lbeCompreValue.textColor = [UIColor whiteColor];
  self.lbeCompreValue.font = [UIFont systemFontOfSize:14];
  [self.lbeCompreValue drawTextInRect:self.lbeCompreValue.frame];
  //评价内容
  self.comment = [[UILabel alloc]initWithFrame:CGRectMake(topBottomMargin+circleMargin+radius/2, CGRectGetMaxY(self.compreValue.frame), radius, topBottomMargin*2)];
  self.comment.text =self.comments;
  self.comment.numberOfLines=0;
  self.comment.textAlignment = NSTextAlignmentCenter;
  self.comment.textColor = [UIColor whiteColor];
  self.comment.font = [UIFont systemFontOfSize:14];
  [self.comment drawTextInRect:self.comment.frame];
  
}
/**
 * 画半圆 绘制刻度的时候可以先绘制从圆心的线，最后用一个内圆裁剪的方式，但是如果要求背景随时变化就局限了，特别是父视图背景是渐变的，要么重新定义该类，要么把这个类视图定义为透明，从而透过父视图背景颜色
  透明的背景无法掩盖从圆心出发的线，
 *
 * @param center 圆心坐标
 * @param radius 半径
 * @param top  是不是画上面的圆
 */
-(void)drawHalfCircle:(CGPoint) center andWithRadius:(CGFloat)radius isTop:(BOOL) top
{
  
  //画上面圆的边框
  CGContextRef ctx = UIGraphicsGetCurrentContext();
  CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
  if (top) {
    CGContextAddArc(ctx, center.x, center.y, radius, -self.startAngle, -self.endAngle, 1);
  }
  else
  {
    CGContextAddArc(ctx, center.x, center.y, radius,self.startAngle,self.endAngle, 0);
  }
  //设置线的宽度
  CGContextSetLineWidth(ctx, 1);
  CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
  CGContextStrokePath(ctx);
  //绘制上下圆的分割线
  CGContextSetLineWidth(ctx, 2);//设置线宽
  CGFloat borderValue;
  if (top) {
    borderValue=_cur_altitudeV/self.fullValues;//设置边界值
  }
  else
  {
    borderValue =_cur_speedV/self.fullValues;
  }
  //实现动画效果，只能先画刻度，再画具体值
  for (int i=1; i<self.precision; i++)//画刻度
  {
    
    CGContextSetRGBStrokeColor(ctx, 1.0, 1.0, 1.0, 0.5);//设置白色 透明
    CGFloat endX,endY,startX,startY;//刻度的长度是这里 7 -2 =5；
    if (top) {
      startX = center.x -(radius-10)*cos((double)i/self.precision*(self.endAngle-self.startAngle)+self.startAngle);
      startY = center.y - (radius-10)*sin((double)i/self.precision*(self.endAngle-self.startAngle)+self.startAngle);
      endX = center.x - (radius-2)*cos((double)i/self.precision*(self.endAngle-self.startAngle)+self.startAngle);//圆上的点的x坐标
      endY = center.y - (radius-2)*sin((double)i/self.precision*(self.endAngle-self.startAngle)+self.startAngle);//圆上的点的y坐标
    }
    else
    {
      startX = center.x +(radius-10)*cos((double)i/self.precision*(self.endAngle-self.startAngle)+self.startAngle);
      startY = center.y + (radius-10)*sin((double)i/self.precision*(self.endAngle-self.startAngle)+self.startAngle);
      endX = center.x + (radius-2)*cos((double)i/self.precision*(self.endAngle-self.startAngle)+self.startAngle);//圆上的点的x坐标
      endY = center.y + (radius-2)*sin((double)i/self.precision*(self.endAngle-self.startAngle)+self.startAngle);//圆上的点的y坐标
    }
    CGContextMoveToPoint(ctx, startX, startY);
    CGContextAddLineToPoint(ctx, endX, endY);
    CGContextStrokePath(ctx);
  }
  for (int i=1; i<self.precision; i++)
  {
    
    CGFloat curAngle =(double)i/self.precision*(self.endAngle-self.startAngle)+self.startAngle;
    if ((double)i/(double)self.precision<borderValue)
    {
      CGContextSetRGBStrokeColor(ctx, 1.0, 1.0, 1.0, 1);//设置白色 不透明
      CGFloat endX,endY,startX,startY;//刻度的长度是这里 7 -2 =5；
      if (top) {
        startX = center.x -(radius-10)*cos(curAngle);
        startY = center.y - (radius-10)*sin(curAngle);
        endX = center.x - (radius-2)*cos(curAngle);//圆上的点的x坐标
        endY = center.y - (radius-2)*sin(curAngle);//圆上的点的y坐标
      }
      else
      {
        startX = center.x +(radius-10)*cos(curAngle);
        startY = center.y + (radius-10)*sin(curAngle);
        endX = center.x + (radius-2)*cos(curAngle);//圆上的点的x坐标
        endY = center.y + (radius-2)*sin(curAngle);//圆上的点的y坐标
      }
      CGContextMoveToPoint(ctx, startX, startY);
      CGContextAddLineToPoint(ctx, endX, endY);
      CGContextStrokePath(ctx);
    }
  }
}
- (void)didMoveToSuperview
{
  self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(update) userInfo:nil repeats:YES];
  d_comp = self.compreValues/20;
  d_speed= self.speedValues/20;
  d_altitude=self.speedValues/20;
}
-(void)update
{
  _cur_altitudeV+=d_altitude;
  _cur_speedV+=d_speed;
  _cur_compV+=d_comp;
  if (_cur_altitudeV>self.altitudeValues) {
    _cur_altitudeV =self.altitudeValues;
  }
  if (_cur_speedV > self.speedValues) {
    _cur_speedV=self.speedValues;
  }
  if (_cur_compV>self.compreValues) {
    _cur_compV=self.compreValues;
  }
  if ( _cur_compV==self.compreValues&&_cur_speedV==self.speedValues&&_cur_altitudeV ==self.altitudeValues) {
    
    [self.timer invalidate];
    self.timer = nil;
  }
  //self.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
  [self setNeedsDisplay];
 
}
 
@end


版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/a158337/article/details/50440983
相关文章

  • Flutter Widgets之标签类控件Chip介绍

    Flutter Widgets之标签类控件Chip介绍
    Flutter 标签类控件大全ChipFlutter内置了多个标签类控件，但本质上它们都是同一个控件，只不过是属性参数不同而已，在学习的过程中可以将
  • iOS Lotusoot模块化工具应用的动态思路
    下文，写的是 Swift 依赖 OC 库，没有命名空间 组件化的要点-约定 个人觉得 例如，URL 路由的注册，就是把约定的信息，传过去。作为服务。
  • iOS浮点类型精度问题的原因与解决办法
    前言 相信不少人（其实我觉得应该是每个人）都遇到过一个问题，那就是当服务端返回的JSON数据中出现了小数时，客户端用CGFloat去解析时

  • iOS开发实现计算器功能的代码

    iOS开发实现计算器功能的代码
    效果图 Masonry 使用数组来自动约束 NSArray *buttonArrayOne = @[_buttonAC, _buttonLeftBracket, _buttonRightBracket, _buttonDivide]; //withFixedSpacing: 每个view中间的间

  • iOS自定义雷达扫描扩散动画的代码

    iOS自定义雷达扫描扩散动画的代码
    自己自定义了 一个雷达扫描/扩散效果的View。 扫描View 效果如下： 扩散View 效果如下： 自定义的代码如下： 1. RadarView.h #import UIKit/UIKit.h t

  • iOS实现雷达扫描效果

    iOS实现雷达扫描效果
    具体内容如下 #import UIKit/UIKit.h @interface LTIndicatiorView : UIView@property(nonatomic,strong)UIColor *color;@property(nonatomic,assign)float repeatCount;@property(nonatom
  • IOS NSTimeInterval使用案例介绍
    一 ios 获取时间间隔 想在程序开始或者进入某个界面 ，到结束程序或退出某个界面，获取到这个持续时间. 获取到这个时间还需要转化一个

  • IOS WebRTC的实现原理

    IOS WebRTC的实现原理
    它在2011年5月开放了工程的源代码，在行业内得到了广泛的支持和应用，成为下一代视频通话的标准。 WebRTC的音视频通信是基于P2P，那么什
  • 关于ios配置微信config出现验签失败的问题解决
    在开发中，出现了一个关于微信配置的问题。 使用的开发工具以及开发框架为 uniapp ， JSSDK为 jweixin 使用uniapp进行公众号开发，需要在进入
  • iOS实现轮盘动态效果的代码
    一个常用的绘图，主要用来打分之类的动画，效果如下。 主要是iOS的绘图和动画，本来想用系统自带动画实现呢，发现实现不了，用了其他
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计