mcpField
L
liquid-glass-motion

liquid-glass-motion

github.com/yordilorenzo设计与 UI739 次安装11 周前更新
代码仓库

关于 liquid-glass-motion

liquid-glass-motion 是一项配套技能，涵盖 SwiftUI 中 Liquid Glass 的运动、动画和着色器。它为编码 Agent 提供实现约束和主题参考，并附带用于记录和分析 Instruments 跟踪数据的脚本。

主要功能

  1. 01Liquid Glass 动画规则指南
  2. 02运动与转场主题参考
  3. 03滚动驱动运动指南
  4. 04Metal 着色器指南
  5. 05减少动态效果的无障碍规则
  6. 06Instruments 跟踪记录与分析

适用场景

  1. 01实现 Liquid Glass 形变
  2. 02构建滚动驱动的 SwiftUI 动效
  3. 03选择动画和转场方案
  4. 04分析动画卡顿及 SwiftUI 性能

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/yordilorenzo/liquid-glass-skills --skill liquid-glass-motion

安装后在 Claude Code 中输入/liquid-glass-motion确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

ATTRIBUTION.md
references/
animation-fundamentals.md
metal-and-glass.md
morphing.md
performance-and-instrumentation.md
phase-and-keyframe.md
reduce-motion.md
scroll-driven.md
transitions-and-navigation.md
scripts/
analyze_trace.py
LICENSE-AvdLee-SwiftUI-Agent-Skill
record_trace.py
scripts/instruments_parser/
__init__.py
causes.py
correlate.py
events.py
hangs.py
hitches.py
summary.py
swiftui.py
time_profiler.py
xctrace.py
xml_utils.py

详细介绍

Liquid Glass — 动态、动画与着色器

配套 liquid-glass 技能（~/.claude/skills/liquid-glass/）。标签系统相同： [verified] / [apple] / [multi] / [single] / [version-pinned] — 参见该技能的 SKILL.md。编写于 2026-08，并已根据 Apple 文档和 SDK 接口验证。

操作规则

  1. 生成代码前，务必先阅读配套 liquid-glass 技能（与本技能一同安装）中的可用性防护规则： references/availability-and-sdk27.md。动态代码也会触发相同的 SDK-27 变更（禁止使用 .if、@ContentBuilder、重命名）。
  2. 通过路由器按需加载参考资料——一个主题，一个文件。
  3. 动态模型：Liquid Glass 及其动态效果是协同设计的。玻璃不会淡入淡出，而是通过调节透镜效果逐渐显现；玻璃变大时，其材质也会变厚（阴影更深、透镜效果更强）。尺寸变化就是材质变化，因此形变必须使用系统动画，不能手动伪造。
  4. 重述动态效果相关说法前，请先对照 references/ 验证——流传的说明中有不少事实错误；这些文件中记录了更正后的信息。
  5. 性能分析证据胜过推测：优化前先用 xctrace 录制 Instruments 跟踪记录；切勿相信 iOS Simulator 上的 SwiftUI instrument——参见 references/performance-and-instrumentation.md。

硬性规则（简要列表）

  1. 绝不要用 .opacity / 淡入淡出动画来呈现玻璃——应使用 glassEffectTransition（.materialize 是获准使用的类似淡入效果的选项）。[multi]
  2. 形变若要生效，必须同时满足以下四项，否则会静默地无效：使用同一个 GlassEffectContainer；每个元素都在同一个共享的 @Namespace 中具有 glassEffectID；变化是视图的插入/移除（不是值变化）；状态变化位于 withAnimation 内。此外还须满足几何条件：容器内最近边缘的间距不超过 spacing。[multi]
  3. 交互式“挤压”只有一个布尔开关——.interactive()。没有公开的弹簧/阻尼/刚度调节参数；不要承诺可以调节果冻效果。[multi]
  4. 所有玻璃动画都必须受 accessibilityReduceMotion 控制——默认形变是一种动态效果，减少动态效果的用户曾觉得它像闪烁。系统不会替你控制 withAnimation。[multi]
  5. 每个属性只使用一种动画来源——绝不要在同一属性上混用隐式 .animation、withAnimation 和滚动驱动的更新。视图树中靠后的隐式动画会静默覆盖显式动画。[multi]
  6. 动画上下文必须位于条件判断之外——放在 if 内的 .animation() 会随视图一同销毁，移除操作因此不会播放动画。[multi]
  7. 对于滚动动态效果，优先使用渲染器端方案：选用 scrollTransition / visualEffect(in:)，而不是通过可观察的滚动偏移量传递状态。[apple]
  8. 优先为变换添加动画（缩放/偏移/旋转），其次为尺寸框架，最后才处理标识变化。[multi]

主题路由器

主题参考资料
弹簧、曲线、优先级、Transaction、@Animatable、CA 桥接references/animation-fundamentals.md
玻璃形变、glassEffectID、并集、glassEffectTransitionreferences/morphing.md
导航缩放、自定义 Transition、工作表、触控与触控板references/transitions-and-navigation.md
滚动驱动的动态效果、scrollTransition、visualEffect、界面装饰交互references/scroll-driven.md
PhaseAnimator、KeyframeAnimator、符号效果references/phase-and-keyframe.md
减少动态效果控制、替代方案表格references/reduce-motion.md
与玻璃结合、叠加于玻璃之上或替代玻璃的 Metal 着色器references/metal-and-glass.md
性能模型、xctrace 性能分析references/performance-and-instrumentation.md
静态玻璃、可用性、工具栏、平台 API、材质的辅助功能liquid-glass 技能
选择具体的弹簧/阻尼/时长数值apple-motion-feel 技能

脚本

scripts/record_trace.py 和 scripts/analyze_trace.py（以及 instruments_parser/）——引入自 Antoine van der Lee 的 SwiftUI-Agent-Skill（MIT；许可证随附于同目录下的 scripts/LICENSE-AvdLee-SwiftUI-Agent-Skill）。录制并解析 Instruments 跟踪记录（Time Profiler、Hangs、Animation Hitches、SwiftUI lanes），输出为 JSON/Markdown。用法和解读说明见：references/performance-and-instrumentation.md。

评论

支持 Markdown