iOS开发-下拉刷新动画CAShapeLayer的strokeStart与strokeEnd刷新指示器效果

之前开发中实现下拉刷新动画CAShapeLayer的strokeStart与strokeEnd指示器动画效果

一、效果图

二、基础动画

CABasicAnimation类的使用方式就是基本的关键帧动画。

所谓关键帧动画，就是将Layer的属性作为KeyPath来注册，指定动画的起始帧和结束帧，然后自动计算和实现中间的过渡动画的一种动画方式。

可以查看

https://blog.csdn.net/gloryFlow/article/details/131991202

三、实现代码

CAShapeLayer的strokeStart和strokeEnd属性
苹果官方给出这两个属性的解释为：

/* These values define the subregion of the path used to draw the
* stroked outline. The values must be in the range [0,1] with zero
* representing the start of the path and one the end. Values in
* between zero and one are interpolated linearly along the path
* length. strokeStart defaults to zero and strokeEnd to one. Both are
* animatable. */

我们可以对绘制的Path进行分区。这两个属性的值在0~1之间，0代表Path的开始位置，1代表Path的结束位置。是一种线性递增关系。strokeStart默认值为0，strokeEnd默认值为1。这两个属性都支持动画。

keyPath = strokeStart 动画的fromValue = 0，toValue = 1
表示从路径的0位置画到1 怎么画是按照清除开始的位置也就是清除0 一直清除到1 效果就是一条路径慢慢的消失

keyPath = strokeStart 动画的fromValue = 1，toValue = 0
表示从路径的1位置画到0 怎么画是按照清除开始的位置也就是1 这样开始的路径是空的（即都被清除掉了）一直清除到0 效果就是一条路径被反方向画出来

keyPath = strokeEnd 动画的fromValue = 0，toValue = 1
表示 这里我们分3个点说明动画的顺序 strokeEnd从结尾开始清除 首先整条路径先清除后2/3，接着清除1/3 效果就是正方向画出路径

keyPath = strokeEnd 动画的fromValue = 1，toValue = 0
效果就是反方向路径慢慢消失
注释： 动画的0-1（fromValue = 0，toValue = 1） 或1-0 （fromValue = 1，toValue = 0） 表示执行的方向 和路径的范围。

• strokeStart 把一个圆先画完，然后 再慢慢减少
• strokeEnd 从原点开始画，然后把圆画完整

这部分介绍参考https://www.jianshu.com/p/2f5d1b2f1261

我们主要实现动画效果。

3.1 代码实现动画

主要实现CABasicAnimation动画，KeyPath是strokeStart、strokeEnd

- (void)strokeAnimation {
    CABasicAnimation *strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    strokeStartAnimation.fromValue         = @0.0;
    strokeStartAnimation.toValue           = @1.0;
    strokeStartAnimation.timingFunction    = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    CABasicAnimation *strokeEndAnimation   = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAnimation.fromValue           = @0.0;
    strokeEndAnimation.toValue             = @1.0;
    strokeEndAnimation.timingFunction      = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    strokeEndAnimation.duration            = self.duration * 0.5;
    
    CAAnimationGroup *strokeAniamtionGroup = [CAAnimationGroup animation];
    strokeAniamtionGroup.duration          = self.duration;
    strokeAniamtionGroup.fillMode          = kCAFillModeForwards;
    strokeAniamtionGroup.removedOnCompletion = NO;
    
    strokeAniamtionGroup.delegate          = self;
    strokeAniamtionGroup.animations        = @[strokeEndAnimation,strokeStartAnimation];
    [self.loadingLayer addAnimation:strokeAniamtionGroup forKey:@"strokeAniamtion"];
}

完整代码如下

#import "INRefreshCircleLoading.h"
#import "UIColor+Addition.h"

static CGFloat kCircleSize = 30.0;

@interface INRefreshCircleLoading ()<CAAnimationDelegate>

@property (nonatomic, strong) CAShapeLayer *loadingLayer;

@property (nonatomic, assign) CGFloat duration;

@property (nonatomic, assign) CGFloat startAngle;
@property (nonatomic, assign) BOOL animationStoped;
@property (nonatomic, assign) BOOL isLoading;

@end

@implementation INRefreshCircleLoading

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        self.duration = 1.0;
        self.isLoading = NO;
        self.animationStoped = NO;
        
        [self.layer addSublayer:self.loadingLayer];
        
        [self layoutSubLayersFrame];
        [self drawContentShapeLayer];
    }
    return self;
}

- (void)layoutSubLayersFrame {
    self.loadingLayer.frame = CGRectMake((CGRectGetWidth(self.bounds) - kCircleSize)/2,  (CGRectGetHeight(self.bounds) - kCircleSize)/2, kCircleSize, kCircleSize);
}

- (void)drawContentShapeLayer {
    // Drawing code
    [self drawCirclelayer];
}

- (void)displayPrecent:(CGFloat)precent {
    if (precent < 0) {
        precent = 0;
    }
    
    if (precent > 1.0) {
        precent = 1.0;
    }
    
    if (!self.isLoading) {
        self.loadingLayer.strokeStart = precent;
    }
}

- (void)startAnimation {
    self.animationStoped = NO;
    self.isLoading = YES;
    [self strokeAnimation];
}

- (void)stopAnimation {
    [self.loadingLayer removeAnimationForKey:@"strokeAniamtion"];
    self.animationStoped = YES;
    self.isLoading = NO;
    self.startAngle = 0.0;
}

- (void)strokeAnimation {
    CABasicAnimation *strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    strokeStartAnimation.fromValue         = @0.0;
    strokeStartAnimation.toValue           = @1.0;
    strokeStartAnimation.timingFunction    = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    CABasicAnimation *strokeEndAnimation   = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAnimation.fromValue           = @0.0;
    strokeEndAnimation.toValue             = @1.0;
    strokeEndAnimation.timingFunction      = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    strokeEndAnimation.duration            = self.duration * 0.5;
    
    CAAnimationGroup *strokeAniamtionGroup = [CAAnimationGroup animation];
    strokeAniamtionGroup.duration          = self.duration;
    strokeAniamtionGroup.fillMode          = kCAFillModeForwards;
    strokeAniamtionGroup.removedOnCompletion = NO;
    
    strokeAniamtionGroup.delegate          = self;
    strokeAniamtionGroup.animations        = @[strokeEndAnimation,strokeStartAnimation];
    [self.loadingLayer addAnimation:strokeAniamtionGroup forKey:@"strokeAniamtion"];
}

#pragma mark - CAAnimationDelegate
- (void)animationDidStart:(CAAnimation *)anim {
    
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    CAAnimation *animate = [self.loadingLayer animationForKey:@"strokeAniamtion"];
    if (!(animate == anim)) {
        return;
    }
    
    if (flag) {
        if (self.animationStoped) {
            // 结束掉动画，否则出现循环
            return;
        }
        [self drawCirclelayer];
        [self strokeAnimation];
    }    
}

#pragma mark - DrawShapeLayer
- (void)drawCirclelayer {
    
    CGFloat endAngle = self.startAngle - (M_PI/180*45);
    if (endAngle < 0.0) {
        endAngle = self.startAngle + (M_PI/180*315);
    }
    
    UIBezierPath* path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(kCircleSize/2, kCircleSize/2) radius:kCircleSize/2 startAngle:self.startAngle endAngle:endAngle clockwise:YES];
    
    UIGraphicsBeginImageContext(self.loadingLayer.frame.size);
    [path stroke];
    UIGraphicsEndImageContext();
    
    self.loadingLayer.path = path.CGPath;
    
    self.startAngle = endAngle;
}

#pragma mark - SETTER/GETTER
- (CAShapeLayer *)loadingLayer {
    if (!_loadingLayer) {
        _loadingLayer = [CAShapeLayer layer];
        _loadingLayer.backgroundColor = [UIColor clearColor].CGColor;
        //设置线条的宽度和颜色
        _loadingLayer.lineWidth = 2.0f;
        _loadingLayer.strokeColor = [UIColor colorWithHexString:@"ff7e48" alpha:1.0].CGColor;
        _loadingLayer.fillColor = [UIColor clearColor].CGColor;
        _loadingLayer.lineCap     = kCALineCapRound;
    }
    return _loadingLayer;
}

@end

3.2 MJRefresh使用该动画

我这里继承MJRefreshStateHeader

需要根据刷新控件的状态来执行开启动画与结束动画操作

刷新控件的状态如下

typedef NS_ENUM(NSInteger, MJRefreshState) {
    // 普通闲置状态
    MJRefreshStateIdle = 1,
    // 松开就可以进行刷新的状态
    MJRefreshStatePulling,
    // 正在刷新中的状态
    MJRefreshStateRefreshing,
    // 即将刷新的状态
    MJRefreshStateWillRefresh,
    // 所有数据加载完毕，没有更多的数据了
    MJRefreshStateNoMoreData
};

INRefreshHeader.h

#import "MJRefresh.h"
#import "INRefreshFourBallLoading.h"

@interface INRefreshHeader : MJRefreshStateHeader

@property (nonatomic, assign) BOOL showInsetTop;

@property (nonatomic, strong) INRefreshCircleLoading *circleLoading;

@end

INRefreshHeader.m

@implementation INRefreshHeader

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.lastUpdatedTimeLabel.hidden = YES;
        self.stateLabel.hidden = YES;
        
        [self addSubview:self.circleLoading];
    }
    return self;
}

- (INRefreshCircleLoading *)circleLoading {
    if (!_circleLoading) {
        _circleLoading = [[INRefreshCircleLoading alloc] initWithFrame:CGRectMake(0.0, 0.0, CGRectGetWidth([UIScreen mainScreen].bounds), self.bounds.size.height)];
    }
    return _circleLoading;
}


- (void)setState:(MJRefreshState)state {
    MJRefreshCheckState
    
    // 根据状态做事情
    if (state == MJRefreshStateIdle) {
        if (oldState == MJRefreshStateRefreshing) {
            self.circleLoading.alpha = 1.0;

            // 如果执行完动画发现不是idle状态，就直接返回，进入其他状态
            if (self.state != MJRefreshStateIdle) return;
            
            self.circleLoading.alpha = 1.0;

            [self.circleLoading stopAnimation];

        } else {
            [self.circleLoading stopAnimation];

        }
    } else if (state == MJRefreshStatePulling) {
        [self.circleLoading stopAnimation];

    } else if (state == MJRefreshStateRefreshing) {
        self.circleLoading.alpha = 1.0;
    }
}

- (void)prepare {
    [super prepare];
    self.mj_h = 60.0;
}

- (void)placeSubviews {
    [super placeSubviews];
    
    CGFloat centerX = self.mj_w * 0.5;
    CGFloat centerY = self.mj_h * 0.5;
    self.circleLoading.center = CGPointMake(centerX, centerY);
}

/** 当scrollView的contentOffset发生改变的时候调用 */
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change {
    [super scrollViewContentOffsetDidChange:change];
    NSLog(@"change:%@",change);
    
    CGPoint old = [change[@"old"] CGPointValue];
    CGPoint new = [change[@"new"] CGPointValue];
    
    CGFloat precent = -new.y/self.mj_h;
    [self.circleLoading displayIndicator:precent];
}

/** 当scrollView的contentSize发生改变的时候调用 */
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change {
    [super scrollViewContentSizeDidChange:change];
}

/** 当scrollView的拖拽状态发生改变的时候调用 */
- (void)scrollViewPanStateDidChange:(NSDictionary *)change {
    [super scrollViewPanStateDidChange:change];
}

- (void)setShowInsetTop:(BOOL)showInsetTop {
    _showInsetTop = showInsetTop;
    
}

- (void)backInitState {
    
}

@end

3.3 具体的TableView使用

需要设置UITableView的下拉刷新操作：tableView.mj_header = header

- (void)configureRefresh {
    __weak typeof(self) weakSelf = self;
    INRefreshHeader *header = [INRefreshHeader headerWithRefreshingBlock:^{
        [weakSelf refreshData];
    }];
    
    INRefreshFooter *footer = [INRefreshFooter footerWithRefreshingBlock:^{
        [weakSelf loadMoreData];
    }];
    self.editView.tableView.mj_header = header;
    self.editView.tableView.mj_footer = footer;
}

- (void)refreshData {
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.editView.tableView.mj_header endRefreshing];
        [self.editView.tableView.mj_footer endRefreshing];
    });
}

- (void)loadMoreData {
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.editView.tableView.mj_header endRefreshing];
        [self.editView.tableView.mj_footer endRefreshing];
    });
}

四、小结

iOS开发-下拉刷新动画CAShapeLayer的strokeStart与strokeEnd刷新指示器效果，使用mjrefresh一个好用的上下拉刷新的控件。实现CABasicAnimation基础效果，根据不同的mjrefresh下拉刷新操作来执行动画效果。

学习记录，每天不停进步。