1需求
需要弄一个下图的动画。先认真看一下动画。慢慢的看。注意我为什么在中间停那么久。。。。。。
2分析需求
当silde条在左右滑动的时候,上面的动画在不停的左右移动,我录制视频的时候在中间点稍微停顿了一下。其实就是一个三角形,这个三角形的顶点在一个"倒置的V字"上面运动。
其实只需要找到顶点的位置,就可以简单的将动画绘制出来。下面是demo的下载地址:github.com/hnustJoe/sildeAnimate
3实现步骤
(1):这里需要用到一些CAlayer的基础知识,有关CALayer的两个属性,我简单的讲一下:
anchorPoint:锚点,想象一下一个点将一张A4纸挂在墙上。
position:就是上面锚点的位置。
没有看懂的笨蛋们可以看一下这位大神写的:iOS开发-CALayer的探究应用 - CocoaChina_让移动开发更简单
现在需要在自定义视图的UIView(代码中的BCView)上添加一个自定义的CALayer(AnimateLayer);至于为什么要两个自定义,我也没有具体去分析,我得给自己留点问题。
顺便说一下这个slide,我是通过silde的值的变化来绘制动画,然后在自定义的AnimateLayer中设置一个对外的progress属性。我就可以通过改变属性来绘制动画。
(2)为什么要设置一个progress属性呢?其实这个progress属性就是上面提到的运动的顶点(也就是我一直强调的那个点!)。所以通过每次progress的属性的改变,来计算好顶点的位置来重新画图。现在,设置一下自定义的Calyer的progress设置方法:
(3)我觉得是最重要的一个步骤
绘制三角形,这其实也不算三角形,我把它看成两条线断,左边蓝色的,和右边灰色的。先绘制蓝色的还是先绘制灰色的,大家可以都去试一下。
既然是绘制两条线断,那么就需要找出那个特殊的点!我在代码中使用middleX,middleY来标志中标示这个特殊的点的横纵坐标。其中要把0.5这个间隔分割开来,这得留给大家去思考。其中middleX和MiddleY怎么计算,最好自己去算一下。
我是先绘制右边的,然后再绘制左边。
最后简单的说一下我对CGMutablePathRef画线的理解。先告诉画布说:我要画一条线-》将笔尖在画布上面打两个点-》打完点以后就再告诉画布:线的颜色。。。端点的形式。。。线条的宽度。。。-》好!stokepath(封闭线路)!!!。
附加
1感谢这位大神的博文:iOS开发-CALayer的探究应用 - CocoaChina_让移动开发更简单
2大家伙有什么疑问的可以给我评论。