iOS实现类似时针转盘并区域重绘功能

 最近看到多说英语一个效果,大致如下:




其中有一处效果应该是图中时针与分针之间的区域颜色应该是渐变色的,我重画了很久最后还是没有实现出来,所以我就将他做成整体的呈动态渐变效果,哪位朋友如果知道此种效果的实现方法,请一定要告知小弟,十分感激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最后觉得这篇文章对您有帮助就给个赞呗❤️❤️❤️

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 转载:http://www.jianshu.com/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 11,514评论 0 13
  • 每个UIView有一个伙伴称为layer,一个CALayer。UIView实际上并没有把自己画到屏幕上;它绘制本身...
    shenzhenboy阅读 8,326评论 0 17
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 12,724评论 6 30
  • Core Animation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做Laye...
    小猫仔阅读 9,263评论 1 4
  • Core Animation Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,...
    45b645c5912e阅读 8,215评论 0 21

友情链接更多精彩内容