美文网首页程序员
自定义滚动圆环

自定义滚动圆环

作者: Mr姜饼 | 来源:发表于2018-10-17 17:02 被阅读0次

什么都不说先上效果图

效果图

说下实现的步骤:

1.先在底层画一个灰色的还原

背景圆环

2.再接着画动态的带颜色圆环,   然后再动起来

动画圆环

写完这些  就能实现简单的圆环动画了

再接着我们添加圆点

分析下思路,我们只要创建一个小圆点  然后绕着其中心店旋转是不是就达到了效果了呢,话不多说 上代码

楼主把小圆点加在一个背景图层上,为什么不加在self上呢  而是加在另外一个背景图上呢,如果我们直接加在self上,当旋转的时候  是不是圆环和label都会跟着旋转呢  这样会与圆环的动画冲突 而且label也会旋转 。

接下来是圆点旋转的动画

大家都知道          

   CATransform3DRotate(dotBgView.layer.transform, M_PI, 0, 0, 1); 

//UIViewAnimationOptionCurveLinear  匀速属性

这个动画  如果旋转大于180度的话  (假设200度) 那么就会走捷径  实际上就不会真正看到从0度到200度  而是反方向地从0度到200度旋转  这样就达不到我们所要的效果  所以我们要分情况 如果大于180度(即percent大于0.5)的时候 我们不做任何处理  ,大于180度的时候  我们先让它旋转180度  再选择完剩余的度数  记住要时刻保持匀速,这样就能无缝衔接上了,

这样就能完成了   希望大家能理解能看懂  

有问题随时指教 谢谢各位

相关文章

网友评论

    本文标题:自定义滚动圆环

    本文链接:https://www.haomeiwen.com/subject/nayrzftx.html