利用CoreAnimation实现一个时间的进度条
2017-08-31 20:21
776 查看
(个人原创,转载请注明出处 http://www.cnblogs.com/pretty-guy/p/7460334.html)
在iOS中实现进度条通常都是通过不停的设置progress来完成的,这样的进度条适用于网络加载(上传下载文件、图片等)。但是对于录制视频这样的需求的话,如果是按照每秒来设置进度的话,显得有点麻烦,于是我就想直接用CoreAnimation来按时间做动画,只要设置最大时间,其他的就不用管了,然后在视频暂停与继续录制时,对动画进行暂停和恢复即可。录制视频的效果如下:
你可以在这里下载demo
那么接下来就是如何用CoreAnimation实现一个进度条控件了。
首先呢,让我们创建一个继承自CAShapeLayer的WKProgressBarLayer。
WKProgressBarLayer默认自身的bounds就是整个进度条的大小。
为了方便外部调用,首先在WKProgressBarLayer.h中定义枚举来表明动画的四个状态
接下来,定义外部调用的动画接口
然后,我们在.m实现核心的动画开始方法startAnimtionWithBeginProgress:duration:,详细解释见代码
然后呢,需要在动画的delegate与暂停、恢复动画的方法中分别修改动画的状态
至此,进度条layer就完成了,现在创建一个控制器来做测试
首先在storyBoard摆上两个按钮,分别是开始与重置动画(界面搭建很简单,详情见demo)
然后在ViewDidLoad中添加progressLayer
接下来,就是动画开始与重置响应
以上就是代码主体了,接下来,让我们看看效果
你可以在这里下载demo
在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实现一个时间的进度条
- 利用CoreAnimation实现一个时间的进度条
- 利用头文件ctime,并且定义一个类,来实现输出当前时间
- 利用BIOS中断或DOS中断实现一个显示当前时间的程序
- 利用面向对象的思想实现一套代码,要求一个APP支持微信支付,支付宝支付,银联支付
- 【Android游戏开发十六】Android Gesture之【触摸屏手势识别】操作!利用触摸屏手势实现一个简单切换图片的功能!
- 利用Visual C#打造一个平滑的进度条
- 实现一个栈,要求实现Push(入栈)、Pop(出栈)、Min(返回最小值的操作)的时间复杂度为O(1)
- 利用C++11实现一个自动注册的工厂
- 利用ffmpeg和SDL实现一个跨android版本的音视频播放器
- 【Java】利用注解和反射实现一个"低配版"的依赖注入
- 两个堆栈实现一个队列 , 利用两个队列实现一个堆栈(Java)
- (1)知识准备【利用objective-c的runtime特性,结合FMDB实现一个轻量级的ORM】
- 利用数学方法来大大降低一个逻辑判断实现的难度的例子
- 【业务】Vue项目里利用md5的来实现一个权限系统的思路记录
- [原创]利用php和javascript实现服务器时间电子时钟
- 【导读】本文介绍如何利用带进度条的ASP无组件实现断点续传下载,给出详细代码
- 利用ASIHttpRequest实现一个简单的登录验证
- 利用AJAX技术实现网页无刷新进度条显示