1需求

需要弄一个下图的动画。先认真看一下动画。慢慢的看。注意我为什么在中间停那么久。。。。。。

小动画

2分析需求

当silde条在左右滑动的时候，上面的动画在不停的左右移动，我录制视频的时候在中间点稍微停顿了一下。其实就是一个三角形，这个三角形的顶点在一个"倒置的V字"上面运动。

其实只需要找到顶点的位置，就可以简单的将动画绘制出来。下面是demo的下载地址：github.com/hnustJoe/sildeAnimate

(1）：这里需要用到一些CAlayer的基础知识，有关CALayer的两个属性，我简单的讲一下:

anchorPoint：锚点，想象一下一个点将一张A4纸挂在墙上。

position：就是上面锚点的位置。

现在需要在自定义视图的UIView（代码中的BCView）上添加一个自定义的CALayer（AnimateLayer）；至于为什么要两个自定义，我也没有具体去分析，我得给自己留点问题。

顺便说一下这个slide，我是通过silde的值的变化来绘制动画，然后在自定义的AnimateLayer中设置一个对外的progress属性。我就可以通过改变属性来绘制动画。

通过改变silde值的变化来进行动画的绘制

（2）为什么要设置一个progress属性呢？其实这个progress属性就是上面提到的运动的顶点（也就是我一直强调的那个点！）。所以通过每次progress的属性的改变，来计算好顶点的位置来重新画图。现在，设置一下自定义的Calyer的progress设置方法：

自定义Calyer的progress设置方法

（3）我觉得是最重要的一个步骤

绘制三角形，这其实也不算三角形，我把它看成两条线断，左边蓝色的，和右边灰色的。先绘制蓝色的还是先绘制灰色的，大家可以都去试一下。

既然是绘制两条线断，那么就需要找出那个特殊的点！我在代码中使用middleX，middleY来标志中标示这个特殊的点的横纵坐标。其中要把0.5这个间隔分割开来，这得留给大家去思考。其中middleX和MiddleY怎么计算，最好自己去算一下。

我是先绘制右边的，然后再绘制左边。

绘图代码

最后简单的说一下我对CGMutablePathRef画线的理解。先告诉画布说：我要画一条线－》将笔尖在画布上面打两个点－》打完点以后就再告诉画布：线的颜色。。。端点的形式。。。线条的宽度。。。－》好！stokepath（封闭线路）！！！。

2大家伙有什么疑问的可以给我评论。