iOS 进度条、加载、安装动画的简单实现

 更新时间:2017年03月06日 17:12:04   作者:hero_wqb  
这篇文章主要介绍了iOS 进度条、加载、安装动画的简单实现,非常不错,具有参考借鉴价值,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

首先看一下效果图:

下面贴上代码:

控制器ViewController:

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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@end
/*** ---------------分割线--------------- ***/
#import "ViewController.h"
#import "HWWaveView.h"
#import "HWCircleView.h"
#import "HWProgressView.h"
#import "HWInstallView.h"
@interface ViewController ()
@property (nonatomic, strong) NSTimer *timer;
@property (nonatomic, weak) HWWaveView *waveView;
@property (nonatomic, weak) HWCircleView *circleView;
@property (nonatomic, weak) HWProgressView *progressView;
@property (nonatomic, weak) HWInstallView *installView;
@end
@implementation ViewController
- (void)viewDidLoad {
 [super viewDidLoad];
 //创建控件
 [self creatControl];
 //添加定时器
 [self addTimer];
}
- (void)creatControl
{
 //波浪
 HWWaveView *waveView = [[HWWaveView alloc] initWithFrame:CGRectMake(30, 100, 150, 150)];
 [self.view addSubview:waveView];
 self.waveView = waveView;
 //圆圈
 HWCircleView *circleView = [[HWCircleView alloc] initWithFrame:CGRectMake(220, 100, 150, 150)];
 [self.view addSubview:circleView];
 self.circleView = circleView;
 //进度条
 HWProgressView *progressView = [[HWProgressView alloc] initWithFrame:CGRectMake(30, 365, 150, 20)];
 [self.view addSubview:progressView];
 self.progressView = progressView;
 //加载安装效果
 HWInstallView *installView = [[HWInstallView alloc] initWithFrame:CGRectMake(220, 300, 150, 150)];
 [self.view addSubview:installView];
 self.installView = installView;
}
- (void)addTimer
{
 _timer = [NSTimer scheduledTimerWithTimeInterval:0.2f target:self selector:@selector(timerAction) userInfo:nil repeats:YES];
 [[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
}
- (void)timerAction
{
 _waveView.progress += 0.01;
 _circleView.progress += 0.01;
 _progressView.progress += 0.01;
 _installView.progress += 0.01;
 if (_waveView.progress >= 1) {
  [self removeTimer];
  NSLog(@"完成");
 }
}
- (void)removeTimer
{
 [_timer invalidate];
 _timer = nil;
}
@end
波浪HWWaveView:
[objc] view plain copy 在CODE上查看代码片派生到我的代码片
#import <UIKit/UIKit.h>
@interface HWWaveView : UIView
@property (nonatomic, assign) CGFloat progress;
@end
/*** ---------------分割线--------------- ***/
#import "HWWaveView.h"
#define KHWWaveFillColor [UIColor groupTableViewBackgroundColor] //填充颜色
#define KHWWaveTopColor [UIColor colorWithRed:0/255.0 green:191/255.0 blue:255/255.0 alpha:1.0f] //前面波浪颜色
#define KHWWaveBottomColor [UIColor colorWithRed:0/255.0 green:191/255.0 blue:255/255.0 alpha:0.4f] //后面波浪颜色
@interface HWWaveView ()
@property (nonatomic, strong) CADisplayLink *displayLink;
@property (nonatomic, assign) CGFloat wave_amplitude;//振幅a(y = asin(wx+φ) + k)
@property (nonatomic, assign) CGFloat wave_cycle;//周期w
@property (nonatomic, assign) CGFloat wave_h_distance;//两个波水平之间偏移
@property (nonatomic, assign) CGFloat wave_v_distance;//两个波竖直之间偏移
@property (nonatomic, assign) CGFloat wave_scale;//水波速率
@property (nonatomic, assign) CGFloat wave_offsety;//波峰所在位置的y坐标
@property (nonatomic, assign) CGFloat wave_move_width;//移动的距离,配合速率设置
@property (nonatomic, assign) CGFloat wave_offsetx;//偏移
@property (nonatomic, assign) CGFloat offsety_scale;//上升的速度
@end
@implementation HWWaveView
- (instancetype)initWithFrame:(CGRect)frame
{
 if (self = [super initWithFrame:frame]) {
  self.backgroundColor = [UIColor clearColor];
  //初始化信息
  [self initInfo];
 }
 return self;
}
- (void)initInfo
{
 //进度
 _progress = 0;
 //振幅
 _wave_amplitude = self.frame.size.height / 25;
 //周期
 _wave_cycle = 22 * M_PI / (self.frame.size.width * 0.9);
 //两个波水平之间偏移
 _wave_h_distance = 22 * M_PI / _wave_cycle * 0.6;
 //两个波竖直之间偏移
 _wave_v_distance = _wave_amplitude * 0.4;
 //移动的距离,配合速率设置
 _wave_move_width = 0.5;
 //水波速率
 _wave_scale = 0.4;
 //上升的速度
 _offsety_scale = 0.1;
 //波峰所在位置的y坐标,刚开始的时候_wave_offsety是最大值
 _wave_offsety = (1 - _progress) * (self.frame.size.height + 22 * _wave_amplitude);
 [self addDisplayLinkAction];
}
- (void)addDisplayLinkAction
{
 _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkAction)];
 [_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}
- (void)displayLinkAction
{
 _wave_offsetx += _wave_move_width * _wave_scale;
 //完成
 if (_wave_offsety <= 0.01) [self removeDisplayLinkAction];
 [self setNeedsDisplay];
}
- (void)removeDisplayLinkAction
{
 [_displayLink invalidate];
 _displayLink = nil;
}
- (void)drawRect:(CGRect)rect
{
 UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];
 [KHWWaveFillColor setFill];
 [path fill];
 [path addClip];
 //绘制两个波形图
 [self drawWaveColor:KHWWaveTopColor offsetx:0 offsety:0];
 [self drawWaveColor:KHWWaveBottomColor offsetx:_wave_h_distance offsety:_wave_v_distance];
}
- (void)drawWaveColor:(UIColor *)color offsetx:(CGFloat)offsetx offsety:(CGFloat)offsety
{
 //波浪动画,进度的实际操作范围是,多加上两个振幅的高度,到达设置进度的位置y
 CGFloat end_offY = (1 - _progress) * (self.frame.size.height + 22 * _wave_amplitude);
 if (_wave_offsety != end_offY) {
  if (end_offY < _wave_offsety) {
   _wave_offsety = MAX(_wave_offsety -= (_wave_offsety - end_offY) * _offsety_scale, end_offY);
  }else {
   _wave_offsety = MIN(_wave_offsety += (end_offY - _wave_offsety) * _offsety_scale, end_offY);
  }
 }
 UIBezierPath *wavePath = [UIBezierPath bezierPath];
 for (float next_x = 0.f; next_x <= self.frame.size.width; next_x ++) {
  //正弦函数,绘制波形
  CGFloat next_y = _wave_amplitude * sin(_wave_cycle * next_x + _wave_offsetx + offsetx / self.bounds.size.width * 22 * M_PI) + _wave_offsety + offsety;
  if (next_x == 0) {
   [wavePath moveToPoint:CGPointMake(next_x, next_y - _wave_amplitude)];
  }else {
   [wavePath addLineToPoint:CGPointMake(next_x, next_y - _wave_amplitude)];
  }
 }
 [wavePath addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height)];
 [wavePath addLineToPoint:CGPointMake(0, self.bounds.size.height)];
 [color set];
 [wavePath fill];
}
@end
圆圈HWCircleView:
[objc] view plain copy 在CODE上查看代码片派生到我的代码片
#import <UIKit/UIKit.h>
@interface HWCircleView : UIView
@property (nonatomic, assign) CGFloat progress;
@end
/*** ---------------分割线--------------- ***/
#import "HWCircleView.h"
#define KHWCircleLineWidth 10.0f
#define KHWCircleFont [UIFont boldSystemFontOfSize:26.0f]
#define KHWCircleColor [UIColor colorWithRed:0/255.0 green:191/255.0 blue:255/255.0 alpha:1]
@interface HWCircleView ()
@property (nonatomic, weak) UILabel *cLabel;
@end
@implementation HWCircleView
- (instancetype)initWithFrame:(CGRect)frame
{
 if (self = [super initWithFrame:frame]) {
  self.backgroundColor = [UIColor clearColor];
  //百分比标签
  UILabel *cLabel = [[UILabel alloc] initWithFrame:self.bounds];
  cLabel.font = KHWCircleFont;
  cLabel.textColor = KHWCircleColor;
  cLabel.textAlignment = NSTextAlignmentCenter;
  [self addSubview:cLabel];
  self.cLabel = cLabel;
 }
 return self;
}
- (void)setProgress:(CGFloat)progress
{
 _progress = progress;
 _cLabel.text = [NSString stringWithFormat:@"%d%%", (int)floor(progress * 100)];
 [self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect
{
 //路径
 UIBezierPath *path = [[UIBezierPath alloc] init];
 //线宽
 path.lineWidth = KHWCircleLineWidth;
 //颜色
 [KHWCircleColor set];
 //拐角
 path.lineCapStyle = kCGLineCapRound;
 path.lineJoinStyle = kCGLineJoinRound;
 //半径
 CGFloat radius = (MIN(rect.size.width, rect.size.height) - KHWCircleLineWidth) * 0.5;
 //画弧(参数:中心、半径、起始角度(3点钟方向为0)、结束角度、是否顺时针)
 [path addArcWithCenter:(CGPoint){rect.size.width * 0.5, rect.size.height * 0.5} radius:radius startAngle:M_PI * 1.5 endAngle:M_PI * 1.5 + M_PI * 22 * _progress clockwise:YES];
 //连线
 [path stroke];
}
@end
进度条HWProgressView:
[objc] view plain copy 在CODE上查看代码片派生到我的代码片
#import <UIKit/UIKit.h>
@interface HWProgressView : UIView
@property (nonatomic, assign) CGFloat progress;
@end
/*** ---------------分割线--------------- ***/
#import "HWProgressView.h"
#define KProgressBorderWidth 2.0f
#define KProgressPadding 1.0f
#define KProgressColor [UIColor colorWithRed:0/255.0 green:191/255.0 blue:255/255.0 alpha:1]
@interface HWProgressView ()
@property (nonatomic, weak) UIView *tView;
@end
@implementation HWProgressView
- (instancetype)initWithFrame:(CGRect)frame
{
 if (self = [super initWithFrame:frame]) {
  //边框
  UIView *borderView = [[UIView alloc] initWithFrame:self.bounds];
  borderView.layer.cornerRadius = self.bounds.size.height * 0.5;
  borderView.layer.masksToBounds = YES;
  borderView.backgroundColor = [UIColor whiteColor];
  borderView.layer.borderColor = [KProgressColor CGColor];
  borderView.layer.borderWidth = KProgressBorderWidth;
  [self addSubview:borderView];
  //进度
  UIView *tView = [[UIView alloc] init];
  tView.backgroundColor = KProgressColor;
  tView.layer.cornerRadius = (self.bounds.size.height - (KProgressBorderWidth + KProgressPadding) * 2) * 0.5;
  tView.layer.masksToBounds = YES;
  [self addSubview:tView];
  self.tView = tView;
 }
 return self;
}
- (void)setProgress:(CGFloat)progress
{
 _progress = progress;
 CGFloat margin = KProgressBorderWidth + KProgressPadding;
 CGFloat maxWidth = self.bounds.size.width - margin * 2;
 CGFloat heigth = self.bounds.size.height - margin * 2;
 _tView.frame = CGRectMake(margin, margin, maxWidth * progress, heigth);
}
@end
加载安装效果HWInstallView:
[objc] view plain copy 在CODE上查看代码片派生到我的代码片
#import <UIKit/UIKit.h>
@interface HWInstallView : UIView
@property (nonatomic, assign) CGFloat progress;
@end
/*** ---------------分割线--------------- ***/
#import "HWInstallView.h"
#define KHWInstallViewMargin 10
#define KHWInstallColor [UIColor colorWithRed:0/255.0 green:191/255.0 blue:255/255.0 alpha:1]
@implementation HWInstallView
- (instancetype)initWithFrame:(CGRect)frame
{
 if (self = [super initWithFrame:frame]) {
  self.backgroundColor = [UIColor clearColor];
 }
 return self;
}
- (void)setProgress:(CGFloat)progress
{
 _progress = progress;
 [self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect
{
 CGContextRef context = UIGraphicsGetCurrentContext();
 CGFloat xCenter = rect.size.width * 0.5;
 CGFloat yCenter = rect.size.height * 0.5;
 CGFloat radius = MIN(rect.size.width, rect.size.height) * 0.5 - KHWInstallViewMargin;
 //背景遮罩
 [KHWInstallColor set];
 CGFloat lineW = MAX(rect.size.width, rect.size.height) * 0.5;
 CGContextSetLineWidth(context, lineW);
 CGContextAddArc(context, xCenter, yCenter, radius + lineW * 0.5 + 5, 0, M_PI * 2, 1);
 CGContextStrokePath(context);
 //进程圆
 CGContextSetLineWidth(context, 1);
 CGContextMoveToPoint(context, xCenter, yCenter);
 CGContextAddLineToPoint(context, xCenter, 0);
 CGFloat endAngle = - M_PI * 0.5 + _progress * M_PI * 2 + 0.001;
 CGContextAddArc(context, xCenter, yCenter, radius, - M_PI * 0.5, endAngle, 1);
 CGContextFillPath(context);
}
@end

以上所述是小编给大家介绍的iOS 进度条、加载、安装动画的简单实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:http://blog.csdn.net/hero_wqb/article/details/60143077

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 详解iOS中跨页面状态同步方案比较

    详解iOS中跨页面状态同步方案比较

    这篇文章主要介绍了详解iOS中跨页面状态同步方案比较,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • iOS绘制专属于程序猿的浪漫爱心

    iOS绘制专属于程序猿的浪漫爱心

    谁说程序猿不懂浪漫,这篇文章主要介绍了iOS绘制专属于程序猿的浪漫爱心,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • IOS 开发之查看大图的实现代码

    IOS 开发之查看大图的实现代码

    这篇文章主要介绍了IOS 开发之查看大图的实现代码的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10
  • 基于IOS端微信分享失效的踩坑及解决方法

    基于IOS端微信分享失效的踩坑及解决方法

    下面小编就为大家分享一篇基于IOS端微信分享失效的踩坑及解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • iOS实现手指点击出现波纹的效果

    iOS实现手指点击出现波纹的效果

    最近在闲暇的时间做了一个反馈手指点击屏幕的效果,用到了CAShapeLayer和基本的动画知识,实现的效果很赞,这种效果使用在某些页面上肯定会给用户更有趣的体验,特别是面向儿童的app中。文中给出了详细的示例代码,感兴趣的朋友们下面来一起看看吧。
    2016-12-12
  • 如何利用iCloud Drive同步Xcode配置详解

    如何利用iCloud Drive同步Xcode配置详解

    这篇文章主要给大家介绍了关于如何利用iCloud Drive同步Xcode配置的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2018-05-05
  • Objective-C中NSNumber与NSDictionary的用法简介

    Objective-C中NSNumber与NSDictionary的用法简介

    这篇文章主要介绍了Objective-C中NSNumber与NSDictionary的用法简介,虽然Objective-C即将不再是iOS的主流开发语言...well,需要的朋友可以参考下
    2015-09-09
  • 关于iOS GangSDK的使用 为App快速集成社群公会模块

    关于iOS GangSDK的使用 为App快速集成社群公会模块

    这篇文章主要介绍了iOS GangSDK的使用为App快速集成社群公会模块功能的实现过程。
    2017-11-11
  • iOS开发中使用UILabel设置字体的相关技巧小结

    iOS开发中使用UILabel设置字体的相关技巧小结

    这篇文章主要介绍了iOS开发中UILabel设置字体的相关技巧小结,代码基于传统的Objective-C,需要的朋友可以参考下
    2016-01-01
  • iOS之UIWebView无法获取web标题的解决方法

    iOS之UIWebView无法获取web标题的解决方法

    这篇文章主要为大家详细介绍了iOS之UIWebView无法获取web标题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论