个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章iOS 进度条、加载、安装动画的简单实现由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

首先看一下效果图:

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 进度条、加载、安装动画的简单实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我网站的支持！ 。

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

最后此篇关于iOS 进度条、加载、安装动画的简单实现的文章就讲到这里了,如果你想了解更多关于iOS 进度条、加载、安装动画的简单实现的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 微信拍一拍后缀很酷独特 独一无二的微信拍一拍后缀
文章推荐： 微信网名经典成熟大全 我会很洒脱
文章推荐： WiFi名称个性好听沙雕 连wifi5元/小时
文章推荐： 把Java程序打包成jar文件包并执行的方法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com