Communitygithub.com

doppe7gangar/motion-for-apple-platforms

如何让界面动得像 Apple 的原生体验 —— 使用 SwiftUI 的弹簧词汇(.smooth、.snappy、.bouncy)和可中断、手势驱动的转场,以及减少动效的处理。

motion-for-apple-platforms 是什么?

这是一个为任何平台(SwiftUI、CSS、Framer Motion 等)构建 Apple 风格动效的指南。它超越了 HIG 的 *是否* 动效的原则,聚焦于 *如何* 构建动效:解释 SwiftUI 的弹簧命名法(.smooth、.snappy、.bouncy)的适用场景,强调可中断性(手势可以反向或重定向正在进行的动画)、手指跟踪(拖拽时 1:1 跟随,松手后才由弹簧接管)以及将时长作为物理结果而非固定输入。该技能来自作者对 Apple 设计系统的观察和逆向工程(MIT 许可证),并引用了 SwiftUI 的真实 API。它支持所有需要 Apple 风格动效的场合:SwiftUI 转场、Web 的 CSS 或 Framer Motion 动画、表单/模态弹窗、按钮按下、加载/成功状态等。它还专门处理减少动效(prefers-reduced-motion)的规则:用交叉淡入替代滑动,用剪切替代动画,而不仅仅是缩短动画。与 HIG(规则集)和 ui-kit-for-apple-platforms(颜色、排版、控制几何)互补。源代码仓库包含三份参考文档:运动与动画、微交互与反馈、手势与交互。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/doppe7gangar/hig/tree/main/.claude/skills/motion-for-apple-platforms

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Apple 动效

HIG 将动效作为原则来阐述,但仅此而已。其“动效”页面有 92 行关于 是否 要动画化 —— 有目的地、可选地、跟随手势 —— 却没有一个弹簧参数。关于动效实际如何构建的一切都存在于 HIG 之外,因此有了这份指南。

文件内容
references/motion-animation.md弹簧词汇表、时长、转场类型、可中断性。
references/microinteractions-feedback.md按下状态、加载、成功与错误反馈、触觉配对。
references/gestures-interaction.md滑动、拖拽、捏合、边缘手势以及动效应如何跟踪它们。

每个来源

值得坦诚地指出,因为这三个来源的权威性截然不同,将它们混淆正是动效建议变成传说的原因:

  • 原则 → hig-guide。“有目的地添加动效。” “让动效可选。” “力求真实的反馈动效,跟随人们的动作和期望。” 这些是 Apple 自己的话,来自 Motion。引用这些原文,而不是这里的转述。
  • 弹簧名称及其行为 → SwiftUI 的 API。.smooth、.snappy、.bouncy 是真实的 API,具有真实的默认值。motion-animation.md 中的弹跳百分比是对它们的特性描述,而非发布的常量 —— 将其视为一个你调整的起点,不要将其引用为 Apple 的规范。
  • 其他所有内容 → 观察。这些参考文献改编自 MIT 许可的 apple-design-skills 集合(见 LICENSE.txt 中的通知),并在作者推断出已发布 App 的行为之处标记为 [observed]。有用,但不具权威性。

这里的任何内容都不像 ui-kit-for-apple-platforms 的值那样经过测量。这种区别正是关键所在:动效是本仓库中背后事实依据最少的部分。

选择弹簧

体现整体感觉的一个关键决定:

弹簧弹跳用途
.smooth无表单、模态弹窗、后台转场 —— 任何应该安静地停止而不引人注目的元素
.snappy轻微按钮按下、开关、选择 —— 直接操作的默认选项
.bouncy明显图标按下、到达的通知、意在给人以奖励感的时刻

弹跳就是全部信号。一个弹跳的表单读起来像玩具;一个不弹跳的按钮按下读起来像死板。正确选择这一步比调整时长作用更大。

Apple 动效与普通动效的区别

  • 可中断的。手势必须能够反向或重定向正在进行的动画,而不是排在后面等待。任何需要先完成再响应的动画,无论多快都会让人感觉卡顿。
  • 跟随手指,然后接管。在拖拽过程中,表面 1:1 跟随手势;弹簧仅在松手时接管,并继承手势的初速度。这就是 HIG 所说的 “真实的反馈动效,跟随人们的动作和期望” 的具体体现。
  • 时长是结果,而非输入。弹簧由物理特性定义,在它该停止时停止。一味追求固定的 300 毫秒时长通常意味着用错了工具。
  • 位置和不透明度,而非大小和颜色。移动和淡入淡出读起来像物理世界;缩放和变色则读作效果。

减少动效并非可选

hig-guide 明确指出了这一点 —— “让动效可选。” 在 Web 上,这是 prefers-reduced-motion,它意味着用其他方式替换点击效果,而不仅仅是缩短动画:用交叉淡入代替滑动,用剪切代替动画。ui-kit-for-apple-platforms 的 ios-components.css 已经这样保护了它自己的转场;请保持一致。

边界

  • 值 —— 颜色、排版、控制几何、材质 —— 属于 ui-kit-for-apple-platforms,从 Apple 的 UI 工具包中测量得到。不要在这里重复它们;动效文件中的十六进制颜色代码是一个某处无人查看的陈旧代码。
  • 关于 是否 应该动画化、使用哪种呈现方式、布局如何适应的规则 —— hig-guide,包含实际的引用。
  • 本技能覆盖的是动效本身如何构建。

相关技能