果冻效果下拉刷新控件

Posted 2023-03-09

参考技术A 这个下拉控件是在 Elastic view animation using UIBezierPath 这篇博客上看到的，觉得效果还不错，自己也就OC简单实现了一下（原作者是用Swift写的），控件效果如下：

对于下拉的状态，我将其分为三种，然后在初始化的时候，将状态设置为正常状态

并且在初始化的时候，绘制曲线的初始样式

那在手指拖动的过程中，我们该如果实现果冻拉伸的效果呢？
我们需要一个辅助视图centerHelperView，这个辅助视图是加在下面这条线的中间的，如图的小黑点：

然后在取出 centerHelperView 的原点，来不断绘制果冻的曲线

既然我们能够获取到 centerHelperView 在不同时间里的位置，那么我们就可以根据它来绘制我们的曲线

果冻的曲线我们就完成了，然后我们就要开始对手势的状态来进行处理在写控件调试的时候，你可以通过给目标视图添加 UIPanGestureRecognizer ，调用 - translationInView: 来获取到手指在屏幕上拖动时位置的变化，但是下拉刷新控件一般都是加在 ScrollView 上的， ScrollView 自己是有一个只读的 UIPanGestureRecognizer 属性，所以我们不必自己再添加一个，我们只需要观察 UIPanGestureRecognizer 的 state 即可

在取消拖动时，我们根据 ScrollView 的 contentOffset 来判断，是否是取消加载还是加载

进度圆圈的显示主要是依赖于下拉的进度，然后改变progress
，圆圈随之绘制就好

当 progress 达到1之后，就开始旋转动画了，这个我们使用 CABasicAnimation 即可

ok，大功告成~