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 只一層深。
工作流程:
- 先按需求定位下面 8 個分類之一(可用下方「按任務找分類」速查),看精選條目是否夠用。
- 不夠或想比較更多實作,打開分類對應的
references/<分類>.md,那是該分類完整條目表。 - 找到目標專案後 clone 跑起來看真實行為,再決定是否搬進自己程式碼。
- 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 切換動效時來這裡。
- SideMenu - Facebook 風格左右側滑選單
- GuillotineMenu - 斷頭台式選單轉場動畫
- circle-menu - 圓形按鈕展開成放射狀選單
需要下拉選單、滑動選單控制器、動畫 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
控制器轉場、模態氣泡、彈性拖拽、滾動轉場、引導頁 等過渡動畫。涉及頁面切換 / 卡片展開 / 轉場合輯時來這。
- Hero - 視圖控制器轉場框架
- BubbleTransition - 氣泡展開式模態轉場
- Gemini - 基於滾動的豐富轉場框架
ElasticTransition、AnimatedTransitionGallery、JTMaterialTransition、Pinterest、Walkthrough 等共 14 條見 references/transition.md。
表格 / Tableview
可展開儲存格、下拉重新整理、滑動操作、摺紙展開、伸縮預覽 等 UITableViewCell 實例。做列表互動 / 重新整理動效時來這。
- SwipeCellKit - Mail.app 風格滑動操作儲存格
- folding-cell - 摺紙展開式儲存格
表格與集合視圖實例合併存放,YNExpandableCell、Pull-to-Refresh、elongation-preview 等 11 條見 references/tableview-collectionview.md。
集合視圖 / Collectionview
卡片滑動 / 層疊、視差 Sticky Header、彈性拉伸頭、電子表格 等 UICollectionView 佈局實例。
- Koloda - Tinder 風格卡片滑動
- expanding-collection - 卡片展開成詳情的集合視圖
集合視圖實例與表格合併:MMCardView、CSStickyHeaderFlowLayout、GSKStretchyHeaderView、SwiftSpreadsheet 等 11 條見 references/tableview-collectionview.md。
指示器 / Indicator
載入動畫、分頁指示、導覽列載入、HUD 彈出 等狀態指示。做 loading / 分頁點 / 進度提示時來這。
- NVActivityIndicatorView - 海量載入動畫合集
- PKHUD - Apple HUD 風格彈出指示
TKRubberIndicator、SpringIndicator、BusyNavigationBar 等共 5 條見 references/indicator.md。
彈窗 / Alert
通知橫幅、自訂 Alert、彈窗替換、頂部通知、蜂群 / 毛玻璃彈窗 等提示形態。
- NotificationBanner - 可自訂的應用內通知橫幅
- PopupDialog - 替代 UIAlertController 的彈窗
- SDCAlertView - 支援自訂內容的 Alert
CDAlertView、CRToast、TKSwarmAlert、MIBlurPopup、SweetAlert 等共 9 條見 references/alert.md。
介面控制項 / UI
IB 設計動畫、文字變形、分段控制項、卡片、流體滑桿、搜尋、夜間模式 等通用控制項實例。
- IBAnimatable - Interface Builder 內設計動畫與轉場
- LTMorphingLabel - 文字變形演化 UILabel
- fluid-slider - 帶氣泡數值的流體滑桿
Segmentio、Cards、StarWars、YNSearch、DKNightVersion、MarkdownView 等 13 條見 references/ui-controls.md。
完整 MotionBook 見 https://github.com/younatics/MotionBook 條目隨上游更新,缺失或連結失效可向 MotionBook 倉庫回報。