CAShapeLayer，CGPath打造流线刷新动画

最近封装了一个刷新动画，实现在下拉过程中再刷新控件上画出公司的Logo，有需要的同学可以拿去参考一下，并欢迎指正，毕竟我是菜鸟一枚！

Demo很简单也就200多行代码，但是用到的有关动画的知识并不少，要对CABasicAnimation，CAShapeLayer，CGMutablePathRef贝塞尔曲线有一定的了解（文章结尾我会贴上我收集的一些文章供大家参考），这些不在本次讨论范围！先看实现效果：

实现效果.gif

首先要明确一点，CAShapeLayer和CGPath合作能画出来任何你想要的图形效果，并且可以实现不在view的drawRect方法中就画出一些想要的图形！CGPath可以理解为图形的路径，在Objective-C工程中，其实系统定义的一个内部结构体，开发者不可以直接使用，开发者CGPathRef和CGMutablePathRef别名作为CGPath的引用，实际上，CGPathRef和CGMutablePathRef都是CGPath结构体类型的指针，不同的是一个是const类型不可修改的，一个是可以修改的。

CAShapeLayer
CGPath

总结一下就是：每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。具体的形状由其path(类型为CGPathRef)属性指定。普通的CALayer是矩形，所以需要frame属性。CAShapeLayer初始化时也需要指定frame值，但它本身没有形状，它的形状来源于其属性path。CAShapeLayer有不同于CALayer的属性，它从CALayer继承而来的属性在绘制时是不起作用的。

概念性的东西还是要了解一点，下面看代码：
创建两个CAShapeLayer对象，因为要画两条路径

@property (strong) CAShapeLayer *pullToRefreshShape;

@property (strong) CAShapeLayer *pullToRefreshShape2;

在viewDidLoad里面对CAShapeLayer进行初始化：

- (void)setupLoadingIndicator{
    self.pullToRefreshShape = [CAShapeLayer layer];
    self.pullToRefreshShape.path = [self loadPath2];//绘制路径
    
    self.pullToRefreshShape2 = [CAShapeLayer layer];
    self.pullToRefreshShape2.path = [self loadPath];//绘制路径
    
    NSArray *arr = @[_pullToRefreshShape,_pullToRefreshShape2];
    for (CAShapeLayer *layer in arr) {
        layer.strokeColor = [self colorWithHexString:@"#ffba00" alpha:1].CGColor;
        layer.fillColor   = [UIColor clearColor].CGColor;
        layer.lineCap   = kCALineCapRound;
        layer.lineJoin  = kCALineJoinRound;
        layer.lineWidth = 1.5;
        layer.position = CGPointMake(0, 0);
        layer.strokeEnd = .0;
        [imgview.layer addSublayer:layer];
        layer.speed = 0;
    }
}

还要了解一下Quartz2D绘制复杂图形，创建路径用到了几个函数，分享一篇文章讲的不错Quartz2D绘图之利用路径绘制复杂图形

//第一条路径
- (CGPathRef)loadPath{
    path1 = CGPathCreateMutable();
    //半圆具体参数使用看上面的文章
    CGPathAddArc(path1, NULL, 35, 35, 30, 1.4 * M_PI, 1.2 * M_PI, NO);
    //拐点
    CGPathMoveToPoint(path1, NULL, 10, 17);
    CGPathAddLineToPoint(path1, NULL, 18, 16);
    CGPathAddLineToPoint(path1, NULL, 19, 12);
    CGPathAddLineToPoint(path1, NULL, 24, 12);
    CGPathAddLineToPoint(path1, NULL, 26, 6);
    CGAffineTransform t = CGAffineTransformMakeScale(1, 1);
    return CGPathCreateCopyByTransformingPath(path1, &t);
}

//第二条路径
- (CGPathRef)loadPath2{
    //正方形
    CGMutablePathRef path2 = CGPathCreateMutable();
    CGPathMoveToPoint(path2, NULL, 27, 27);
    CGPathAddLineToPoint(path2, NULL, 43, 27);
    CGPathAddLineToPoint(path2, NULL, 43, 43);
    CGPathAddLineToPoint(path2, NULL, 27, 43);
    CGPathAddLineToPoint(path2, NULL, 27, 27);
    CGAffineTransform t = CGAffineTransformMakeScale(1, 1);
    return CGPathCreateCopyByTransformingPath(path2, &t);
}

还用到了一下CABasicAnimation动画的知识http://www.jianshu.com/p/b9ff753c8eb9，在这里就不做推荐了，网上随便搜一下就是资料，最重要的两个方法就是fromValue和toValue，还有一个animationWithKeyPath：对这三个方法了解一下基本CABasicAnimation的动画就可以上手使用了；

//画外围圆和正方形的动画
- (CAAnimation *)pullDownAnimation
{
    CABasicAnimation *writeText = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    writeText.fromValue = @0;
    writeText.toValue = @1;
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.duration = 1.0;
    group.animations = @[writeText];
    return group;
}

//环形转圈的动画
- (void)animation2{
    sonImage.hidden = NO;
    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    basic.beginTime = 0;
    basic.toValue = @(M_PI *2);
    basic.duration = 1;
    basic.autoreverses = NO;
    basic.fillMode = kCAFillModeForwards;
        CABasicAnimation *basic1 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    basic1.beginTime = basic.beginTime + basic.duration;
    basic1.fromValue = @(0);
    basic1.toValue = @(M_PI *2);
    basic1.repeatCount = 4;
    basic1.duration = 1;
    basic1.autoreverses = NO;
    basic1.fillMode = kCAFillModeForwards;
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.duration = 2;
    group.repeatCount = 2;
    group.animations = @[basic,basic1];
    group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [sonImage.layer addAnimation:group forKey:nil];
   }

用到的动画和画图基本上就这么些代码；
下面就是和TabelView的刷新产生关联了，这样才能实现流线的效果；你可以用KVO监听偏移量（推荐），也可以用Scrollview的代理事件，这里用后者的原因是主要讨论动画写起来方便，后续会用KVO监听。MJRrfresh也是用的KVO监听http://blog.csdn.net/u012121216/article/details/50452639

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat offset = scrollView.contentOffset.y+scrollView.contentInset.top;
    CGFloat startLoadingThreshold = 80.0;
    CGFloat fractionDragged       = -offset/startLoadingThreshold;
    if (offset <= 0.0 && !self.isLoading && [self isViewLoaded]) {
//timeOffset决定了动画的连续性和渐变性
        self.pullToRefreshShape.timeOffset = MIN(1.0, fractionDragged);
        self.pullToRefreshShape2.timeOffset = MIN(1.0, fractionDragged);
        if (fractionDragged > 1.0) {
            [self startLoading];
        }
    }
}

有用到的同学可以参考Demo（Demo很屎，惭愧）,并欢迎交流指正，如果对你有帮助请给个STAR，。有对动画感兴趣的同学也欢迎一起交流进步。

2017，祝大家新的一年事事顺心，手写代码千行无Bug，一起努力吧！
这里用到 CoreGraphics的CGPath，可以画各种图形，CoreGraphics是C语言的一套API是UIKIT的底层实现，常用于对图形的操作，剪裁、加膜、色值变化，需要手动释放。CGShapeLayer是CALayer的子类，不需要调用drawReact方法，相比drawReact的优点是属于CoreAnimation框架的，调用GPU渲染图片比较节省性能，动画渲染直接提交给手机GPU，不消耗内存。而drawRect属于CoreGraphics框架，占用CPU，性能消耗大。CGShapeLayer通常和贝塞尔曲线联合使用（是对CGPath的封装），shape是图形的意思，会封闭路径产生一个图形。这里用到CoreAnimation动画，CoreAnimation是对Layer层的操作，对layer操作优点是接口易用少量代码可以实现更多的复杂动画，性能强大，使用硬件加速，可以同时向多个图层添加不同的动画效果，动画过程中可以响应事件。

关系层级

CAShapeLayer，CGPath打造流线刷新动画

你可能感兴趣的:(CAShapeLayer，CGPath打造流线刷新动画)