Communitygithub.com

Ezra-Y/ios-motion-patterns-index

Claude Code 技能 — 可直接執行的 Swift 動畫程式碼範例索引,源自 MotionBook。

ios-motion-patterns-index 是什麼?

這項技能專為 iOS 開發者設計,提供一個結構化的索引,幫助快速找到並運行來自 MotionBook 的 Swift 動畫程式碼範例。它將數百個開源項目分類到 8 個類別(如選單、轉場、表格視圖、指示器等),每個類別都精選 2-3 個經典項目,並提供完整的參考文件。開發者可以直接透過技能定位需求類別,找到對應的 GitHub 專案並 clone 運行,以觀察實際動畫效果,再決定是否整合到自己的 App 中。該技能支援 Claude Code 等 AI 代理工具,能有效降低搜尋與評估動畫實作的時間成本。

相容平台✓Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add Ezra-Y/ios-motion-patterns-index

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

iOS 動畫可跑實例索引

來自 MotionBook 的 Swift 動畫合集索引:按分類指向可直接 clone 運行的開源專案。這是「現成可跑實例目錄」——給現成可跑程式碼的入口,不是動畫寫法教學。寫法教學請見 twostraws SwiftUI 教學、apple-skills:guide-swiftui-animations、swiftui-design-skill。

條目來自開源合集 younatics/MotionBook,按原 8 個分類整理,本索引在其中精選 + 完整條目分檔案存放。專案以可直接 clone 運行的 demo 為主(多為 Swift,部分 Objective-C),條目描述為中文、連結與程式碼為英文原文。

本索引不收錄:SwiftUI 原生 .animation / withAnimation 寫法、Lottie / Rive 動畫檔案、Core Animation 層級教學。需要這些請走 twostraws SwiftUI、apple-skills:core-animation、或對應官方文件。

如何使用本索引

本文件是排程索引層:8 個分類各列 2-3 條最經典可跑專案,並寫清「這是什麼、什麼時候去讀哪個 reference 檔案」。其餘條目在 references/ 下按分類拆成單獨檔案,references 只一層深。

工作流程:

  1. 先按需求定位下面 8 個分類之一(可用下方「按任務找分類」速查),看精選條目是否夠用。
  2. 不夠或想比較更多實作,打開分類對應的 references/<分類>.md,那是該分類完整條目表。
  3. 找到目標專案後 clone 跑起來看真實行為,再決定是否搬進自己程式碼。
  4. Tableview 與 Collectionview 條目較少,合併進同一檔案 references/tableview-collectionview.md,打開後按檔案內「表格 / 集合視圖」兩個小標題分塊閱讀。

這些專案多為 UIKit 時期的成熟開源庫,互動模式與動畫曲線已被大量 App 驗證;SwiftUI 實作可借鑑其時序與曲線參數。

reference 檔案與分類對應:menu.md / animation.md / transition.md / tableview-collectionview.md(表格+集合視圖合併)/ indicator.md / alert.md / ui-controls.md。

按任務找分類

不知道該開哪個 reference 時,先按任務關鍵字對號入座:

  • 側邊 / 底部 / 展開 / 動畫 TabBar 選單 → Menu
  • 通用動畫庫、骨架屏、GIF、文字 / 天氣特效 → Animation
  • 頁面切換、模態、卡片展開轉場、引導頁 → Transition
  • 列表儲存格互動、下拉重新整理、摺紙展開 → Tableview
  • 卡片滑動 / 層疊、視差 Sticky / 拉伸頭、表格佈局 → Collectionview
  • loading、分頁點、導覽列載入、HUD → Indicator
  • 通知橫幅、自訂 Alert、頂部提示、蜂群 / 毛玻璃彈窗 → Alert
  • 分段控制項、滑桿、卡片、夜間模式、搜尋、Markdown → UI

選單 / Menu

下拉、側滑、圓形放射、斷頭台、動畫 TabBar 等選單形態與互動動畫。做導覽列 / 側邊欄 / 展開選單 / 底部 Tab 切換動效時來這裡。

需要下拉選單、滑動選單控制器、動畫 TabBar 等更多實作,見 references/menu.md(共 7 條)。

動畫 / Animation

通用動畫庫、骨架屏、向量 SVG、啟動屏、文字 / GIF / 天氣特效等基礎動畫能力。先看精選,要特定動效(GIF 引擎、閃光文字、天氣疊加)再翻 reference。

  • Spring - 簡化 iOS 動畫的通用庫
  • SkeletonView - 骨架屏載入佔位動畫
  • Macaw - 支援 SVG 的向量圖形動畫庫

Pastel、Stellar、RevealingSplashView、Gecco、GlitchLabel,以及 Highlighter、FLAnimatedImage、Ease 等共 18 條見 references/animation.md。

轉場 / Transition

控制器轉場、模態氣泡、彈性拖拽、滾動轉場、引導頁 等過渡動畫。涉及頁面切換 / 卡片展開 / 轉場合輯時來這。

ElasticTransition、AnimatedTransitionGallery、JTMaterialTransition、Pinterest、Walkthrough 等共 14 條見 references/transition.md。

表格 / Tableview

可展開儲存格、下拉重新整理、滑動操作、摺紙展開、伸縮預覽 等 UITableViewCell 實例。做列表互動 / 重新整理動效時來這。

表格與集合視圖實例合併存放,YNExpandableCell、Pull-to-Refresh、elongation-preview 等 11 條見 references/tableview-collectionview.md。

集合視圖 / Collectionview

卡片滑動 / 層疊、視差 Sticky Header、彈性拉伸頭、電子表格 等 UICollectionView 佈局實例。

集合視圖實例與表格合併:MMCardView、CSStickyHeaderFlowLayout、GSKStretchyHeaderView、SwiftSpreadsheet 等 11 條見 references/tableview-collectionview.md。

指示器 / Indicator

載入動畫、分頁指示、導覽列載入、HUD 彈出 等狀態指示。做 loading / 分頁點 / 進度提示時來這。

TKRubberIndicator、SpringIndicator、BusyNavigationBar 等共 5 條見 references/indicator.md。

彈窗 / Alert

通知橫幅、自訂 Alert、彈窗替換、頂部通知、蜂群 / 毛玻璃彈窗 等提示形態。

CDAlertView、CRToast、TKSwarmAlert、MIBlurPopup、SweetAlert 等共 9 條見 references/alert.md。

介面控制項 / UI

IB 設計動畫、文字變形、分段控制項、卡片、流體滑桿、搜尋、夜間模式 等通用控制項實例。

Segmentio、Cards、StarWars、YNSearch、DKNightVersion、MarkdownView 等 13 條見 references/ui-controls.md。

完整 MotionBook 見 https://github.com/younatics/MotionBook 條目隨上游更新,缺失或連結失效可向 MotionBook 倉庫回報。

相關技能