顺时针、逆时针两种方式减小的倒计时动画

倒计时动画

早些时间，在简书闲逛的时候看到了一篇关于载入LodingView的动画，便默默的收藏了。正好公司接下来的项目要用到，顺手写了一个倒计时的动画。
其实构造十分的简单，由几根粗线条填充点颜色，加上一个路径就构成了这个倒计时。
简单看来就是这样：
第一种是顺时针减小的倒计时：

第二种是逆时针减小的倒计时：

下面上代码分析一下：
这里顺时针减小的时候矩形和圆形我都是用CAShapeLayer这个类来做的。

  //顺时针画矩形
  _rectShapeLayer = [CAShapeLayer layer];
  _rectShapeLayer.strokeStart = 0.0f;
  _rectShapeLayer.strokeEnd = 1.0f;
  UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.bounds];
  _rectShapeLayer.path = path.CGPath;
  _rectShapeLayer.fillColor = [UIColor clearColor].CGColor;
  _rectShapeLayer.lineWidth = 2.0f;
  _rectShapeLayer.strokeColor = [UIColor redColor].CGColor;
  [self.layer addSublayer:_rectShapeLayer];

  //画圆
    _circleLayer = [CAShapeLayer layer];
    _circleLayer.strokeStart = 0.0f;
    _circleLayer.strokeEnd = 1.0f;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:self.frame.size.width / 2 startAngle:0 endAngle:2*M_PI clockwise:_closewire];
    _circleLayer.path = path.CGPath;
    _circleLayer.fillColor = [UIColor clearColor].CGColor;
    _circleLayer.lineWidth = 2.0f;
    _circleLayer.strokeColor = [UIColor redColor].CGColor;
    [self.layer addSublayer:_circleLayer];

CAShapeLayer能够做的东西有很多，比CALayer要丰富些。
CAShapeLayer其实用来画弧形是比较好用的，比用CGContextRef去画要简单明了一些。
实现动画的部分我使用CABasicAnimation来实现的，因为其属性比较简单实用，然后参考了一些大神的博客。

//矩形的动画
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:_closewire?kClockwiseRectAnimationKey:kAntiClockwiseRectAnimationKey];
    basicAnimation.fromValue = @(0.0);
    basicAnimation.toValue =  _closewire?@(1.0):@(4.0);
    basicAnimation.duration = _duration;
    basicAnimation.fillMode = kCAFillModeForwards;
    basicAnimation.removedOnCompletion = YES;
    basicAnimation.delegate = self;
    if (_closewire) [_rectShapeLayer addAnimation:basicAnimation forKey:nil];
    else [self.rectLayer addAnimation:basicAnimation forKey:nil];
//圆的动画
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    basicAnimation.fromValue = @(0.0);
    basicAnimation.toValue = @(1.0);
    basicAnimation.duration = _duration;
    basicAnimation.fillMode = kCAFillModeForwards;
    basicAnimation.removedOnCompletion = YES;
    basicAnimation.delegate = self;
    [_circleLayer addAnimation:basicAnimation forKey:nil];

由于顺时针和逆时针的关系，矩形用CAShapeLayer来绘制的时候只能顺时针减小，所以在逆时针的时候我用了drawInContext方法去绘制，而圆则简单许多，在UIBezierPath的类方法中有画圆的详细设置，顺时针和逆时针都能很方便的设置。
矩形逆时针减小的绘制：

UIBezierPath *path = [UIBezierPath bezierPath];
    //第一段
    if (self.progress >= 0 && self.progress <= 1) {
        CGFloat changeX1 = (1- self.progress) * (self.frame.size.width);
        [path moveToPoint:CGPointMake(0, 0)];
        [path addLineToPoint:CGPointMake(changeX1, 0)];

        [path moveToPoint:CGPointMake(0,  self.frame.size.height)];
        [path addLineToPoint:CGPointMake( 0, 0)];

        [path moveToPoint:CGPointMake( self.frame.size.width, self.frame.size.height)];
        [path addLineToPoint:CGPointMake(0, self.frame.size.height)];

        [path moveToPoint:CGPointMake(self.frame.size.width, 0)];
        [path addLineToPoint:CGPointMake(self.frame.size.width,self.frame.size.height)];
    }

    //第二段
    if (self.progress >= 1 && self.progress <= 2) {
        CGFloat changeY1 = (self.progress - 1) *self.frame.size.height;
        [path moveToPoint:CGPointMake(0 ,self.frame.size.height)];
        [path addLineToPoint:CGPointMake(0, changeY1)];

        [path moveToPoint:CGPointMake( self.frame.size.width, self.frame.size.height)];
        [path addLineToPoint:CGPointMake(0, self.frame.size.height)];

        [path moveToPoint:CGPointMake(self.frame.size.width, 0)];
        [path addLineToPoint:CGPointMake(self.frame.size.width,self.frame.size.height)];
    }

    //第三段
    if (self.progress >= 2 && self.progress <= 3) {
        CGFloat changeX2 = (self.progress - 2) *(self.frame.size.width);
        [path moveToPoint:CGPointMake(self.frame.size.width, self.frame.size.height)];
        [path addLineToPoint:CGPointMake(changeX2, self.frame.size.height)];

        [path moveToPoint:CGPointMake(self.frame.size.width, 0)];
        [path addLineToPoint:CGPointMake(self.frame.size.width,self.frame.size.height)];
    }

    //第四段
    if (self.progress >= 3 && self.progress <= 4) {
        CGFloat changeY2 = (4 - self.progress) *self.frame.size.height;
        [path moveToPoint:CGPointMake( self.frame.size.width, 0)];
        [path addLineToPoint:CGPointMake(self.frame.size.width, changeY2)];
    }

    CGContextAddPath(context, path.CGPath);
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetLineWidth(context, 2.0);
    CGContextStrokePath(context);

通过改变其中需要变化的数值，并不断地去绘制，这样就得到一个不断减小的图形。
demo我已上传，需要的同学可以去下载：
顺时针、逆时针两种方式减小的倒计时动画