iOS特定百分比颜色渐变进度条与水波效果的动画实现

2016-07-27 本文已影响2000人 coolegg

先上一下效果图

1.首先通过CAShapeLayer和贝塞尔曲线搭配的方法，创建出圆形进度条

先简单的介绍下CAShapeLayer

1,CAShapeLayer继承自CALayer，可使用CALayer的所有属性

2,CAShapeLayer需要和贝塞尔曲线配合使用才有意义。

Shape：形状

贝塞尔曲线可以为其提供形状，而单独使用CAShapeLayer是没有任何意义的。

3,使用CAShapeLayer与贝塞尔曲线可以实现不在view的DrawRect方法中画出一些想要的图形

关于CAShapeLayer和DrawRect的比较

DrawRect：DrawRect属于CoreGraphic框架，占用CPU，消耗性能大

CAShapeLayer：CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存

贝塞尔曲线与CAShapeLayer的关系

1，CAShapeLayer中shape代表形状的意思，所以需要形状才能生效

2，贝塞尔曲线可以创建基于矢量的路径

3，贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染。路径会闭环，所以绘制出了Shape

4，用于CAShapeLayer的贝塞尔曲线作为Path，其path是一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线

这里我们需要使用到CAGradientLayer，CAGradientLayer是一个用来画颜色渐变的层。我们先用CAGradientLayer做出渐变效果，然后把ShapeLayer作为GradientLayer的Mask来截取出需要的部分，以此达到渐变的进度条效果。

这里把层分为左半部分和右上部分和右下部分（自己决定怎么分区，也可以左右各一部分或者左右各两部分。推荐左右各一部分就行，因为颜色数组可以增加数量）

进度条动画与头部原点动画一起执行

水波动画为一张水波图片从顶部血像滑进了，导指定高度在执行CABasicAnimation动画

限于作者表达能力有限，技术说明也不多，如有纰漏，希望各位读者多多指正。