登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

PullToReflesh一个炫酷 的下拉刷新控件

[复制链接]
来自: CBang 分类: iOS精品源码 上传时间: 2016-5-6 17:28:24
Tag:下拉刷新 控件 refresh 刷新 动画

项目介绍:

思路分析:
以下将针对设计过程中的知识点进行详细的记录。
使用贝塞尔曲线画波纹
这样的曲线相对简单,我们这里直接使用系统提供的一次贝塞尔曲线方法:
[Objective-C] 查看源文件 复制代码
public func addQuadCurveToPoint(endPoint: CGPoint, controlPoint: CGPoint)


但是我们还需要根据scrollView的contentOffSet来动态改变该曲线的弧线曲折度,所以这里我们将改变曲折度写成一个方法:
[Objective-C] 查看源文件 复制代码
func wavePath(bendDist bendDist:CGFloat) -> CGPathRef {
    let width = self.frame.width
    let height = self.frame.height
    
    let bottomLeftPoint = CGPointMake(0, height)
    let topMidPoint = CGPointMake(width / 2,  -bendDist)
    let bottomRightPoint = CGPointMake(width, height)
    
    let bezierPath = UIBezierPath()
    bezierPath.moveToPoint(bottomLeftPoint)
    bezierPath.addQuadCurveToPoint(bottomRightPoint, controlPoint: topMidPoint)
    bezierPath.addLineToPoint(bottomLeftPoint)
    return bezierPath.CGPath
}



这样我们就可以通过只传入bendDist来改变曲折度。
波纹曲线回滚动画
根据上面的动图,我们可以看到开始刷新操作时,曲折度逐渐减小,这里我们需要一个动画来实现这个功能:
[Objective-C] 查看源文件 复制代码
func boundAnimation(bendDist bendDist: CGFloat) {
    let bounce = CAKeyframeAnimation(keyPath: "path")
    bounce.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    let values = [
        self.wavePath(bendDist: bendDist),
        self.wavePath(bendDist: bendDist * 0.8),
        self.wavePath(bendDist: bendDist * 0.6),
        self.wavePath(bendDist: bendDist * 0.4),
        self.wavePath(bendDist: bendDist * 0.2),
        self.wavePath(bendDist: 0)
    ]
    bounce.values = values
    bounce.duration = bounceDuration
    bounce.removedOnCompletion = false
    bounce.fillMode = kCAFillModeForwards
    bounce.delegate = self
    self.waveLayer.addAnimation(bounce, forKey: "return")
}

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


scrollView回滚动画
问题
在进行波纹曲线回滚动画的时候,我们的scrollView也有适当的上移,这样的上移动画,如果直接使用setContentOffset 来进行视图的移动,选择animation: true的情况下,每一次移动,都会使得scrollView从顶部重新移动到目标位置,造成视图一直闪的情况。
解决方案
为了避免这样的情况,我们可以依然选择setContentOffset 来进行scrollView的视图移动,但是我们设置animation: false来关闭系统提供的动画,选择自己来实现动画的效果。
  • 首先,我们设置一个定时器:
[Objective-C] 查看源文件 复制代码
NSTimer.scheduledTimerWithTimeInterval(0.01, target: self, selector: "scollBackAnimation:", userInfo:stepNum, repeats: true)


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

1.png


然后,我们每隔0.01秒,刷新一次contentOffset,形成一种视图向上持续移动的视觉效果,代码如下:
[Objective-C] 查看源文件 复制代码
func scollBackAnimation(timer: NSTimer) {
    let stepNum = timer.userInfo! as! CGFloat
    scrollViewContentOffSetY = scrollViewContentOffSetY! + stepNum
    if scrollViewContentOffSetY >= finalScrollViewContentOffSetY {
        timer.invalidate()
    }
    scrollView?.setContentOffset(CGPoint(x: 0, y: scrollViewContentOffSetY!), animated: false)
}


接下来,我们来做小球的部分。
使用贝塞尔曲线画小球
这里,我们使用贝塞尔曲线画任意弧度的一个方法:
[Objective-C] 查看源文件 复制代码
public convenience init(arcCenter center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool)



这个工厂方法用于画弧,参数说明如下:
center:弧线中心点的坐标,radius:弧线所在圆的半径 startAngle:弧线开始的角度值 endAngle:弧线结束的角度值 clockwise:是否顺时针画弧线。
使用贝塞尔曲线画出小球的运动轨迹
画出小球是比较容易的部分,但是想要画出小球的运行轨迹就稍微有点复杂。
以下我们较为详细的来说明一下:
这一部分,如何去做更重要,牵扯到很多小细节,代码就不贴了,请看Github中的项目文件


草稿思维图
2.png

3.png



小球的浮动动画

小球的浮动只是简单的上下位置的变换,值得注意的是每颗小球开始动画的时间点存在差值,这个差值使得小球有了错位浮动的效果,下面是代码:
[Objective-C] 查看源文件 复制代码
func floatUpOrDown() {
    let move = CAKeyframeAnimation(keyPath: "position.y")
    move.values = [0,1,2,3,4,5,4,3,2,1,0,-1,-2,-3,-4,-5,-4,-3,-2,-1,0]
    move.duration = 1
    move.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    move.additive = true
    move.fillMode = kCAFillModeForwards
    move.removedOnCompletion = false
    self.addAnimation(move, forKey: move.keyPath)
}
let timeDelay: NSTimeInterval =  Double(layerTag!) * 0.2
timer = NSTimer.schedule(delay: timeDelay, repeatInterval: 1, handler: { (timer) -> Void in
    self.floatUpOrDown()
})


总结:
这一次的demo比较简单,还是花了两天半的时间,如果说有什么感想,就还是需要继续努力。

小编注:感谢作者分享与@code4app

相关源码推荐:

我来说两句
*滑动验证:
所有评论(15)
DarrenXman 2016-5-9 22:17:03
很给力,Code4App有你更精彩!
回复
王颖博 2016-5-10 17:03:11
很给力,Code4App有你更精彩!
回复
wwcdDOUDOU 2016-5-10 19:56:33
很不错的 大神
回复
skingen 2016-5-14 23:56:45
谢谢楼主分享~!
回复
Reef 2016-5-17 14:41:27
感谢分享,学习下
回复
doudou-wwcd 2016-5-18 14:12:39
学习了  支持
回复
大梦想小明造 2016-5-23 11:28:58
666666666666
回复
hsiangchou 2016-5-23 15:05:36
学习学习!
回复
yangdj2000 2016-5-31 19:11:52
很不错的 很给力
回复
12下一页
3725 0 0
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表