motion-reference

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Motion reference

动效参考

The
60fps
MCP server holds 2,000+ clips of real iOS interactions. Each one has a written motion breakdown, and many have a compile-checked SwiftUI recreation. Use it instead of inventing timings. The numbers in this library came off apps that shipped.
60fps
MCP server 收录了 2,000+ 段真实的 iOS 交互片段。每一段都配有文字版动效拆解,许多还提供经过编译检查的 SwiftUI 复刻实现。使用该资源库,而不是凭空设计动效时序。 该资源库中的数据均来自实际上线的应用。

Use the tools in this order

按顺序使用这些工具

  1. 60fps_search_shots
    . Write natural language, not keywords. "Springy bottom sheet for checkout" works. "Sheet" does not. Only set
    app
    or
    filters
    if the user named one.
  2. 60fps_get_motion_breakdown
    . This gives you the start state, the transition, the end state, and the timing and easing. Design from this.
  3. 60fps_get_motion_code
    . This returns a self-contained SwiftUI file. Show it to the user in full, in a swift code block. It is the deliverable, not a citation.
  4. 60fps_get_related_shots
    if the first pick is close but not right.
  1. 60fps_search_shots
    。使用自然语言描述,而不是关键词。例如,“用于结账的弹性底部抽屉”可行,但“Sheet”不可行。只有当用户明确提到某个应用或筛选条件时,才设置
    app
    或
    filters
    。
  2. 60fps_get_motion_breakdown
    。它会提供初始状态、转场过程、结束状态,以及时序和缓动方式。请据此进行设计。
  3. 60fps_get_motion_code
    。它会返回一个独立的 SwiftUI 文件。**请使用 swift 代码块将其完整展示给用户。**代码才是交付物,而不是引用来源。
  4. 如果第一个选择接近但不理想,则使用
    60fps_get_related_shots
    。

Read the results honestly

如实解读结果

Search ranks the whole library by closeness, so it always returns something, however far off the question was. A high
total
is how many shots were searched, not how many matched. Judge each result on its own merits, and say so when nothing fits.
搜索会按照相似度对整个资源库进行排序,因此无论问题与素材相差多远,它始终会返回结果。高
total
表示搜索了多少片段,而不是匹配了多少片段。请根据每个结果自身的实际情况进行判断;如果没有合适的结果,应如实说明。

When not to use it

不适用场景

The library is iOS only, and it is about motion.
Do not use it for Android, Material, Flutter, React Native or web. Do not use it for icon design, colour palettes, logos or brand work. Do not use it for performance or frame-rate profiling, which shares the name and nothing else. On any of those it will still return iOS clips, and they will be wrong. Answer directly instead.
该资源库仅支持 iOS,并且专门用于动效。
不要将其用于 Android、Material、Flutter、React Native 或 Web。不要将其用于图标设计、配色方案、Logo 或品牌设计。也不要将其用于性能分析或帧率分析;这些场景仅与它名称相近,实际用途完全不同。在这些场景中,它仍会返回 iOS 片段,但结果并不适用。请改为直接回答问题。

Using the code

使用代码

Each file is standalone. Paste it into Xcode and run it.
It carries none of the original app's words, colours, branding or assets, by design. Restyle it to the user's design system. The motion is the part worth keeping.
每个文件都是独立完整的。将其粘贴到 Xcode 中即可运行。
按照设计,它不会包含原应用中的任何文案、颜色、品牌元素或素材。请根据用户的设计系统进行重新调整样式,真正值得保留的是其中的动效。