写这个demo是因为在简书看了这篇文章http://www.jianshu.com/p/69f0b7f38cb6 但是简主使用的swift编写的,所以我就用oc重新写了一份 谢谢简主的思路
其中这份demo写于四月,一直没有整理到简书,但是由于最近项目中需要用到这个小功能,就想着整理一下。
首先效果图如下:

首先,介绍一下主要的属性

其次把页面控件布局好,都是一些简单的小控件,就不多说了,其中,在这个项目中,圆环的橙色背景我不是用的view,而是CAShapeLayer ,圆角为10,代码如下

至于处理动态的圆环,我是实际上画了两条同样但不同色的圆环,代码如下,其中layer代表圆环的底色,是固定的,而self.progressLayer是运动的绿色圆环。

当点击运动button的时候,把在输入框里输入的数值赋值给属性progress,再启动定时器,代码如下

因为我只运动在0-100内的数据,所以首先判断若是输入的数值小于0或者大于100,那就关闭计时器,不执行动画,这里说个题外话,timer的invalidate是永久暂停定时器,而不是暂时暂停,因为我曾经用了invalidate这个方法后再去fire,发现timer启动不了,另外,invalidate只是暂停计时器,并没有释放计时器,所以为了不发生泄漏等情况,最好是随机设置timer=nil以保安全。回归正题,当输入的数值符合范围目标时,我们判断一下比上次输入的数值大还是小,因为我是在上一次输入的数值上进行增加或减少的,以保证中间的数值和进度条的进度保持一致。
1.若是当前输入值小于等于上一次输入的数值时
对上一次的数值进行自减,通过自减后的数值/100所占的比例设置CAShapeLayer的strokeEnd属性来确定绿色圆环的终点,直到上一次的数值通过一次次的自减后和输入的当前值相同后,暂停并释放计时器。
2.若是当前输入值大于上一次输入的数值时,逻辑操作如上。

最后,demo的地址是github.com/hmj0930/LiuLiangJianCe.git
网友评论