在iOS中实现进度条通常都是通过不停的设置progress来完成的，这样的进度条适用于网络加载（上传下载文件、图片等）。但是对于录制视频这样的需求的话，如果是按照每秒来设置进度的话，显得有点麻烦，于是我就想直接用CoreAnimation来按时间做动画，只要设置最大时间，其他的就不用管了，然后在视频暂停与继续录制时，对动画进行暂停和恢复即可。录制视频的效果如下：
你可以在这里下载demo
那么接下来就是如何用CoreAnimation实现一个进度条控件了。
首先呢，让我们创建一个继承自CAShapeLayer的WKProgressBarLayer。
WKProgressBarLayer默认自身的bounds就是整个进度条的大小。
?
|
1
2
|
@interface WKProgressBarLayer : CAShapeLayer
@end
|
为了方便外部调用，首先在WKProgressBarLayer.h中定义枚举来表明动画的四个状态
?
|
1
2
3
4
5
6
|
typedef NS_ENUM(NSInteger, WKAnimationStatus) {
WKAnimationStatusIdle,//空闲
WKAnimationStatusAnimating,//动画中
WKAnimationStatusPause,//暂停
WKAnimationStatusComplete//完成
};
|
接下来，定义外部调用的动画接口
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
@interface WKProgressBarLayer : CAShapeLayer
@property (nonatomic, assign, readonly) WKAnimationStatus animatingStatus;//状态
/**
开始动画
@param duration 动画最大时长
*/
- (void)beginAnimationWithDuration:(CGFloat)duration;
/**
暂停
*/
- (void)pauseAnimation;
/**
恢复
*/
- (void)resumeAnimation;
/**
重新开始动画
@param progress 从哪个进度开始
@param duration 动画最大时长
*/
- (void)restartAnimationWithProgress:(CGFloat)progress duration:(NSTimeInterval)duration;
@end
|
然后，我们在.m实现核心的动画开始方法startAnimtionWithBeginProgress:duration:，详细解释见代码
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
- (void)startAnimtionWithBeginProgress:(CGFloat)beginProgress duration:(NSTimeInterval)duration
{
[self reset];//重置动画
//设置path
UIBezierPath *fromPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, beginProgress * self.bounds.size.width, self.bounds.size.height)];;
UIBezierPath *toPath = [UIBezierPath bezierPathWithRect:self.bounds];
self.path = fromPath.CGPath;
//创建动画
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.fromValue = (id)fromPath.CGPath;
animation.toValue = (id)toPath.CGPath;
animation.duration = duration;
[animation setValue:@1 forKey:@"progress"];//用于判断是否是进度动画
animation.delegate = self; //用于判断动画结束
[self addAnimation:animation forKey:@"progressAnimation"];
self.path = toPath.CGPath;
}
|
然后呢，需要在动画的delegate与暂停、恢复动画的方法中分别修改动画的状态
?
|
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
|
- (void)pauseAnimation
{
CFTimeInterval pausedTime = [self convertTime:CACurrentMediaTime() fromLayer:nil];
self.speed = 0.0;
self.timeOffset = pausedTime;
self.animatingStatus = WKAnimationStatusPause;
}
- (void)resumeAnimation
{
CFTimeInterval pausedTime = [self timeOffset];
self.speed = 1.0;
self.timeOffset = 0.0;
self.beginTime = 0.0;
CFTimeInterval timeSincePause = [self convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
self.beginTime = timeSincePause;
self.animatingStatus = WKAnimationStatusAnimating;
}
#pragma mark - CAAnimationDelegate
/* Called when the animation begins its active duration. */
- (void)animationDidStart:(CAAnimation *)anim
{
if (anim == [self animationForKey:@"progressAnimation"]) {//判断进度动画
self.animatingStatus = WKAnimationStatusAnimating;
}
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
if ([anim valueForKey:@"progress"] && flag == YES) {//判断进度动画
self.animatingStatus = WKAnimationStatusComplete;
}
}
|
至此，进度条layer就完成了，现在创建一个控制器来做测试
首先在storyBoard摆上两个按钮，分别是开始与重置动画(界面搭建很简单，详情见demo)
然后在ViewDidLoad中添加progressLayer
?
|
1
2
3
4
5
6
7
8
9
10
|
- (void)viewDidLoad {
[super viewDidLoad];
WKProgressBarLayer *progressLayer = [[WKProgressBarLayer alloc] init];
progressLayer.frame = CGRectMake(100, 100, 200, 10);
[self.view.layer addSublayer:progressLayer];
self.progressLayer = progressLayer;
}
|
接下来，就是动画开始与重置响应
?
|
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
|
- (IBAction)startOrPauseAction:(UIButton *)sender {
switch (self.progressLayer.animatingStatus) {
case WKAnimationStatusIdle:{
[self.progressLayer beginAnimationWithDuration:10];
}
break;
case WKAnimationStatusAnimating:{
[self.progressLayer pauseAnimation];
}
break;
case WKAnimationStatusPause:{
[self.progressLayer resumeAnimation];
}
break;
case WKAnimationStatusComplete:{
[self.progressLayer restartAnimationWithProgress:0 duration:10];
}
break;
default:
break;
}
sender.selected = !sender.selected;
}
- (IBAction)resetAction:(UIButton *)sender {
[self.progressLayer restartAnimationWithProgress:0 duration:10];
self.startOrPauseButton.selected = YES;
}
|
以上就是代码主体了，接下来，让我们看看效果
你可以在这里下载demo
总结
以上所述是小编给大家介绍的iOS中利用CoreAnimation实现一个时间的进度条，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对快网idc网站的支持！
相关文章
猜你喜欢
- 64M VPS建站：是否适合初学者操作和管理？ 2025-06-10
- ASP.NET自助建站系统中的用户注册和登录功能定制方法 2025-06-10
- ASP.NET自助建站系统的域名绑定与解析教程 2025-06-10
- 个人服务器网站搭建：如何选择合适的服务器提供商？ 2025-06-10
- ASP.NET自助建站系统中如何实现多语言支持？ 2025-06-10
