深入 PullToMakeSoup 动画状态机initial、releasing、loading、finished 四态全解析【免费下载链接】PullToMakeSoupCustom animated pull-to-refresh that can be easily added to UIScrollView项目地址: https://gitcode.com/gh_mirrors/pu/PullToMakeSoupPullToMakeSoup 动画状态机是理解这款 iOS 开源下拉刷新组件的钥匙。作为一款能为 UIScrollView 轻松添加自定义动画的 Swift 组件PullToMakeSoup 用一锅正在烹煮的浓汤替代了传统转圈菊花把下拉刷新的交互过程演绎得趣味十足。本文将从源码出发拆解它的四个核心状态——initial初始、releasing释放中、loading加载中、finished完成带你看懂这套优雅的动画调度机制如何驱动整个煮汤过程。一、PullToMakeSoup 是什么一颗会煮汤的下拉刷新控件PullToMakeSoup 是 Yalantis 团队基于 PullToRefresh 框架二次开发的动画组件核心代码非常精简——整个动画逻辑都集中在 PullToMakeSoup.swift 这一个文件里而视图的搭建则通过 SoupView.xib 完成。画面上有平底锅、胡萝卜、土豆、青豆、汤水、锅盖、火焰、气泡等十余个元素全部由 xib 中的 UIImageView 承载。接入方式同样简单创建PullToMakeSoup()实例在viewDidAppear中调用tableView.addPullToRefresh(refresher)并传入刷新回调数据加载完成后调用endRefreshing()收尾具体接入示例可参考 ViewController.swift。二、动画状态机四态一览各司其职PullToRefresh 框架为刷新视图定义了统一的动画协议RefreshViewAnimatorPullToMakeSoup 的SoupAnimator实现该协议并把整个生命周期收敛为 4 个状态状态触发时机动画行为initial视图初始化/复位布置食材预录制全部入场动画releasing(progress)手指下拉过程中按进度回放动画实现跟手效果loading松手开始刷新点火、倒水、冒泡、盖盖循环播放finished刷新完成停止气泡计时器等待下一次复位这样的设计让手势与动画完全解耦——手势只负责报告进度动画只负责根据进度表演。三、状态分发入口animate(_:) 如何调度所有状态切换都汇聚在animate(_ state: State)这一个方法里通过 switch 分发到四个处理函数public func animate(_ state: State) { switch state { case .initial: initalLayout() case .releasing(let progress): releasingAnimation(progress) case .loading: startLoading() case .finished: bubbleTimer?.invalidate() } }对应代码见 PullToMakeSoup.swift 第 59-70 行。这段看似简单的分发正是整个状态机的中枢神经。四、initial 初始态把食材摆上桌完成彩排进入 initial 状态后initalLayout()会做两件事布置位置锅、水、食材、锅盖全部归位火焰清空阴影隐藏。水的缩放被压到scaleY 0.00001静待加载态注水。预录制动画胡萝卜、土豆、青豆、锅盖的入场动画全部创建好路径来自项目中的 SVG 文件如 carrot-path-only.svg、potato-path-only.svg经 PocketSVGExtension.swift 转换为 CGPath 后交给 CAKeyframeAnimation 播放。关键技巧在于动画添加后立即设置layer.speed 0并把timeOffset归零让动画处于暂停待播状态——这正是后续实现跟手的基础。五、releasing 下拉态用 timeOffset 实现跟手动画下拉过程中框架会持续回调releasingAnimation(progress)progress 从 0 到 1 反映下拉距离。核心代码如下第 348-370 行放大镜圆环透明度和缩放随 progress 变化位置跟随手指平底锅alpha 渐变timeOffset progress * 1.5 * animationDuration让锅滑入食材错峰入场胡萝卜在 progress 超过 0.5 后入场土豆、右青豆在 0.8 后入场锅盖最晚在 0.9 后才开始盖合progressWithOffset这个辅助函数实现了错峰让食材依次飞入锅中节奏感十足。所有食材动画共用同一段时长只通过timeOffset掐点播放性能开销极小这也是跟手效果顺滑的秘密。六、loading 加载态点火、倒水、冒泡、盖盖松手后进入 loadingstartLoading()把所有食材的timeOffset拨到动画总时长完成全部入场。随后启动四组活动画第 253-328 行注水水面从压扁状态弹开阴影显现模拟汤水倒入锅盖舞蹈锅盖围绕中心点做旋转 上下抖动用CAAnimationGroup无限循环气泡每隔 0.12 秒生成一个白圈气泡从水底上浮并放大模拟沸腾火焰加载 78 帧火焰序列帧Flames0001至Flames0078位于 Resources先快速播放 11 帧点火再切换为 2 秒循环的燃烧至此一锅汤热气腾腾地煮了起来。七、finished 结束态优雅收尾等待复位刷新完成进入 finished 状态时代码只做了一件事bubbleTimer?.invalidate()停止气泡计时器。至于火焰、水面等仍在循环的动画则交给下一次 initial 状态统一复位重来。这种设计非常聪明每个状态只负责自己的增量工作full reset 集中在 initial避免了状态之间互相踩踏。八、状态机设计带来的 3 点启发动画预录制 timeOffset 播放把跟随手势变成按进度播放避免每帧动态计算路径状态驱动而非过程驱动手势只管报进度动画只管按状态表演职责清晰分层解耦PullToRefresh 框架管状态流转SoupAnimator管视觉表现替换动画只需换一个 Animator总结PullToMakeSoup 动画状态机用 4 个状态就把一套复杂的烹饪动画安排得明明白白initial 负责彩排、releasing 负责跟手、loading 负责沸腾、finished 负责收尾。理解这套四态设计你不仅能读懂这个项目更能举一反三为自己的 App 打造出同样流畅、有趣的自定义下拉刷新动画。【免费下载链接】PullToMakeSoupCustom animated pull-to-refresh that can be easily added to UIScrollView项目地址: https://gitcode.com/gh_mirrors/pu/PullToMakeSoup创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 深入 PullToMakeSoup 动画状态机：initial、releasing、loading、finished 四态全解析
深入 PullToMakeSoup 动画状态机initial、releasing、loading、finished 四态全解析【免费下载链接】PullToMakeSoupCustom animated pull-to-refresh that can be easily added to UIScrollView项目地址: https://gitcode.com/gh_mirrors/pu/PullToMakeSoupPullToMakeSoup 动画状态机是理解这款 iOS 开源下拉刷新组件的钥匙。作为一款能为 UIScrollView 轻松添加自定义动画的 Swift 组件PullToMakeSoup 用一锅正在烹煮的浓汤替代了传统转圈菊花把下拉刷新的交互过程演绎得趣味十足。本文将从源码出发拆解它的四个核心状态——initial初始、releasing释放中、loading加载中、finished完成带你看懂这套优雅的动画调度机制如何驱动整个煮汤过程。一、PullToMakeSoup 是什么一颗会煮汤的下拉刷新控件PullToMakeSoup 是 Yalantis 团队基于 PullToRefresh 框架二次开发的动画组件核心代码非常精简——整个动画逻辑都集中在 PullToMakeSoup.swift 这一个文件里而视图的搭建则通过 SoupView.xib 完成。画面上有平底锅、胡萝卜、土豆、青豆、汤水、锅盖、火焰、气泡等十余个元素全部由 xib 中的 UIImageView 承载。接入方式同样简单创建PullToMakeSoup()实例在viewDidAppear中调用tableView.addPullToRefresh(refresher)并传入刷新回调数据加载完成后调用endRefreshing()收尾具体接入示例可参考 ViewController.swift。二、动画状态机四态一览各司其职PullToRefresh 框架为刷新视图定义了统一的动画协议RefreshViewAnimatorPullToMakeSoup 的SoupAnimator实现该协议并把整个生命周期收敛为 4 个状态状态触发时机动画行为initial视图初始化/复位布置食材预录制全部入场动画releasing(progress)手指下拉过程中按进度回放动画实现跟手效果loading松手开始刷新点火、倒水、冒泡、盖盖循环播放finished刷新完成停止气泡计时器等待下一次复位这样的设计让手势与动画完全解耦——手势只负责报告进度动画只负责根据进度表演。三、状态分发入口animate(_:) 如何调度所有状态切换都汇聚在animate(_ state: State)这一个方法里通过 switch 分发到四个处理函数public func animate(_ state: State) { switch state { case .initial: initalLayout() case .releasing(let progress): releasingAnimation(progress) case .loading: startLoading() case .finished: bubbleTimer?.invalidate() } }对应代码见 PullToMakeSoup.swift 第 59-70 行。这段看似简单的分发正是整个状态机的中枢神经。四、initial 初始态把食材摆上桌完成彩排进入 initial 状态后initalLayout()会做两件事布置位置锅、水、食材、锅盖全部归位火焰清空阴影隐藏。水的缩放被压到scaleY 0.00001静待加载态注水。预录制动画胡萝卜、土豆、青豆、锅盖的入场动画全部创建好路径来自项目中的 SVG 文件如 carrot-path-only.svg、potato-path-only.svg经 PocketSVGExtension.swift 转换为 CGPath 后交给 CAKeyframeAnimation 播放。关键技巧在于动画添加后立即设置layer.speed 0并把timeOffset归零让动画处于暂停待播状态——这正是后续实现跟手的基础。五、releasing 下拉态用 timeOffset 实现跟手动画下拉过程中框架会持续回调releasingAnimation(progress)progress 从 0 到 1 反映下拉距离。核心代码如下第 348-370 行放大镜圆环透明度和缩放随 progress 变化位置跟随手指平底锅alpha 渐变timeOffset progress * 1.5 * animationDuration让锅滑入食材错峰入场胡萝卜在 progress 超过 0.5 后入场土豆、右青豆在 0.8 后入场锅盖最晚在 0.9 后才开始盖合progressWithOffset这个辅助函数实现了错峰让食材依次飞入锅中节奏感十足。所有食材动画共用同一段时长只通过timeOffset掐点播放性能开销极小这也是跟手效果顺滑的秘密。六、loading 加载态点火、倒水、冒泡、盖盖松手后进入 loadingstartLoading()把所有食材的timeOffset拨到动画总时长完成全部入场。随后启动四组活动画第 253-328 行注水水面从压扁状态弹开阴影显现模拟汤水倒入锅盖舞蹈锅盖围绕中心点做旋转 上下抖动用CAAnimationGroup无限循环气泡每隔 0.12 秒生成一个白圈气泡从水底上浮并放大模拟沸腾火焰加载 78 帧火焰序列帧Flames0001至Flames0078位于 Resources先快速播放 11 帧点火再切换为 2 秒循环的燃烧至此一锅汤热气腾腾地煮了起来。七、finished 结束态优雅收尾等待复位刷新完成进入 finished 状态时代码只做了一件事bubbleTimer?.invalidate()停止气泡计时器。至于火焰、水面等仍在循环的动画则交给下一次 initial 状态统一复位重来。这种设计非常聪明每个状态只负责自己的增量工作full reset 集中在 initial避免了状态之间互相踩踏。八、状态机设计带来的 3 点启发动画预录制 timeOffset 播放把跟随手势变成按进度播放避免每帧动态计算路径状态驱动而非过程驱动手势只管报进度动画只管按状态表演职责清晰分层解耦PullToRefresh 框架管状态流转SoupAnimator管视觉表现替换动画只需换一个 Animator总结PullToMakeSoup 动画状态机用 4 个状态就把一套复杂的烹饪动画安排得明明白白initial 负责彩排、releasing 负责跟手、loading 负责沸腾、finished 负责收尾。理解这套四态设计你不仅能读懂这个项目更能举一反三为自己的 App 打造出同样流畅、有趣的自定义下拉刷新动画。【免费下载链接】PullToMakeSoupCustom animated pull-to-refresh that can be easily added to UIScrollView项目地址: https://gitcode.com/gh_mirrors/pu/PullToMakeSoup创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考