CBPullToReflesh:源码分析

这个demo制作时,本人水平比较浅显,大家姑且将其当作参考,不必太过纠结其中不合理的地方。本人已经针对swift3作出适配修改,感谢大家的关注。

设计效果如下:

以下是原Idea作者的Dribble:Daily-UI-094-News 地址和本人的GitHub:CBPullToReflesh 地址,希望大家点击支持,再次感谢。

思路分析:

以下将针对设计过程中的知识点进行详细的记录。

使用贝塞尔曲线画波纹

这样的曲线相对简单,我们这里直接使用系统提供的一次贝塞尔曲线方法:

但是我们还需要根据scrollView的contentOffSet来动态改变该曲线的弧线曲折度,所以这里我们将改变曲折度写成一个方法:

这样我们就可以通过只传入bendDist来改变曲折度。

波纹曲线回滚动画

根据上面的动图,我们可以看到开始刷新操作时,曲折度逐渐减小,这里我们需要一个动画来实现这个功能:

至此波纹曲线的部分就基本完成。

scrollView回滚动画

问题

在进行波纹曲线回滚动画的时候,我们的scrollView也有适当的上移,这样的上移动画,如果直接使用setContentOffset 来进行视图的移动,选择animation: true的情况下,每一次移动,都会使得scrollView从顶部重新移动到目标位置,造成视图一直闪的情况。

解决方案

为了避免这样的情况,我们可以依然选择setContentOffset 来进行scrollView的视图移动,但是我们设置animation: false来关闭系统提供的动画,选择自己来实现动画的效果。

  1. 首先,我们设置一个定时器:

这个定时器的时间步进我们设置为0.01s,是因为NSTimer准确度并不高。然后我们给这个定时器附加一个stepNum的属性,这个属性指的是每一次执行setContentOffset向上移动的距离,这个属性的值,我们这样子计算:

stepNum=离/(100)

然后,我们每隔0.01秒,刷新一次contentOffset,形成一种视图向上持续移动的视觉效果,代码如下:

接下来,我们来做小球的部分。

使用贝塞尔曲线画小球

这里,我们使用贝塞尔曲线画任意弧度的一个方法:

个工厂方法用于画弧,参数说明如下:
center:弧线中心点的坐标,radius:弧线所在圆的半径 startAngle:弧线开始的角度值endAngle:弧线结束的角度值 clockwise:是否顺时针画弧线。

使用贝塞尔曲线画出小球的运动轨迹

画出小球是比较容易的部分,但是想要画出小球的运行轨迹就稍微有点复杂。
以下我们较为详细的来说明一下:

这一部分,如何去做更重要,牵扯到很多小细节,代码就不贴了,请看Github中的项目文件

草稿思维图

求x,y与Θ,β的关系

由上面的这幅图我们可以得出以下公式:

R=√(x2+y2)/2cosβ

 

cosβ=y/√(x2+y2)

 

根据上面两条式子,我们可以推导出:

R=x2+y2/2y

 

而根据:

β=arccos(y/√(x2+y2))

 

可以得到:

Θ=180°2β=180°2arccos(y/√(x2+y2))

 

至此,我们知道了弧线所在圆的半径R和该孤的角度Θ。
现在,我们只要知道x和y,就可以使用上面提到的来画出所要的弧线。

求x,y

根据这个图片,我们定义一个常量为ballSpace(两球之间的间隔),已知球的半径为ballSize / 2,我们可以列出以下公式:

x=(ballSize+ballSpace)(1.5CGFloat(ballTag))

ballTag为每隔球的序号,从0开始。

y=stopDist/2

stopDist为scrollView停下,小球开始浮动动画的位置。

小球的浮动动画

小球的浮动只是简单的上下位置的变换,值得注意的是每颗小球开始动画的时间点存在差值,这个差值使得小球有了错位浮动的效果,下面是代码:

小结:

此次分析到此为止,希望大家有所收获,本人也将继续为大家带来更多的开源库分析,大部分将是自己写的,所以也会比较仔细,希望大家关注,谢谢。

1 收藏 评论

关于作者:Super邦

野生猿类 个人主页 · 我的文章 · 1 ·  

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部