CRNetworkButton进阶玩法shouldAutoReverse、completionHandler等6个高阶技巧【免费下载链接】CRNetworkButtonSend Button for iOS项目地址: https://gitcode.com/gh_mirrors/cr/CRNetworkButtonCRNetworkButton 是一款开源的 iOS 网络发送按钮Send Button组件它把普普通通的按钮点击升级成一段流畅的加载动画点击后按钮收缩成圆形旋转的小圆点代表网络请求正在进行完成后自动弹出对勾或错误叉号全程无需你手写一行动画代码。本文面向新手和普通开发者不讲冗长源码只讲 6 个即学即用的高阶技巧帮你把 shouldAutoReverse、completionHandler、进度模式等隐藏能力全部用起来。先花 1 分钟认识 CRNetworkButtonCRNetworkButton 由 Cleveroad 团队开源支持 iOS 8 及以上系统核心源码只有一个文件 CRNetworkButton.swift所有配置项都通过IBInspectable暴露也就是说你可以在 Storyboard 的属性面板里直接拖拽设置也能在代码里灵活配置。安装也非常简单在 Podfile 中加入一行即可pod CRNetworkButton然后执行pod install并在 Swift 文件中import CRNetworkButton一个自带加载动画的按钮就诞生了。它的核心逻辑是一个简单的状态机ready → loading → finishing → finished。看懂这个状态机后面 6 个技巧就都顺理成章了。下面是 6 个技巧的速览技巧关键词解决什么问题技巧一shouldAutoReverse动画结束后自动恢复初始状态技巧二completionHandler精准捕获动画完成的回调时机技巧三progressMode用真实进度条替代循环动画技巧四stopByError网络失败时的错误态展示技巧五currState / resetToReady精确掌控按钮状态机技巧六dotLength / velocity / linesCount定制专属加载动画技巧一shouldAutoReverse 用法——加载完成后一键自动复位默认情况下CRNetworkButton 动画结束后会停留在完成状态标题变成endText默认 Done。但很多业务场景是同一个按钮需要反复提交比如点赞、发送消息、刷新列表。这时只需把shouldAutoReverse设为true按钮完成动画后就会自动回到初始状态标题恢复为startText随时可以再次点击。示例工程 ViewController.swift 中的第二个按钮就是这么配置的。networkButton.shouldAutoReverse true一个小细节值得注意开启shouldAutoReverse后按钮标题始终显示startTextendText和errorText会被忽略这符合反复使用的语义。技巧二completionHandler 回调——动画结束的精准时机如果你需要在动画彻底结束后执行额外逻辑比如跳转页面、发送统计、弹出提示completionHandler就是为你准备的。它是一个闭包属性动画完全结束后才会被调用。networkButton.completionHandler { print(动画结束可以执行后续业务逻辑了) self.performSegue(withIdentifier: showResult, sender: nil) }这里有两个坑要提醒新手它是一次性的源码在调用后立即置为nilcompletionHandler nil所以每次需要时都要重新赋值不能只赋值一次。它在动画线程回调如果要在里面操作 UI记得切回主线程。建议把completionHandler和shouldAutoReverse搭配使用前者负责业务逻辑后者负责界面复位各司其职。技巧三progressMode 进度模式——用 updateProgress 打造真实进度条默认的加载动画是无限循环的小圆点适合不知道要等多久的请求。但如果你能拿到真实的下载或上传进度比如 0.0 到 1.0就该开启progressMode让按钮变成一条环形进度条体验瞬间提升一个档次。开启方式同样简单networkButton.progressMode true然后在网络回调里不断刷新进度func downloadProgress(progress: CGFloat) { networkButton.updateProgress(progress) if progress 1.0 { networkButton.stopAnimate() } }updateProgress接收 0 到 1 之间的数值会实时更新按钮外圈的圆弧进度。示例工程里用定时器模拟了 4 秒的下载进度代码位于 ViewController.swift非常适合作为参考模板。注意进度达到 1.0 后要手动调用stopAnimate()收尾按钮才会进入完成态。技巧四stopByError 错误处理——网络失败也能优雅收场网络请求难免失败CRNetworkButton 专门为这种情况设计了stopByError()方法。调用后按钮会以crErrorColor默认红色渲染错误叉号标题变为errorText默认 Error用户一眼就能看出这次操作失败了。典型用法是在网络回调里分流networkButton.startAnimate() FakeNetworkManager.performRequest( withSuccess: { result in networkButton.stopAnimate() // 成功对勾 Done }, error: { err in networkButton.stopByError() // 失败叉号 Error } )示例工程中的 FakeNetworkManager.swift 会交替模拟成功和失败方便你直观对比两种结束动画的效果。这个技巧特别适合登录、支付、提交表单等必须让用户知道结果的场景。技巧五currState 与 resetToReady——掌控完整状态机currState是只读属性返回当前的CRState枚举值ready、loading、finishing、finished你可以据此判断按钮此刻处于什么阶段避免重复操作。if networkButton.currState .finished { // 按钮已处于完成态 }而resetToReady()可以随时把按钮强行拉回初始状态清空所有动画和进度。这在取消请求重新提交列表复用等场景非常有用示例工程里就利用它实现了再次点击回到初始态的交互if sender.currState .finished { sender.resetToReady() }掌握状态机后你会发现CRNetworkButton 不只是按钮更像一个自带状态管理的交互组件配合isEnabled自动禁用加载中按钮不可点击的特性几乎不用写额外的防重复提交代码。技巧六dotLength、velocity、linesCount——定制专属加载动画最后一个技巧帮你打造有性格的按钮。加载动画的三个核心参数全部开放linesCount加载时圆环上的线段数量默认 2 条。改成 34 条转起来更活泼。dotLength每条线段的弧度长度单位是弧度默认 0.1。调大后线段变粗变长风格更粗犷。velocity旋转一整圈所需秒数默认 1 秒。调小转得更快给人处理迅速的感觉。networkButton.linesCount 3 networkButton.dotLength 0.15 networkButton.velocity 0.8配合crDotColor圆点颜色、crLineWidth边框粗细、crBorderColor边框颜色这些属性你几乎可以复刻任何设计稿上的加载动效而且全程无需触碰核心源码。如果想看更多组合效果跑一下示例工程里面已经用linesCount等参数配好了多种风格。结语从会用到用好CRNetworkButton 的文档虽短但可玩性极高。回顾一下今天的 6 个技巧shouldAutoReverse负责自动复位completionHandler负责收尾回调progressMode updateProgress打造真实进度条stopByError优雅处理失败currState resetToReady掌控状态机最后用dotLength、velocity、linesCount定制专属动画。想要亲手调试这些技巧可以先克隆仓库到本地https://gitcode.com/gh_mirrors/cr/CRNetworkButton然后进入 Example 目录执行pod install就能在示例工程里逐个体验每个参数的效果。下次再遇到发送按钮怎么做得高级一点的需求拿出这篇文章10 分钟就能交付一个让产品和设计师都满意的结果 【免费下载链接】CRNetworkButtonSend Button for iOS项目地址: https://gitcode.com/gh_mirrors/cr/CRNetworkButton创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考