当前位置: 首页 > 编程笔记 >

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

谢和颂
2023-03-14
本文向大家介绍iOS中利用CoreAnimation实现一个时间的进度条效果,包括了iOS中利用CoreAnimation实现一个时间的进度条效果的使用技巧和注意事项,需要的朋友参考一下

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

 类似资料:
  • 本文向大家介绍ASP.NET实现进度条效果,包括了ASP.NET实现进度条效果的使用技巧和注意事项,需要的朋友参考一下 我们先看下进度条效果 我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了。 我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的) 然后需要一个进度条类ProgressBar.cs 然后就是调用方法了,调用很简单,在页

  • 本文向大家介绍WPF实现进度条实时更新效果,包括了WPF实现进度条实时更新效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了WPF实现一个实时更新的进度条,供大家参考,具体内容如下 效果图 xaml代码 后台代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。 

  • 本文向大家介绍Javascript+CSS3实现进度条效果,包括了Javascript+CSS3实现进度条效果的使用技巧和注意事项,需要的朋友参考一下 进度条在很多web中都能用的到,本文就是介绍了进度条效果,具体代码如下: 一:css2 属性clip实现网页进度条; 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解一下; 浏览器支持程度:所有

  • 本文向大家介绍PHP实现的进度条效果详解,包括了PHP实现的进度条效果详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了PHP实现的进度条效果。分享给大家供大家参考,具体如下: 在做采集的时候,想通过php来实现一个进度条功能,谷歌了一下,找了个合适的代码。下面直接上代码: 更多关于PHP相关内容感兴趣的读者可查看本站专题:《PHP数组(Array)操作技巧大全》、《PHP数学运算技巧总

  • 实现下图效果 要求 实际分数和刻度对应 350-550[2色渐变];550-600[3色渐变];600-650[4色渐变];650-700[5色渐变];700以上[6色渐变] 渐变起始位置为刻度表起始位置,终点位置为分数终点 其他简单的要求,比如字体颜色渐变啥的,就不列出来了 分析与思考 上面那些要求,是我拿到图后分解后的几个要求,由于分数是动态的,因此这里肯定不能直接丢个png上去,考虑了svg

  • 本文向大家介绍canvas实现环形进度条效果,包括了canvas实现环形进度条效果的使用技巧和注意事项,需要的朋友参考一下 昨下午睡着了,晚上打开手机才发现朋友给我发了一个QQ消息,问我这个怎么实现? 这里就选canvas来简单写一下 先上代码,然后在说一说需要注意的点: 接下来说一些注意点和我写的过程中碰到的疑问: 疑问: 01 整体代码没有封装成一个组件,感兴趣的同学可以封装一下。 我这有时间