iOS中利用CoreAnimation实现一个时间的进度条效果_网络技术

iOS中利用CoreAnimation实现一个时间的进度条效果

发布时间 - 2026-01-11 03:03:58 点击率：次

在iOS中实现进度条通常都是通过不停的设置progress来完成的，这样的进度条适用于网络加载（上传下载文件、图片等）。但是对于录制视频这样的需求的话，如果是按照每秒来设置进度的话，显得有点麻烦，于是我就想直接用CoreAnimation来按时间做动画，只要设置最大时间，其他的就不用管了，然后在视频暂停与继续录制时，对动画进行暂停和恢复即可。录制视频的效果如下：

你可以在这里下载demo

那么接下来就是如何用CoreAnimation实现一个进度条控件了。

首先呢，让我们创建一个继承自CAShapeLayer的WKProgressBarLayer。

WKProgressBarLayer默认自身的bounds就是整个进度条的大小。

@interface WKProgressBarLayer : CAShapeLayer
@end

为了方便外部调用，首先在WKProgressBarLayer.h中定义枚举来表明动画的四个状态

typedef NS_ENUM(NSInteger, WKAnimationStatus) {
 WKAnimationStatusIdle,//空闲
 WKAnimationStatusAnimating,//动画中
 WKAnimationStatusPause,//暂停
 WKAnimationStatusComplete//完成
};

接下来，定义外部调用的动画接口

@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:，详细解释见代码

- (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与暂停、恢复动画的方法中分别修改动画的状态

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

- (void)viewDidLoad {
 [super viewDidLoad];
  
 WKProgressBarLayer *progressLayer = [[WKProgressBarLayer alloc] init];
 progressLayer.frame = CGRectMake(100, 100, 200, 10);
  
 [self.view.layer addSublayer:progressLayer];
  
 self.progressLayer = progressLayer;
}

接下来，就是动画开始与重置响应

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

# coreanimation # 时间 # 进度条 # iOS实现步骤进度条功能实例代码 # 使用axios实现上传图片进度条功能 # ios开发加载webview显示进度条实例 # iOS 进度条、加载、安装动画的简单实现 # Android仿IOS ViewPager滑动进度条 # iOS实现带动画的环形进度条 # iOS快速实现环形渐变进度条 # iOS中使用NSProgress类来创建UI进度条的方法详解 # IOS实现简单的进度条功能 # iOS中WKWebView仿微信加载进度条 # 在这里 # 你可以 # 让我们 # 创建一个 # 小编 # 时长 # 在此 # 其他的 # 适用于 # 给大家 # 很简单 # 来做 # 来完成 # 所述 # 给我留言 # 如何用 # 感谢大家 # 我就想 # 摆上

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：怎么用AI帮你制定个人年度计划？3步实现清晰的目标管理

下一篇：云建站一般需要多少钱？低至10元还是高达千元？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：怎么用AI帮你制定个人年度计划？3步实现清晰的目标管理

下一篇：云建站一般需要多少钱？低至10元还是高达千元？