iOS CAShapeLayer仿滴滴的抢单倒计时

最近坑爹的公司又在模仿滴滴...

要做市内抢单的版本了...

tmd...

一万个不愿意...

T_aa...

最后...

还是要做...

没脾气......................................

---

滴滴里面有一个下单完成之后等待界面的倒计时转圈的视图...

91CEFCE7-330C-4107-A69A-11F7DFE8021C.png

就是这个...

开始时候在想这个东西需要怎么做...

也没有思路...

绘图什么我不会...

后面感觉这个加载的进度跟SVProgressHUD的progressView有点像...

就直接用SVProgressAnimatedView开始加工了...

网上的资料也翻看了一些但是感觉写的不是很好...

还是自己写的才是最好的...

---

原理：

通过CAShapeLayer层添加到自己自定义的视图layer上...

设置ShapeLayer的path...

他的路劲绘制一般通过UIBezierPath配合设置...

Mark...UIBezierPath要好好学要好好学.................

通过layer的StrokeEnd,StrokeStart设置path路径上的起点和终点...

可以直接通过设置这两个点就有平滑的东西效果...

先看效果...

D71FD6E7-BFCF-481E-B9FF-A8DD0B44246B.png

---

看左边视图...

分成三部分...

红色进度变化的一个ShapeLayer...

底部灰色背景的一个ShapeLayer...

头部绿色方向的一个ShapeLayer...

主要是绿色的那部分是通过实时计算它的strokestart和strokeend来控制他始终就是那么一个长度...

说一下计算过程...

D4B300BC-E766-4F1A-BC6C-9A92D06557BF.png

图中黄色为头部那个点（s1）...

灰色为底部大圆的四分之一（s2）...

要计算出这个s1的strokeStart,strokeEnd之间的差值就是需要计算出s2所在s1中周长所占的比例...

这个比例如果转化成弧度或者角度比的话就可以通过a角度来计算...

根据余弦定理:

cosa = (b*b+c*c-a*a)/(2*b*c)

就可得出a的弧度值...

换算比例就是stroke的start和end的差值...

老师教的数学终于在这里用到了...

好神奇...

主要代码:

    //计算这个point的start和end所占用这个角弧度值
    //余弦定理  cosc = (a*a + b*b - c*c)/(2*a*b);
    float radian = cosf((self.radius*self.radius+self.radius*self.radius - (self.pointRadius*2)*(self.pointRadius*2)))/(2*self.radius*self.radius);
    
    //头部点所占路劲的周长
    float offsetProgress = radian/(M_PI*2);
    
    
    _pointAnimatedLayer.strokeStart = _strokeEnd-offsetProgress;
    _pointAnimatedLayer.strokeEnd = MIN(_strokeEnd, 1);

93C03F05-24B2-4413-A46F-069400038EA2.png

黑点圆了...

其他的调整一下就好...

修修改改总体效果还不错...

哈哈哈...

我也不知道自己在写什么...

---

---

项目地址在这里....

其中的CAShapeLayer-Progress....

如果需要的话 可以自己去改改...

公司项目比较赶...

只为了实现...

自己都没时间去细化...

学习...

如果有问题欢迎提出...

共进...