iOS中利用CoreAnimation實現一個時間的進度條效果

2020-07-26 02:43:00

字體：大中小

來源：轉載

供稿：網友

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

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