企业官网建设流程全解析

PullToMakeSoup：Yalantis 出品的 iOS 动画下拉刷新组件完整介绍

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

如果你正在寻找一款让应用脱颖而出的 iOS 下拉刷新组件，那么由 Yalantis 团队开源的 PullToMakeSoup 绝对值得一试。它是一款自定义动画下拉刷新组件，可以轻松添加到任何 UIScrollView 中，用一段"煮汤"的趣味动画替代千篇一律的加载转圈，让用户在等待数据刷新时也会心一笑。本文将带你从零认识这个动画下拉刷新组件，包括它的特性、安装步骤、基本用法与核心实现，帮助你快速把它集成到自己的 iOS 项目中。

PullToMakeSoup 是什么？一款会"煮汤"的 iOS 下拉刷新

PullToMakeSoup 是 Yalantis 开源社区的作品，项目灵感来源于 Dribbble 上的 Recipe Finder 设计。它的特别之处在于：当下拉刷新触发时，屏幕顶部会出现一口平底锅，胡萝卜、土豆、豌豆等食材依次"飞入"锅中，随后水面升起、锅盖轻轻晃动、火焰燃起、气泡咕嘟冒泡，仿佛真的在烹饪一碗热汤。

这个动画下拉刷新组件核心亮点包括：

• 🍲沉浸式动画：完整的煮汤流程，包含食材入锅、注水、点火、冒泡、锅盖抖动等细节。
• 📦即插即用：只需几行代码即可挂载到 UITableView、UICollectionView、UIScrollView 上。
• 🧩基于成熟框架：构建在 Yalantis 自家的 PullToRefresh 框架之上，状态管理清晰。
• 🎨SVG 路径动画：利用 PocketSVG 解析矢量路径，实现食材沿曲线飞入锅中的效果。
• 🆓MIT 开源协议：可自由用于商业项目，二次开发无负担。

动画是怎么动起来的？从食材到火焰的完整链路

PullToMakeSoup 的动画由核心源码 PullToMakeSoup.swift 中的SoupAnimator驱动，它根据下拉刷新的四种状态（初始、释放中、加载中、完成）播放对应动画：

• 释放中（releasing）：随着下拉距离增加，平底锅逐渐显现，锅盖缓缓打开，胡萝卜、土豆、豌豆按照各自的 SVG 路径依次飞入锅中，画面进度与手指拖拽位置实时绑定。
• 加载中（loading）：水面自下而上"注满"锅体，锅盖开始左右摇摆，底部火焰点燃并循环闪烁，同时每 0.12 秒生成一颗白色小气泡向上飘起，模拟沸腾效果。
• 完成（finished）：停止气泡与火焰，动画复位，等待下一次下拉。

火焰效果是点睛之笔：源码通过Flames%.4d命名规则加载资源目录Resources/CookingRefresher.xcassets/flames/中的 78 帧火焰序列图，配合animationImages实现帧动画，前 11 帧快速点燃，后续帧循环燃烧，视觉节奏非常自然。

食材飞入的曲线轨迹则由 PocketSVG 解析项目内置的 SVG 文件得到，例如carrot-path-only.svg、potato-path-only.svg、pea-from-left-path-only.svg等，再交由 CAKeyframeAnimation+Extensions.swift 提供的animationPosition、animationWith工具方法执行关键帧动画。所有视图元素（锅、盖子、食材、水面、火焰、阴影）在SoupView.xib中通过 IBOutlet 关联，布局清晰。

快速开始：两种安装方式任你选

PullToMakeSoup 支持 iOS 8.0+，官方推荐使用 Swift 3 与竖屏方向，安装方式非常灵活。

方式一：CocoaPods 安装（推荐）

在你的 Podfile 中加入一行，然后执行pod install：

use_frameworks! pod 'PullToMakeSoup', '~> 2.0'

方式二：Carthage 安装

在 Cartfile 中添加依赖并运行carthage update：

github "Yalantis/PullToMakeSoup" ~> 2.0

安装完成后，将生成的 framework 拖入工程并确保Linked Frameworks and Libraries已配置好即可。

三分钟上手：几行代码接入下拉刷新

接入过程非常简单，只需四步。第一步，导入框架：

import PullToMakeSoup

第二步，创建一个刷新器实例，默认出现在顶部：

let refresher = PullToMakeSoup()

第三步，在viewDidAppear中把它添加到你的滚动视图，并传入刷新回调。以 UITableView 为例：

override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) tableView.addPullToRefresh(refresher) { // 在这里执行刷新动作，比如从网络拉取数据 } }

第四步，数据加载完成后收起刷新动画：

tableView.endRefreshing()

如果你需要程序主动触发刷新（比如首次进入页面自动加载），只需调用：

tableView.startRefreshing()

完整的调用示例可以参考演示工程 ViewController.swift，它展示了addPullToRefresh、endRefreshing、startRefreshing三个 API 的标准用法。

使用注意事项

• 竖屏优先：项目官方标注支持 Portrait orientation，横屏布局可能不理想。
• 系统版本：最低支持 iOS 8.0，旧系统用户也可以放心使用。
• 依赖关系：组件底层依赖 Yalantis 的 PullToRefresh 框架，安装时会自动带入，无需手动处理。
• 动画资源：火焰帧动画依赖 xcassets 资源包，集成时请确保CookingRefresher.xcassets被正确打包进目标工程。

总结

PullToMakeSoup 用一个极具创意的方式重新定义了 iOS 下拉刷新组件——它不再是冷冰冰的转圈，而是一场充满烟火气的美食烹饪秀。对于想提升应用细节质感、给用户制造惊喜的开发者来说，这是一个低成本高回报的选择。无论是美食类 App、社交产品还是工具类应用，你都可以借助这个动画下拉刷新组件快速打造出令人印象深刻的加载体验。

如果你对它的实现细节感兴趣，不妨直接阅读源码：动画状态机在PullToMakeSoup.swift，关键帧动画工具在CAKeyframeAnimation+Extensions.swift，矢量路径解析参考PocketSVG目录，界面布局见Resources/SoupView.xib。上手简单、效果惊艳，值得一试！

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