最近項目中的需求，拿出來記錄一下，先看效果圖:

效果圖.gif

分析：這個動畫其實只有兩端弧L1和L2，動畫過程就是L1的起點到L2的終點，L1的終點到L2的起點，L2的起點到L1的終點，L2的終點到L1的起點，L1和L2增量是一樣的，這樣就簡單了。

然后寫一個繼承自CALayer的類，然后寫兩個參數，使用這兩個參數來控制L1和L2的起點和終點，然后我們對著兩個參數做動畫，然后動畫就可以實現了

思路說完了，開始上代碼，這是layer里邊的全部代碼：

@interface N_refreshLayer : CALayer
// 開始繪制點增量 取值范圍 0 - 1
@property (nonatomic, assign) CGFloat startPross;
// 結束繪制點增量 取值范圍 0 - 1
@property (nonatomic, assign) CGFloat endPross;
// 這個用來控制layer的透明度（項目需求，沒有需求可以不要）
@property (nonatomic, assign) CGFloat lineAlpha;

@end

@implementation N_refreshLayer

// 重寫系統方法，當key為startPross或者endPross的時候進行重新繪制
+ (BOOL)needsDisplayForKey:(NSString *)key {
    if ([key isEqualToString:@"startPross"] || [key isEqualToString:@"endPross"]) {
        return YES;
    }
    return [super needsDisplayForKey:key];
}

// 重寫系統方法，繪制圓弧
- (void)drawInContext:(CGContextRef)ctx {
    
    // 這里邊 - 1 是減去線寬的一半， - 6 是弧距離邊界的距離
    CGFloat radius = MIN(CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds)) / 2 - 1 - 6;
    CGPoint center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    // L1
    UIBezierPath *path1 = [UIBezierPath bezierPath];
    // 這里說一下，順時針角度為正，逆時針角度為負，我在-90°處開始繪制，后邊M_PI*0.05是兩條弧之間的間隔，最后邊2*M_PI*參數，是控制增量的（M_PI是180°）
    CGFloat startAngle1= -M_PI_2 + M_PI*0.05- 2*M_PI*self.startPross;
    CGFloat endAngle1 = -M_PI_2 - M_PI*0.05 - 2*M_PI*self.endPross;
    [path1 addArcWithCenter:center radius:radius startAngle:startAngle1 endAngle:endAngle1 clockwise:NO];
    // L1    
    UIBezierPath *path2 = [UIBezierPath bezierPath];
    CGFloat startAngle2 = -M_PI_2 - M_PI*0.25 - 2*M_PI*self.endPross;
    CGFloat endAngle2 = -M_PI_2 + M_PI*0.25 - 2*M_PI*self.startPross;
    [path2 addArcWithCenter:center radius:radius startAngle:startAngle2 endAngle:endAngle2 clockwise:NO];
    
    CGContextAddPath(ctx, path1.CGPath);
    CGContextAddPath(ctx, path2.CGPath);
    CGContextSetLineWidth(ctx, 2);
    CGContextSetLineCap(ctx, kCGLineCapRound);
    CGContextSetStrokeColorWithColor(ctx, kRGBAColor(255, 0, 0, 1.0).CGColor);
    CGContextStrokePath(ctx);
}

- (void)setLineAlpha:(CGFloat)lineAlpha {
    self.opacity = lineAlpha;
}

然后在封裝一個view將layer添加到view的layer上，在view里邊控制layer的參數，view中的全部代碼：

// .h文件
@interface N_RefreshAnimView : UIView
// 提供幾個控制動畫的方法
// 開始執行動畫
- (void)startAnimation;
// 停止動畫
- (void)stopAnimation;
// 設置增量（可以根據scrollView的偏移量來設置進度）
- (void)setProgressWith:(CGFloat)progress;
// 設置layer的透明度
- (void)setLineAlphaWith:(CGFloat)lineAlpha;

@end

// .m文件
@interface N_RefreshAnimView ()

@property (nonatomic, strong) N_refreshLayer *animLayer;
@property (nonatomic, strong) CABasicAnimation *anim1;
@property (nonatomic, strong) CABasicAnimation *anim2;

@end

@implementation N_RefreshAnimView

// 初始化方法
- (instancetype)init {
    if (self = [super init]) {
        [self.layer addSublayer:self.animLayer];
    }
    return self;
}

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self.layer addSublayer:self.animLayer];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder]) {
        [self.layer addSublayer:self.animLayer];
    }
    return self;
}

- (void)startAnimation {
    CABasicAnimation *anim1 = (CABasicAnimation *)[self.animLayer animationForKey:@"anim1"];
    CABasicAnimation *anim2 = (CABasicAnimation *)[self.animLayer animationForKey:@"anim2"];
    // 如果layer上不存在動畫，則進行添加動畫
    if (!anim1) [self.animLayer addAnimation:self.anim1 forKey:@"anim1"];
    if (!anim2) [self.animLayer addAnimation:self.anim2 forKey:@"anim2"];
    // 如果存在動畫則不繼續執行
    if (anim1 && anim2 && self.animLayer.speed == 1) return;
    CFTimeInterval pauseTime = self.animLayer.timeOffset;
    CFTimeInterval begin = CACurrentMediaTime() - pauseTime;
    [self.animLayer setTimeOffset:0];
    [self.animLayer setBeginTime:begin];
    self.animLayer.speed = 1;
}

- (void)stopAnimation {
    // 設置layer的動畫速度為0則停止動畫
    CFTimeInterval pausedTime = [self.animLayer convertTime:CACurrentMediaTime() fromLayer:nil];
    self.animLayer.speed = 0.0;
    // 記錄動畫暫停的時間，在恢復動畫的時候使用
    self.animLayer.timeOffset = pausedTime;
}

- (void)setProgressWith:(CGFloat)progress {
    [self.animLayer removeAllAnimations];
    self.animLayer.speed = 1.0;
    self.animLayer.startPross = progress * 0.15;
    self.animLayer.endPross = progress * 0.85;
    [self.animLayer setNeedsDisplay];
}

- (void)setLineAlphaWith:(CGFloat)lineAlpha {
    self.animLayer.lineAlpha = lineAlpha;
}

// 懶加載layer
- (N_refreshLayer *)animLayer {
    if (!_animLayer) {
        _animLayer = [[N_refreshLayer alloc] init];
        _animLayer.startPross = 0.0;
        _animLayer.endPross = 0.0;
        [_animLayer setNeedsDisplay];
    }
    return _animLayer;
}

// 懶加載動畫
- (CABasicAnimation *)anim1 {
    if (!_anim1) {
        _anim1 = [CABasicAnimation animationWithKeyPath:@"startPross"];
        _anim1.removedOnCompletion = NO;
        _anim1.fillMode = kCAFillModeForwards;
        _anim1.repeatCount = MAXFLOAT;
        _anim1.duration = 0.8;
       // 動畫1的增量加上動畫2的增量為360°，增量與1之間差值的和為L1加間距的弧度 
        _anim1.toValue = [NSNumber numberWithFloat:0.15];
        _anim1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    }
    return _anim1;
}

- (CABasicAnimation *)anim2 {
    if (!_anim2) {
        _anim2 = [CABasicAnimation animationWithKeyPath:@"endPross"];
        _anim2.removedOnCompletion = NO;
        _anim2.fillMode = kCAFillModeForwards;
        _anim2.repeatCount = MAXFLOAT;
        _anim2.duration = 0.8;
       // 動畫1的增量加上動畫2的增量為360°，增量與1之間差值的和為L1加間距的弧度
        _anim2.toValue = [NSNumber numberWithFloat:0.85];
        _anim2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    }
    return _anim2;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    self.animLayer.frame = self.bounds;
}

到此為止這個動畫就可以使用了，細心的小伙伴會發現，這樣畫出來的線條會有鋸齒，解決辦法設置 _animLayer.contentsScale = [[UIScreen mainScreen] scale]; 就可以了，為了這個問題，浪費了我一下午時間，最后就TM一行代碼

下邊是配合MJRefresh使用做下拉刷新，那么自定義MJRefresh，代碼如下：

.h文件
#import <MJRefresh/MJRefresh.h>
#import "N_RefreshAnimView.h"

@interface N_RefreshHeader : MJRefreshHeader

@end

.m文件
@interface N_RefreshHeader ()

@property (nonatomic, strong) N_RefreshAnimView *animView;

@end


@implementation N_RefreshHeader

- (void)prepare {
    [super prepare];
    [self addSubview:self.animView];
}

- (void)placeSubviews {
    [super placeSubviews];
    // 設置子控件位置
    self.animView.frame = CGRectMake(0, 0, 35, 35);
    self.animView.center = CGPointMake(self.mj_w/2.0, self.mj_h/2.0);
}

- (void)setState:(MJRefreshState)state {
    
    MJRefreshCheckState;
    
    switch (state) {
        case MJRefreshStateIdle:
            [self.animView stopAnimation];
            break;
        case MJRefreshStatePulling:
            break;
        case MJRefreshStateRefreshing:
            [self.animView startAnimation];
            break;
        default:
            break;
    }
}

- (void)setPullingPercent:(CGFloat)pullingPercent {
    // 控制layer的動畫進度和透明度
    if (pullingPercent > 0) [self.animView setLineAlphaWith:pullingPercent];
    CGFloat progress = pullingPercent - (int)pullingPercent;
    [self.animView setProgressWith:progress];
}

- (void)endRefreshing {
    [super endRefreshing];
}

- (N_RefreshAnimView *)animView {
    if (!_animView) {
        _animView = [[N_RefreshAnimView alloc] init];
        _animView.backgroundColor = [UIColor whiteColor];
        // 這里我的需求需要圓形和陰影效果
        _animView.layer.cornerRadius = 17.5;
        _animView.layer.shadowColor = [UIColor blackColor].CGColor;
        _animView.layer.shadowOpacity = 0.1;
        _animView.layer.shadowOffset = CGSizeMake(3, 3);
        _animView.layer.shadowRadius = 5.0;
    }
    return _animView;
}

至此這個動畫就完成了！有意見或者建議的小伙伴歡迎下邊評論!