Back to Details

swiftui-animation-match

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SwiftUI Animation Match

SwiftUI 动画匹配工具

Use this skill to turn a vaguely felt interaction wish ("saving should feel more satisfying", "this list is boring while it loads") into a concrete, proven SwiftUI animation pattern — or into the deliberate decision to use what the system already provides.
The skill is a matcher, not a snippet dump. Its value is the judgment step: name the interaction moment first, check what the OS gives you for free, and only then reach into the cataloged sources for custom motion that earns its place. Animations add juice that makes a product feel human; forcing one where the platform already shines makes it feel worse.
使用该工具可将模糊的交互需求（比如“保存操作应该更有满足感”、“列表加载时太单调”）转化为具体且经过验证的SwiftUI动画模式，或是直接选择使用系统原生提供的动画效果。
本工具是一个匹配器，而非代码片段库。其核心价值在于判断环节：首先明确交互场景，查看系统是否已提供现成的解决方案，之后再从目录中选取真正需要的自定义动效。动画能让产品更具人情味，但在平台已有出色原生动画的场景下强行使用自定义动效，反而会降低体验。

First move

第一步操作

  1. Name the moment. Translate the request into: what is the user doing, what should they feel, and how often does this happen? Read references/matching-playbook.md — it has the moment taxonomy and the system-first checklist.
  2. Decide system vs custom. If a system affordance covers the moment (Liquid Glass chrome, 
    .symbolEffect
    , springs, 
    .contentTransition
    , zoom navigation transitions, 
    .sensoryFeedback
    ), prefer it and stop.
  3. If custom motion earns its place, search the catalogs (below) by interaction pattern and keywords, not by animation name.
  4. Adapt, never paste. Every catalog entry has lift notes and each catalog ends with a lift checklist (dependencies to replace, old patterns to modernize, Reduce Motion).
  5. Verify in motion. Build and watch it in Previews or Simulator; motion cannot be judged from code. If the app repo has build/test skills (for example 
    bootstrap-ios
    ), use them.
  1. 明确场景：将需求转化为具体问题——用户正在执行什么操作？他们应该获得怎样的感受？该场景出现的频率如何？请阅读references/matching-playbook.md，其中包含场景分类体系和系统优先检查清单。
  2. 选择系统原生或自定义：如果系统提供的功能（如Liquid Glass界面、
    .symbolEffect
    、弹簧动画、
    .contentTransition
    、缩放导航过渡、
    .sensoryFeedback
    ）能满足场景需求，优先使用并停止后续操作。
  3. 若确实需要自定义动效，按交互模式和关键词搜索下方目录，而非按动画名称搜索。
  4. 适配而非直接粘贴：每个目录条目都包含适配说明，且每个目录末尾都有适配检查清单（需替换的依赖、需现代化的旧模式、Reduce Motion适配）。
  5. 动效验证：在Previews或Simulator中构建并查看效果；动效无法仅通过代码判断。如果应用仓库有构建/测试工具（例如
    bootstrap-ios
    ），请使用它们。

Catalogs

目录列表

Load only the catalog you need; entries are grouped by interaction moment and carry keywords, exact source paths, technique summaries, and lift notes.
CatalogContents
catalog-shubham0812-swiftui-animations.md30 SwiftUI animations + 7 Metal shaders: loaders, progress, action feedback, toggles, card decks, text heroes, input chrome, reveals, shader effects
The source index with pinned commits and licenses is in references/sources.md.
仅加载所需的目录；条目按交互场景分组，包含关键词、精确源路径、技术概述和适配说明。
目录内容
catalog-shubham0812-swiftui-animations.md30种SwiftUI动画 + 7种Metal着色器：加载动画、进度指示、操作反馈、切换控件、卡片组、文本焦点效果、输入界面、内容展示、着色器效果
包含固定提交记录和许可证的源索引位于references/sources.md。

Mode picker

场景选择器

The product needs...Look at
An indeterminate wait that feels craftedCatalog: Wait states
Progress with a real percentageCatalog: Progress with a real percentage
A tap that confirms, celebrates, or completes async workCatalog: Action feedback and confirmation
A switch or mode change with personalityCatalog: Toggles and switches with identity
Browsing cards, decks, or carousels by gestureCatalog: Cards and gesture-driven browsing
A hero headline or onboarding momentCatalog: Text and hero moments
Composer / input chrome with delightCatalog: Input chrome
An unlock, reveal, or brand easter eggCatalog: Reveals and brand delight
Destroy, error, or premium image treatmentCatalog: Metal shader effects
"Which animation fits X?" during planningmatching-playbook.md first, then the catalog
Add a new animation repo to this skilladding-a-source.md
产品需求...查看内容
精心设计的不确定等待状态目录：等待状态
带真实百分比的进度指示目录：带真实百分比的进度指示
用于确认、庆祝或标记异步任务完成的点击反馈目录：操作反馈与确认
具有个性的开关或模式切换效果目录：带标识的切换控件
通过手势浏览卡片、卡组或轮播组件目录：卡片与手势驱动浏览
焦点标题或引导页场景目录：文本与焦点场景
带趣味效果的编辑器/输入界面目录：输入界面
解锁、内容展示或品牌彩蛋效果目录：内容展示与品牌趣味
删除、错误或高级图片处理效果目录：Metal着色器效果
规划阶段的“哪种动画适合X场景？”问题先查看matching-playbook.md，再查看目录
向本工具添加新的动画仓库adding-a-source.md

Restraint rules

克制原则

  • One signature motion moment per screen. Everything else stays quiet.
  • Frequency caps intensity: high-frequency interactions get subtle, short motion (or system defaults); rare moments may be theatrical.
  • Do not re-skin system chrome that already animates well (tab bars, toolbars, sheets, Liquid Glass surfaces). Custom motion belongs in content, not in the platform's chrome.
  • Honor Reduce Motion with a crossfade or reduced variant.
  • Keep one motion vocabulary per app: consistent spring feel, consistent duration scale. A catalog entry adopted verbatim into a calm app will feel foreign until its curves are tuned to match.
  • 每个界面仅保留一个标志性动效，其余元素保持简洁。
  • 动效强度与频率成反比：高频交互使用细微、简短的动效（或系统默认）；罕见场景可使用更具戏剧性的动效。
  • 不要重新设计系统已提供出色动画的界面元素（如标签栏、工具栏、弹窗、Liquid Glass界面）。自定义动效应用于内容，而非平台原生界面组件。
  • 支持Reduce Motion模式，提供淡入淡出或简化版本。
  • 保持应用内动效风格一致：弹簧效果、时长比例统一。直接照搬目录条目到风格沉稳的应用中会显得突兀，需调整曲线以匹配应用风格。

Adaptation posture

适配准则

The catalogs describe working code from real repos, including its age. Keep the load-bearing geometry (shapes, trim windows, offset math, shader kernels) and modernize the plumbing:
  • Timer state machines -> 
    .phaseAnimator
    , 
    .keyframeAnimator
    , 
    withAnimation
    completion handlers, or 
    Task.sleep
    .
  • UIKit haptic wrappers -> 
    .sensoryFeedback
    .
  • Hardcoded screen bounds -> 
    GeometryReader
    / container sizing.
  • Demo colors, fonts, and assets -> the app's design tokens.
  • Fake timer-driven progress -> real async work.
目录中的内容来自真实仓库的可运行代码，包含不同年代的实现。保留核心几何逻辑（形状、裁剪区域、偏移计算、着色器内核），并更新底层实现：
  • 计时器状态机 → 
    .phaseAnimator
    、
    .keyframeAnimator
    、
    withAnimation
    完成回调，或
    Task.sleep
    。
  • UIKit触觉包装器 → 
    .sensoryFeedback
    。
  • 硬编码屏幕边界 → 
    GeometryReader
    / 容器尺寸适配。
  • 演示用颜色、字体和资源 → 应用的设计令牌。
  • 计时器驱动的模拟进度 → 真实异步任务。

Extending the skill

工具扩展

This skill is built to grow: each new animation repo becomes one catalog reference file following the same entry format, registered in 
sources.md
and the catalog table above. The repeatable recipe — including how to fan out parallel readers over a big repo and the exact entry template — is in references/adding-a-source.md.
本工具支持扩展：每个新的动画仓库都可按照统一条目格式转化为一个目录参考文件，在
sources.md
和上方目录表中注册。具体的可复用流程——包括如何并行处理大型仓库、精确的条目模板——详见references/adding-a-source.md。