WaveLoadingIndicator水晶球波浪进度指示器


github源码地址: https://github.com/liuzhiyi1992/WaveLoadingView

我博客原文:http://zyden.vicp.cc/waveloadingindicator/
欢迎转载,请注明出处,谢谢

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


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

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


使用方法:

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

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


let waveLoadingIndicator: WaveLoadingIndicator = WaveLoadingIndicator(frame: CGRectZero)



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

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



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

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()
}

oc的朋友不必理会里面的guard,不过必须注意防止Block导致的循环引用

swift的朋友平常习惯使用[unowned self]的也要注意了,这里必须使用[weak self],虽然[unowned self]后Block里持有的是弱引用,破坏了循环引用,但如果该controller(self)回收了,unowned机制会导致self变成一个无指向的野指针,SDWebImage再一次回调的时候,crash!

同理,oc的朋友在这种情况下也应使用__weak而不是__unsafe_unretained

对了demo中用的是.CacheMemoryOnly只是为了演示方便,复制的话记得改掉


修改属性,定制个人喜好

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


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



有什么不足或者建议,希望大家在博客评论指出,同时希望大家支持我新建的留言板,谢谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 文章转自极分享 更多精彩内容移步原文 之前在不知道哪里看见有Android的开发者分享一个像是注水玻璃球一样的进度...
    极分享阅读 1,336评论 0 12
  • 小的时候每次我看到电视里演记录贫困地区人们生活的场景,心里总不是滋味。 那时候我就想,有没有一种方法,能够让穷人变...
    谢唠钱呗阅读 213评论 0 0
  • 那时无枝可依 却内心充盈 现在作茧自缚 一片荒凉 一个女人 心里该装着多少悲凉 才会不言不语 在深夜痛哭 夜晚让失...
    步步高小天才朵儿阅读 139评论 0 1
  • 五月六日。 一路上大傻子大傻子叫个不停 一路上光看他笑过来了。一起去老城看电影。电影开始之前老师突然叫他回工作室 ...
    大耳朵图图的未婚妻阅读 198评论 0 0