SVProgressHUD框架解析

SVProgressHUD框架的简单易用让他深受多数开发者的青睐，在github上获得了11.5k个小星星！这个框架提供了获取数据时添加加载提示遮罩，获取数据加载完成时显示成功，亦或数据获取失败时的遮罩提示。

演示效果

代码结构

 

SVIndefiniteAnimatedView实现

- (CAShapeLayer*)indefiniteAnimatedLayer {
    if(!_indefiniteAnimatedLayer) {
        CGPoint arcCenter = CGPointMake(self.radius+self.strokeThickness/2+5, self.radius+self.strokeThickness/2+5);
        UIBezierPath* smoothedPath = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:self.radius startAngle:(CGFloat) (M_PI*3/2) endAngle:(CGFloat) (M_PI/2+M_PI*5) clockwise:YES];
        
        _indefiniteAnimatedLayer = [CAShapeLayer layer];
        // 省略部分代码
        // 设置绘制的圆形_indefiniteAnimatedLayer的相关属性
        _indefiniteAnimatedLayer.path = smoothedPath.CGPath;
        
        CALayer *maskLayer = [CALayer layer];
        // 省略部分代码
        // 设置遮罩_indefiniteAnimatedLayer的相关属性
        _indefiniteAnimatedLayer.mask = maskLayer;
        
        // 设置圆形layer旋转动画
        NSTimeInterval animationDuration = 1;
        CAMediaTimingFunction *linearCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
        animation.fromValue = (id) 0;
        animation.toValue = @(M_PI*2);
        animation.duration = animationDuration;
        animation.timingFunction = linearCurve;
        animation.removedOnCompletion = NO;
        animation.repeatCount = INFINITY;
        animation.fillMode = kCAFillModeForwards;
        animation.autoreverses = NO;
        [_indefiniteAnimatedLayer.mask addAnimation:animation forKey:@"rotate"];
        
        // 设置strokeStart和strokeEnd参数使圆形头和尾产生间距
        CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
        animationGroup.duration = animationDuration;
        animationGroup.repeatCount = INFINITY;
        animationGroup.removedOnCompletion = NO;
        animationGroup.timingFunction = linearCurve;
        
        CABasicAnimation *strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
        strokeStartAnimation.fromValue = @0.015;
        strokeStartAnimation.toValue = @0.515;
        
        CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        strokeEndAnimation.fromValue = @0.485;
        strokeEndAnimation.toValue = @0.985;
        
        animationGroup.animations = @[strokeStartAnimation, strokeEndAnimation];
        [_indefiniteAnimatedLayer addAnimation:animationGroup forKey:@"progress"];
        
    }
    return _indefiniteAnimatedLayer;
}

• 原理步骤：

1. 使用图层layer并通过贝塞尔曲线绘制一个圆圈；
2. 通过获取png图片angle-mask设置为图层layer的mask遮罩，图片可以设置不同透明值来控制图层layer的显示样式；当透明值为0时，图层layer的mask遮罩部分则不会显示，当透明值大于0时，则会按照透明值比例显示图层layer的mask遮罩部分；
3. 通过CABasicAnimation动画设置图层_indefiniteAnimatedLayer的transform.rotation属性使其旋转；
4. 通过CAAnimationGroup动画组来设置_indefiniteAnimatedLayer图层strokeStart和strokeEnd属性，使其头尾之间存在一定的距离；
5. SVIndefiniteAnimatedView用于旋转加载的提示样式；

SVProgressAnimatedView

- (CAShapeLayer*)ringAnimatedLayer {
    if(!_ringAnimatedLayer) {
        CGPoint arcCenter = CGPointMake(self.radius&#