企业官网建设流程全解析

CRNetworkButton进阶玩法：shouldAutoReverse、completionHandler等6个高阶技巧

【免费下载链接】CRNetworkButtonSend Button for iOS项目地址: https://gitcode.com/gh_mirrors/cr/CRNetworkButton

CRNetworkButton 是一款开源的 iOS 网络发送按钮（Send Button）组件，它把普普通通的按钮点击升级成一段流畅的加载动画：点击后按钮收缩成圆形，旋转的小圆点代表网络请求正在进行，完成后自动弹出对勾或错误叉号，全程无需你手写一行动画代码。本文面向新手和普通开发者，不讲冗长源码，只讲 6 个即学即用的高阶技巧，帮你把 shouldAutoReverse、completionHandler、进度模式等隐藏能力全部用起来。

先花 1 分钟认识 CRNetworkButton

CRNetworkButton 由 Cleveroad 团队开源，支持 iOS 8 及以上系统，核心源码只有一个文件 CRNetworkButton.swift，所有配置项都通过@IBInspectable暴露，也就是说你可以在 Storyboard 的属性面板里直接拖拽设置，也能在代码里灵活配置。

安装也非常简单，在 Podfile 中加入一行即可：

pod "CRNetworkButton"

然后执行pod install，并在 Swift 文件中import CRNetworkButton，一个自带加载动画的按钮就诞生了。

它的核心逻辑是一个简单的状态机：ready → loading → finishing → finished。看懂这个状态机，后面 6 个技巧就都顺理成章了。下面是 6 个技巧的速览：

技巧一：shouldAutoReverse 用法——加载完成后一键自动复位

默认情况下，CRNetworkButton 动画结束后会停留在"完成"状态，标题变成endText（默认 "Done"）。但很多业务场景是同一个按钮需要反复提交，比如点赞、发送消息、刷新列表。

这时只需把shouldAutoReverse设为true，按钮完成动画后就会自动回到初始状态，标题恢复为startText，随时可以再次点击。示例工程 ViewController.swift 中的第二个按钮就是这么配置的。

networkButton.shouldAutoReverse = true

一个小细节值得注意：开启shouldAutoReverse后，按钮标题始终显示startText，endText和errorText会被忽略，这符合"反复使用"的语义。

技巧二：completionHandler 回调——动画结束的精准时机

如果你需要在动画彻底结束后执行额外逻辑（比如跳转页面、发送统计、弹出提示），completionHandler就是为你准备的。它是一个闭包属性，动画完全结束后才会被调用。

networkButton.completionHandler = { print("动画结束，可以执行后续业务逻辑了") self.performSegue(withIdentifier: "showResult", sender: nil) }

这里有两个坑要提醒新手：

• 它是"一次性"的：源码在调用后立即置为nil（completionHandler = 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 条。改成 3～4 条，转起来更活泼。
• 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