一个简易遮罩进度动画

需求

近期工作需求一个展示任务进度的动画，通过填充现有进度图的方式展示，并且有里程碑的节点需要配合数据进行暂停。好吧，文字讲得我自己都很难理解，来看一下效果吧。

image

红色的填充为当前的进度，验证登录阶段到导入账单阶段（导入阶段到完成）是有一个里程碑的节点的，所以需要通过数据来控制进度，让红色的进度条暂停在某一个位置等待数据。

方案思考

1.动画部分

展示一下层次结构，一切一目了然

image

简单的来讲：其实是有两个进度控制View，分别是灰色和红色，这里称红色的为maskView，灰色为bottomView。

在结构层次图中可以意识到只要让maskView有个位移动画就可以满足我们的需求。
注意：这个位移动画并不是UIView层面的动画，单纯移动整个maskView其实是会造成bottomView和maskView图标错位的现象，这并不是想要的效果。
正确的是对maskViewlayer的maskLayer层进行动画操作。

实现思路：让maskView的maskLayer初始位置在maskView的frame之外的左侧。动画开始之后让maskLayer慢慢向右移动，达到红色慢慢向右填充的效果。对maskLayer使用的动画可以是CABasicAnimation 或者CAKeyframeAnimation。此demo中使用关键帧动画 CAKeyframeAnimation

关键代码示例：

//初始化maksView的maskLayer位置
    CALayer *maskLayer; = [CALayer layer];
    maskLayer.backgroundColor = [[UIColor whiteColor] CGColor]; //任何颜色，用到的只是alpha
    maskLayer.anchorPoint = CGPointZero;
    maskLayer.frame = CGRectOffset(self.frame,-CGRectGetWidth(self.frame), 0);
    self.layer.mask = maskLayer;

//开始动画
    NSArray *values = @[[NSValue valueWithCGPoint:CGPointMake(-CGRectGetWidth(self.frame), 0)],
                        [NSValue valueWithCGPoint:CGPointMake(0, 0)]];
    
    CGFloat duration = 4.0;
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.values = values;
    animation.duration = duration;
    animation.delegate = self;
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    [maskLayer addAnimation:animation forKey:@"MaskAnimation"];

2.进度控制部分

如果只需要本文刚开始的贴图那样的效果，第一部分已经足够了。

第一部分只是解决了生成动画的问题，使用CAKeyframeAnimation对maskLayer进行关键帧动画是比较常见的做法，如果对CAKeyframeAnimation或者CABasicAnimation使用不熟悉可以参阅《iOS核心动画》缓冲

接下来要完成的是根据数据状态来控制动画，简单梳理了下我们要完成的目标：

状态	动画描述
登录中	红色maskLayer开始向右移动
登录超时	红色maskLayer移动暂停在1，2两个图标之间的进度条间
登录成功	红色maskLayer继续向右移动
导入中	红色maskLayer继续向右移动到2至3部分
导入超时	红色maskLayer移动暂停在2，3两个图标之间的进度条间
导入完成	红色maskLayer继续完成剩下的动画
提前完成	直接从当前的百分比位置快速完成剩下的动画
恢复进度	从任意进度恢复动画

抛开是数据，我们要完成的是以下五点：

1. 设定超时机制
2. 暂停动画
3. 恢复动画
4. 从任意进度值初始化动画
5. 从当前进度值快速完成动画

---

2.1 设定超时机制

这一步其实比较简单

先设定默认的登录超时时间和导入超时时间

static const CGFloat kGeneralLoginTime = 20.0;
static const CGFloat kGeneralImportTime = 30.0;

在视图中创建一个定时器，从动画开始计算经过的时间，与默认的时间判断是否在该状态已经超时。

- (void)displayLinkEvent {
    _currentTime ++;
    if (_currentTime == kGeneralLoginTime * 60 && self.status == Logining) {
        [self waitForVerify];
        NSLog(@"登录超时 %ld", _currentTime / 60);
    } else if (_currentTime - _loginSuccessTime == kGeneralImportTime * 60 && self.status == Importing) {
        [self waitForImport];
        NSLog(@"导入超时 %ld", (_currentTime - _loginSuccessTime)/60);
    }
    _lastPresentPosition = _maskLayer.presentationLayer.position;
}

---

2.2 暂停动画

//暂停动画
- (void)pauseLayer {
    CFTimeInterval pausedTime = [_maskLayer convertTime:CACurrentMediaTime() fromLayer:nil];
    self.layer.speed = 0.0;
    self.layer.timeOffset = pausedTime;
} 

---

2.3 恢复动画

//恢复动画
- (void)resumeLayer {
    CFTimeInterval pausedTime = [self.layer timeOffset];
    self.layer.speed = 1.0;
    self.layer.timeOffset = 0.0;
    self.layer.beginTime = 0.0;
    CFTimeInterval timeSincePause = [_maskLayer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    self.layer.beginTime = timeSincePause;
}

---

2.4 从任意进度值初始化

//设置一个startVlaue的初始化值
- (void)setStartValue:(CGFloat)startValue {
    [self stopAnimation];
    _startValue = startValue;
    //_lastPresentPosition为maskLayer上一次展示position属性
    _lastPresentPosition = CGPointMake(startValue * CGRectGetWidth(self.frame) - CGRectGetWidth(self.frame), 0);
    [self resumeLayer];
    [self startAnimation];
}

//从上一次动画
- (void)startAnimation {
    NSArray *values = @[[NSValue valueWithCGPoint:_lastPresentPosition],
                        [NSValue valueWithCGPoint:CGPointMake(0, 0)]];
    
    CGFloat duration = kGeneralLoginTime + kGeneralImportTime + 1;
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.values = values;
    animation.duration = duration;
    animation.delegate = self;
    //自然导入完成之后不保留mask层的位置信息，回归到初始位置
    animation.fillMode = kCAFillModeRemoved;
    animation.removedOnCompletion = YES;
    [_maskLayer addAnimation:animation forKey:@"MaskAnimation"];
    _displayLink.paused = NO;
}

2.5 从当前进度值快速完成动画

//  提前结束动画
- (void)animationAdvancedFinished
{
    [self resumeLayer];
    
    CGFloat duration = _advancedFinishDuring;
    NSArray *values = @[[NSValue valueWithCGPoint:_lastPresentPosition],
                        [NSValue valueWithCGPoint:CGPointMake(0, 0)]];
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.values = values;
    animation.duration = duration;
    animation.delegate = self;
    //提前结束动画完成之后保留mask层的位置信息，保持动画完成时的样式
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    [_maskLayer addAnimation:animation forKey:@"AdvancedMaskAnimation"];
}

上面代码片段中的_advancedFinishDuring动画时间，是根据触发快速完成动画时的进度值百分比 乘以 快速完成动画所需要的总时间计算出来的。下面是计算的一个例子：

- (void)verifySuccess {
    [self resumeLayer];
    self.status = Importing;
    self.displayLink.paused = NO;
    if (!self.loginSuccessTime) {
        self.loginSuccessTime = self.currentTime;
    }
    self.advancedFinishDuring = ((-_lastPresentPosition.x) / CGRectGetWidth(self.frame)) * kGeneralCacheCompleteTime;
}

至此进度控制就可以的需求就可以使用以上的关键方法完成了, 查看完成的逻辑可以下载demo查看
Demo地址 如果有帮助送颗星吧

demo

不足

• 进度控制部分的超时跟maskLayer位置的对应关系比较生硬

个人对动画理解还不深，代码笨拙。还请朋友多批评指教！