从 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配合 PocketSVGExtension.swift 中的pathFromSVGFileNamed方法可以自由做缩放、镜像和位移。2. 关键帧动画的时间编排 ⏱️动画里大量使用了CAKeyframeAnimation的timeOffset技巧把一段动画的时长锚定住再根据手指下拉的进度progress去拨动时间轴从而实现拉到哪、播到哪的跟手效果。这套封装在 CAKeyframeAnimationExtensions.swift 中抽象出了旋转、透明度、位移等常用动画工厂方法值得直接抄进自己的工具箱。3. 帧动画与气泡的细节渲染 火焰是经典的帧动画78 张火焰 PNG 按序列播放前 11 张快速点燃后面 68 张慢速燃烧水面上升时定时器每隔 0.12 秒生成一个上浮的白圈气泡增强煮汤的真实感。这些细节正是让动画下拉刷新效果脱颖而出的关键。️ 源码地图按图索骥快速上手如果你打算深入阅读源码这份文件地图能帮你节省大量时间PullToMakeSoup/PullToMakeSoup/PullToMakeSoup.swift—— 核心类与动画状态机PullToMakeSoup/PullToMakeSoup/CAKeyframeAnimationExtensions.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/8/18 17:02:59 · 阅读 1.2k 从 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配合 PocketSVGExtension.swift 中的pathFromSVGFileNamed方法可以自由做缩放、镜像和位移。2. 关键帧动画的时间编排 ⏱️动画里大量使用了CAKeyframeAnimation的timeOffset技巧把一段动画的时长锚定住再根据手指下拉的进度progress去拨动时间轴从而实现拉到哪、播到哪的跟手效果。这套封装在 CAKeyframeAnimationExtensions.swift 中抽象出了旋转、透明度、位移等常用动画工厂方法值得直接抄进自己的工具箱。3. 帧动画与气泡的细节渲染 火焰是经典的帧动画78 张火焰 PNG 按序列播放前 11 张快速点燃后面 68 张慢速燃烧水面上升时定时器每隔 0.12 秒生成一个上浮的白圈气泡增强煮汤的真实感。这些细节正是让动画下拉刷新效果脱颖而出的关键。️ 源码地图按图索骥快速上手如果你打算深入阅读源码这份文件地图能帮你节省大量时间PullToMakeSoup/PullToMakeSoup/PullToMakeSoup.swift—— 核心类与动画状态机PullToMakeSoup/PullToMakeSoup/CAKeyframeAnimationExtensions.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考