最近看到多说英语一个效果,大致如下:
其中有一处效果应该是图中时针与分针之间的区域颜色应该是渐变色的,我重画了很久最后还是没有实现出来,所以我就将他做成整体的呈动态渐变效果,哪位朋友如果知道此种效果的实现方法,请一定要告知小弟,十分感激3Q
下面就说说上面gif的实现思路:
首先在storyboard上拖一个slider、三UIimageview,分别进行布局,这里需要注意下转动的指针的布局,因为他是需要围绕针尾进行旋转,所以是需要改变他的锚点(anchorPoint)的,所以布局的位置会和运行在手机上显示的位置不同。
布好局后第一步就将指针旋转起来,将slider.maximumValue设置成2*M_PI,然后再slider的action里面对指针进行旋转,前面说了需要改变旋转指针的锚点,关于锚点大家可以理解为将layer定义为一个长宽为1*1的视图,然后锚点根据这个1*1的坐标系根据layer来定义,锚点的取值范围如下图所示:
如果大家对anchorPoint和position还有不明白的,可以参考这篇博客:关于锚点和position
回归正题,我们设置旋转指针的锚点如下代码所示:
现在,我们可以根据拖动slider来将指针旋转一圈了,接下来就需要在时针和旋转指针之间的区域进行绘制了,接着我们再拖一个view放在表盘上方,大小和表盘一样并进行clearcolor,然后创建一个view类与之关联,再设置一个value的属性,重写set方法并刷新视图(setNeedsDisplay),最后就在drawRect方法中利用贝塞尔曲线进行绘制填充颜色就行了:
最后运行下代码就是上面gif 的效果啦,github地址github.com/zhoukuaiios/clock最后觉得这篇文章对您有帮助就给个赞呗❤️❤️❤️