就叫波浪进度指示器吧,WaveLoadingIndicator,含Swift Demo源代码

[复制链接]
104 0
之前在不知道哪里看见有Android的开发者分享一个像是注水玻璃球一样的进度指示器,觉得挺有意思想去了解下实现方式,但是在github上却找不到ios的类似的东西,还是决定自己找个时间尝试尝试实现。原因就是这样,好了先上成品。



哈哈还行吧,想玩玩的朋友也可以点appetize.io这里在线运行,进去直接start就可以了。

江湖规矩,控制进度只需控制progress属性就ok了,然后目前demo里可以直接改变波幅和边框宽度来体验,以及正中央的进度提示开关,当然水流速度也可以随心所欲,只是没有开放出来,下面的github地址有源码有使用demo,swift的,想怎样改就怎样改。



1、使用方法:

1.1、只需要将WaveLoadingIndicator.swift拖进工程里(oc工程可以通过bridge来import)

1.2、demo中结合SDWebImage演示下载图片进度指示过程(当然适用任何进度指示):

[AppleScript]
let waveLoadingIndicator: WaveLoadingIndicator = WaveLoadingIndicator(frame: CGRectZero)


使用的时候我把WaveLoadingIndicator加到ImageView里面,并填充整个ImageView,自伸缩

[AppleScript]
self.displayImageView.addSubview(self.waveLoadingIndicator)self.waveLoadingIndicator.frame = self.displayImageView.boundsself.waveLoadingIndicator.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]


使用SDWebImage加载网络图片,利用回调里的receivedSize和expectedSize计算已接受比例,对waveLoadingIndicator的progress属性赋值,控制水波的填充度。

[AppleScript]
self.displayImageView.sd_setImageWithURL(url, placeholderImage: nil, options: .CacheMemoryOnly, progress: { [weak self](receivedSize, expectedSize) -> Void in guard let weakSelf = self else { return } weakSelf.waveLoadingIndicator.progress = Double(CGFloat(receivedSize)/CGFloat(expectedSize)) }) { [weak self](image, error, _, _) -> Void in // 不要忘记在完成下载回调中,移除waveLoadingIndicator guard let weakSelf = self else { return } weakSelf.waveLoadingIndicator.removeFromSuperview()}





2、修改属性,定制个人喜好

点进WaveLoadingIndicator.swift,我们可以按个人需求修改里面的属性:


· cycle —— 循环次数,在控件宽度范围内,该正弦函数图形循环的次数,数值越大,控件范围内看见的正弦函数图形周期数越多,波长约短,波浪也越陡。
· term —— 正弦周期,在layoutSubviews中根据cycle重新计算,修改无效
· phasePosition —— 正弦函数相位,不可修改,否则图形错乱
· amplitude —— 波幅,数值越大,波浪幅度越大,波浪越陡,反之越平缓,可通过代码调用waveAmplitude修改
· position —— 正弦曲线的X轴 相对于 控件Y坐标的位置,在-drawRect中通过progress计算,修改无效
· waveMoveSpan —— 波浪移动的单位跨度,数值越大波浪移动越快,数值过大会出现不连续动画现象
· animationUnitTime —— 重画单位时间,数值越小,重画速度越快频率越大
· heavyColor —— demo中较深的绿色部分
· lightColor —— demo中较浅的绿色部分
· clipCircleColor —— 玻璃球边界颜色
· clipCircleLineWidth —— 玻璃球边线宽度,可通过代码调用borderWidth修改
· progressTextFontSize —— 中央进度提示百分比字号大小



github源码地址:





有什么不足或者建议,希望大家在Swifthumb上回帖指出,谢谢!



原文:

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

举报 使用道具

回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

ios.irunthink.com
搜索
热搜: iOS swift 下拉刷新

图文热点

更多

开发教程

更多

客服中心

400-800 周一至周日 9:30-17:30 仅收市话费

关注我们

  • 微信扫描
  • 关注微信
关于我们
关于我们
友情链接
联系我们
帮助中心
精贴推荐
源码上传
注册登录
服务支持
资源下载
关注我们
官方微博
官方空间
快速回复 返回顶部 返回列表