从 0 到 1 复刻 PullToMakeSoup：打造你自己的动画下拉刷新组件

从 0 到 1 复刻 PullToMakeSoup：打造你自己的动画下拉刷新组件

【免费下载链接】PullToMakeSoupCustom animated pull-to-refresh that can be easily added to UIScrollView项目地址: https://gitcode.com/gh_mirrors/pu/PullToMakeSoup

你有没有想过，iOS 里千篇一律的转圈加载动画，也可以变成"倒水、下菜、开火煮汤"的烹饪过程？PullToMakeSoup 正是这样一个脑洞大开的动画下拉刷新组件：它由 Yalantis 团队开源，把传统的下拉刷新动画变成了一口平底锅从空到满、蔬菜入锅、火焰升腾的完整剧情，而且可以直接挂到任意 UIScrollView 上使用。本文将从 0 到 1 带你拆解它的实现思路，并教你在自己的 App 里复刻出同样惊艳的自定义下拉刷新动画。

图片来自 Demo 工程，展示了下拉刷新在食谱列表中的实际效果，画面灵感源自 Dribbble 上的 Recipe Finder v2。

🍲 PullToMakeSoup 到底是什么

一句话概括：它是一款可高度定制的下拉刷新组件，用"煮汤"替代"转圈"。当你下拉列表时，屏幕上会出现一口锅，食材（胡萝卜、土豆、豌豆）逐个飞入，水慢慢注满，火焰燃起，锅盖轻轻晃动——刷新结束，一切复位，等待下一次"烹饪"。

它的实现并不神秘，本质是：

• 一个基于PullToRefresher框架扩展出来的刷新器（PullToMakeSoup.swift）
• 一个用 XIB 搭好的视图层（SoupView.xib）
• 一个负责编排动画的状态机SoupAnimator

🎬 动画背后的 4 个关键状态

想要复刻它，首先要理解驱动整个动画的状态机模型。SoupAnimator在收到不同状态时会执行不同动作：

状态	触发时机	画面表现
initial（初始）	一切归位	锅、食材复位，水排空
releasing（释放中）	手指下拉	食材按进度飞入，锅盖渐合
loading（加载中）	松开手指	注水、起泡、火焰燃烧、锅盖抖动
finished（完成）	刷新结束	停止火焰，等待下次

核心逻辑就写在SoupAnimator.animate(_:)方法里，一个switch分发四种状态，结构非常清晰，非常适合新手阅读源码入门。

📱 三步集成：把动画下拉刷新装进你的 UITableView

好消息是：使用这个组件不需要理解任何动画原理，三步即可跑起来。假设你已经通过 CocoaPods 或 Carthage 把依赖装好，只需要：

第一步：导入框架

import PullToMakeSoup

第二步：在 viewDidAppear 中挂载

override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) tableView.addPullToRefresh(PullToMakeSoup(at: .top)) { // 在这里执行你的数据刷新请求 } }

第三步：刷新结束记得收尾

tableView.endRefreshing(at: .top)

如果想让锅"自动开火"，还可以直接调用tableView.startRefreshing(at: .top)以编程方式触发刷新，Demo 里的完整写法可以参考 ViewController.swift，全部核心代码只有十几行。

🔧 复刻拆解：动画是怎么"做"出来的

看懂使用方式后，我们进入最有趣的部分——复刻这套动画下拉刷新效果的底层实现。它主要由三套技术拼装而成：

1. SVG 路径驱动的入锅动画 🥕

胡萝卜、土豆、豌豆"飞入锅中"的曲线轨迹，并不是手写坐标，而是预先用 SVG 画好路径，再交给 PocketSVG 解析成CGPath，最后塞进CAKeyframeAnimation的path属性。

相关资源都在 Resources 目录 下，比如carrot-path-only.svg、potato-path-only.svg，配合 PocketSVG+Extension.swift 中的pathFromSVGFileNamed方法，可以自由做缩放、镜像和位移。

2. 关键帧动画的时间编排 ⏱️

动画里大量使用了CAKeyframeAnimation的timeOffset技巧：把一段动画的时长"锚定"住，再根据手指下拉的进度（progress）去拨动时间轴，从而实现"拉到哪、播到哪"的跟手效果。这套封装在 CAKeyframeAnimation+Extensions.swift 中，抽象出了旋转、透明度、位移等常用动画工厂方法，值得直接抄进自己的工具箱。

3. 帧动画与气泡的细节渲染 💨

火焰是经典的帧动画：78 张火焰 PNG 按序列播放（前 11 张快速点燃，后面 68 张慢速燃烧）；水面上升时，定时器每隔 0.12 秒生成一个上浮的白圈气泡，增强"煮汤"的真实感。这些细节正是让动画下拉刷新效果脱颖而出的关键。

🗂️ 源码地图：按图索骥快速上手

如果你打算深入阅读源码，这份文件地图能帮你节省大量时间：

• PullToMakeSoup/PullToMakeSoup/PullToMakeSoup.swift—— 核心类与动画状态机
• PullToMakeSoup/PullToMakeSoup/CAKeyframeAnimation+Extensions.swift—— 关键帧动画封装
• PullToMakeSoup/PullToMakeSoup/PocketSVG/—— SVG 路径解析与扩展
• PullToMakeSoup/PullToMakeSoup/Resources/—— XIB、SVG 路径与火焰帧图
• PullToMakeSoupDemo/—— 可直接运行的演示工程

想要动手复刻，可以先克隆仓库本地研究：

git clone https://gitcode.com/gh_mirrors/pu/PullToMakeSoup

💡 新手避坑与优化建议

最后分享几个我在阅读源码时总结的实用经验：

• 保持竖屏：该组件官方要求 Portrait 方向，横屏下布局会乱，复刻时记得锁定方向。
• 动画时长匹配：endRefreshing应在数据返回后调用，建议与 loading 动画节奏对齐，避免"汤还没煮好就收锅"。
• 替换素材很轻松：想换成"煮咖啡"或"烤面包"？只需替换 XIB 中的图片和 SVG 路径，动画编排逻辑完全复用。
• 理解依赖：它基于PullToRefresher框架，理解状态机前先看父类，事半功倍。

从一口锅到完整的动画下拉刷新组件，PullToMakeSoup 用优雅的工程结构证明了：好的交互体验，并不需要复杂的代码量。现在就去克隆源码，把这份"烹饪快乐"带进你自己的 App 吧！

【免费下载链接】PullToMakeSoupCustom animated pull-to-refresh that can be easily added to UIScrollView项目地址: https://gitcode.com/gh_mirrors/pu/PullToMakeSoup