iOS之UI--CAShapeLayer

关于CAShapeLayer

内容大纲：

1. CAShapeLayer简介
2. 贝塞尔曲线与CAShapeLayer的关系
3. strokeStart和strokeEnd 动画
4. 用CAShapeLayer实现进度条效果，以及更加复杂的效果

一、CAShapeLayer简介

---

 

• 一、CAShapeLayer继承自CALayer，可使用CALayer的全部属性值
• 二、CAShapeLayer须要与贝塞尔曲线配合使用才有意义
• 三、使用CAShapeLayer与贝塞尔曲线能够实现不在view的drawRect方法中画出有一些想要的图形
• 四、CAShapeLayer属于CoreAnimation框架，其动画渲染直接提交到手机的GPU当中，相较于view的drawRect方法使用CPU渲染而言，其效率极高，能大大优化内存使用状况。
  • 我的经验：能够重写UIView的子类中的drawRect来实现进度条效果，可是UIView的drawRect是用CPU渲染实现的，而使用CAShapeLayer效率更高，由于它用的是GPU渲染。

 

 

效果：

虽说，直接更改另外建立的CALayer以及其子类，会触发隐式动画，可是直接更改CAShapeLayer的path的值，变化过程没有渐变移动的效果，因此这里就须要

使用核心动画CABasicAnimation来帮忙实现，未使用核心动画验证效果在后面的"四、用CAShapeLayer实现进度条效果，以及更加复杂的效果"验证了。

二、贝塞尔曲线与CAShapeLayer的关系

---

 

• 一、CAShapeLayer中有Shape这个单词，顾名思义，它须要一个形状才能生效
• 二、贝塞尔曲线能够建立基于矢量的路径
• 三、贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染，路径会闭环，因此路径绘制出了Shape

• 四、用于CAShapeLayer的贝塞尔曲线作为path，其path实一个首尾相接的闭环的曲线，即便该贝塞尔曲线不是一个闭环的曲线

  图2.png

  如何创建贝塞尔曲线和CAShapeLayer的联系：

  • 类：CAShapeLayer

  • 属性：path

    • 值：能够是贝塞尔曲线对象

    UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,200,100)]; shape.path = circle.CGPath;

  • 属性：fillColor 修改贝塞尔曲线的填充颜色

    • 值：CGColor对象

  • 属性：maskToBounds 

    • 值：YES 会让超出CAShapeLayer的部分不会显示

一阶贝塞尔曲线

二阶贝塞尔曲线

三阶贝塞尔曲线

四阶贝塞尔曲线

五阶贝塞尔曲线

 

而后是经过代码直接体现贝塞尔曲线和CAShapeLayer之间的关系：

 

三、strokeStart与strokeEnd动画

---

 

• 一、将ShapeLayer的fillColor设置成透明背景
• 二、设置线条的宽度（lineWidth）的值
• 三、设置线条的颜色

• 四、将strokeStart值设定成0，而后让strokeEnd的值变化触发隐式动画

• 类：CAShapeLayer

  • 属性：

    • strokeStart
    • strokeEnd
      • 注意 ：strokeEnd的值必定要比strokeStart的大
      • 范围 ：(0~1)

    处理方法：
        shapeLayer.strokeStart = valueOne < valueTwo ? valueOne : valueTwo; shapeLayer.strokeStart = valueOne > valueTwo ? valueOne : valueTwo;

  • 属性：

    • lineWidth 线条的宽度
    • strokeColor 线条的颜色 
      • 值：CGColor

 

而后为了能实现圆形进度条的效果：

效果就是：

 

将上面的strokeStart也设置，可是注意：strokeStart必需要小于strokeEnd，不然会不画出线的状况。

 

 

四、用CAShapeLayer实现圆形进度条效果，以及更复杂综合起来的动画效果

---

 

圆形进度条动画.gif

源码下载地址：CircleProgress 中的 CircleProgress源码

直接更改path的结果，并无理想中的渐变过程，因此须要使用核心动画：

 

综合示例源码请看：https://github.com/HeYang123456789/UIView

若是fillColors不设置成 [UIColor clearColor].CGColor就会有这样的效果：

转载原址：http://www.cnblogs.com/goodboy-heyang/p/5185575.html