如何自定义 PullToMakeSoup 动画替换食材图片、修改路径与调色的完整指南【免费下载链接】PullToMakeSoupCustom animated pull-to-refresh that can be easily added to UIScrollView项目地址: https://gitcode.com/gh_mirrors/pu/PullToMakeSoupPullToMakeSoup 动画是一款可以轻松添加到 UIScrollView 的自定义下拉刷新组件由 Yalantis 团队使用 Swift 编写灵感来源于煮汤这一有趣的厨房场景。它把普通的下拉刷新变成了一场精彩表演胡萝卜、土豆、豌豆依次跳进平底锅锅盖微微晃动火焰升腾、气泡翻腾直到一锅好汤煮好。本篇文章将给你一份完整的 PullToMakeSoup 自定义指南手把手教你替换食材图片、修改食材运动路径、调整动画节奏与调色让新手也能做出属于自己的个性化下拉刷新动画。快速上手PullToMakeSoup 下拉刷新组件的接入步骤第一步安装 PullToMakeSoup 组件你可以用 CocoaPods 安装在 Podfile 中加入一行即可pod PullToMakeSoup, ~ 2.0也可以使用 Carthage在 Cartfile 中写入github Yalantis/PullToMakeSoup ~ 2.0如果你是直接从仓库开始体验可以执行git clone https://gitcode.com/gh_mirrors/pu/PullToMakeSoup第二步三行代码把动画挂到列表上在viewDidAppear中调用addPullToRefresh就能完成接入官方 Demo 的写法见 ViewController.swiftimport PullToMakeSoup override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) tableView.addPullToRefresh(PullToMakeSoup(at: .top)) { // 在这里执行数据刷新动作 } }第三步刷新完成后收起动画数据加载完毕调用endRefreshing即可让动画优雅收尾tableView.endRefreshing(at: .top)拆解动画结构先搞懂每个文件的作用想要自定义 PullToMakeSoup 动画首先要理解它的零件是怎么分工的文件/目录作用PullToMakeSoup.swift核心类负责加载视图、驱动动画状态机SoupView.xib界面布局摆放锅、食材、火焰等所有元素CookingRefresher.xcassets图片资源carrot、potato、pan、flames 帧动画等5 个*-path-only.svg文件运动路径定义食材飞入锅中的轨迹动画逻辑集中在SoupAnimator中它根据刷新状态执行四类动作初始布局initial、下拉释放中releasing、加载中loading、完成finished详见 PullToMakeSoup.swift。替换食材图片把胡萝卜换成你喜欢的任何食材步骤一定位图片资源目录所有食材图片都存放在 CookingRefresher.xcassets 中包括carrot.imageset— 胡萝卜potato.imageset— 土豆pea.imageset— 豌豆pan.imageset— 平底锅water.imageset— 汤水flames/— 78 帧火焰动画序列步骤二用同名图片覆盖替换最简单的替换方式准备一张新食材图命名保持与原来一致例如carrot2x.png直接覆盖原文件即可。因为代码通过UIImage(named:)加载图片只要名字不变替换后无需改一行代码。步骤三保持尺寸比例替换时建议保持与原始图片接近的宽高比避免食材变形。参考 SoupView.xib 中的 frame 尺寸胡萝卜约 35×13、土豆约 16×11、豌豆仅 6×6。尺寸差异过大时可以在 xib 中微调对应 UIImageView 的 frame。修改食材运动路径让食材沿你画的轨迹飞入锅中食材的飞行轨迹由 SVG 路径文件控制解析逻辑封装在 PocketSVGExtension.swift 的pathFromSVGFileNamed中路径文件控制的食材carrot-path-only.svg胡萝卜potato-path-only.svg土豆pea-from-left-path-only.svg左侧豌豆pea-from-right-path-only.svg右侧豌豆cover-path-only.svg锅盖每个文件里只有一条path例如胡萝卜的路径定义在 carrot-path-only.svgpath dM21.605,171.049c-2.474-86.141,29.898-154.93,78-144 .../想要自定义轨迹有两种方式直接编辑 SVG 文件用 Illustrator 或任意矢量工具重画路径然后覆盖同名文件代码自动读取新路径。调整代码参数在initalLayout中调用pathFromSVGFileNamed时可以传入不同的origin起点坐标、scale缩放和mirrorX/mirrorY镜像翻转无需动 SVG 文件即可改变轨迹的起点与方向。例如胡萝卜的调用见 PullToMakeSoup.swift。 小技巧镜像参数很有用。比如豌豆从左右两侧飞入本质是同一条路径配合mirrorX: true/false实现的参见 PullToMakeSoup.swift。调整动画节奏控制速度、时间与缓动效果动画的快慢与节奏由 CAKeyframeAnimationExtensions.swift 提供的基础能力决定动画属性Rotation旋转、Opacity透明度、TranslationX/Y平移可通过animationWith统一创建。缓动函数支持linear、easeIn、easeOut、easeInEaseOut四种控制食材起跳—落地的加速减速感。关键帧values与keyTimes配合决定动画在哪个时间点运动到哪个位置。比如锅盖在煮汤阶段的抖动就是通过多个关键帧实现的见 PullToMakeSoup.swift。想让它抖得更快把duration: 0.5改小即可想让节奏更舒缓改大即可。动画调色技巧让整锅汤融入你的 App 风格技巧一给食材图片重新调色食材图片本身是 PNG 位图最直接的方式是用设计工具调整色相后重新导出覆盖。如果只想在代码层面处理也可以给对应的 UIImageView 套一层tintColor或叠加滤镜层。技巧二修改气泡颜色煮汤时不断上浮的气泡颜色定义在addBubble()中默认是白色描边圆环见 PullToMakeSoup.swiftcircle.layer.borderColor UIColor.white.cgColor把UIColor.white换成你的主题色如UIColor.orange气泡就会立刻变身。技巧三调整火焰色调火焰是 78 帧序列帧动画Flames0001~Flames0078存储在flames/目录。火焰加载逻辑见 PullToMakeSoup.swift。想调色可以在 Photoshop 中对整套火焰帧做色相偏移后批量覆盖。技巧四修改整体背景视图背景色定义在 SoupView.xib默认是纯白。在下拉区域要露出背景时把这里改成与 App 一致的浅色画面会和谐很多。常见问题排查清单问题原因与解决办法替换图片后没生效检查文件名和2x后缀是否与原图完全一致并清空编译缓存重新构建食材飞行方向不对检查mirrorX/mirrorY参数或反转 SVG 路径的走向动画太快/太慢修改animationDuration和各动画的duration值PullToMakeSoup.swift 有全局常量可调下拉到一半动画卡住这是releasingAnimation按进度播放关键帧的正常表现可参考 PullToMakeSoup.swift 调整进度系数结语PullToMakeSoup 动画的精髓在于代码 资源完全分离的设计SVG 管轨迹、xcassets 管画面、CAKeyframeAnimation 管节奏。只要掌握替换食材图片、修改 SVG 运动路径、调整关键帧参数和调色这四板斧你就能把默认的煮汤动画改造成任何符合产品气质的定制下拉刷新效果。动手试试吧从替换第一张胡萝卜图片开始 【免费下载链接】PullToMakeSoupCustom animated pull-to-refresh that can be easily added to UIScrollView项目地址: https://gitcode.com/gh_mirrors/pu/PullToMakeSoup创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考