快捷導(dǎo)航

iOS中利用CoreAnimation實現(xiàn)一個時間的進度條效果

更新時間：2017年09月01日 10:42:59 作者：pretty guy

在iOS中實現(xiàn)進度條通常都是通過不停的設(shè)置progress來完成的，這樣的進度條適用于網(wǎng)絡(luò)加載（上傳下載文件、圖片等）。下面通過本文給大家介紹iOS中利用CoreAnimation實現(xiàn)一個時間的進度條，需要的的朋友參考下吧

在iOS中實現(xiàn)進度條通常都是通過不停的設(shè)置progress來完成的，這樣的進度條適用于網(wǎng)絡(luò)加載（上傳下載文件、圖片等）。但是對于錄制視頻這樣的需求的話，如果是按照每秒來設(shè)置進度的話，顯得有點麻煩，于是我就想直接用CoreAnimation來按時間做動畫，只要設(shè)置最大時間，其他的就不用管了，然后在視頻暫停與繼續(xù)錄制時，對動畫進行暫停和恢復(fù)即可。錄制視頻的效果如下：

你可以在這里下載demo

那么接下來就是如何用CoreAnimation實現(xiàn)一個進度條控件了。

首先呢，讓我們創(chuàng)建一個繼承自CAShapeLayer的WKProgressBarLayer。

WKProgressBarLayer默認自身的bounds就是整個進度條的大小。

@interface WKProgressBarLayer : CAShapeLayer
@end

為了方便外部調(diào)用，首先在WKProgressBarLayer.h中定義枚舉來表明動畫的四個狀態(tài)

typedef NS_ENUM(NSInteger, WKAnimationStatus) {
 WKAnimationStatusIdle,//空閑
 WKAnimationStatusAnimating,//動畫中
 WKAnimationStatusPause,//暫停
 WKAnimationStatusComplete//完成
};

接下來，定義外部調(diào)用的動畫接口

@interface WKProgressBarLayer : CAShapeLayer
@property (nonatomic, assign, readonly) WKAnimationStatus animatingStatus;//狀態(tài)
/**
 開始動畫
 @param duration 動畫最大時長
 */
- (void)beginAnimationWithDuration:(CGFloat)duration;
/**
 暫停
 */
- (void)pauseAnimation;
/**
 恢復(fù)
 */
- (void)resumeAnimation;
/**
 重新開始動畫
 @param progress 從哪個進度開始
 @param duration 動畫最大時長
 */
- (void)restartAnimationWithProgress:(CGFloat)progress duration:(NSTimeInterval)duration;
@end

然后，我們在.m實現(xiàn)核心的動畫開始方法startAnimtionWithBeginProgress:duration:，詳細解釋見代碼

- (void)startAnimtionWithBeginProgress:(CGFloat)beginProgress duration:(NSTimeInterval)duration
{
 [self reset];//重置動畫
 //設(shè)置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;
 //創(chuàng)建動畫
 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; //用于判斷動畫結(jié)束
 [self addAnimation:animation forKey:@"progressAnimation"];
 self.path = toPath.CGPath;
}

然后呢，需要在動畫的delegate與暫停、恢復(fù)動畫的方法中分別修改動畫的狀態(tài)

- (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就完成了，現(xiàn)在創(chuàng)建一個控制器來做測試

首先在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;
}

接下來，就是動畫開始與重置響應(yīng)

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

以上就是代碼主體了，接下來，讓我們看看效果