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

2020-01-21 00:30:29王冬梅

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

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;
}