Facebook推出的Origami插件配合Sketch，能極便捷產出精細動畫Demo。國內教程極缺，騰訊同學整理入門文檔，零基礎可速成，強烈推薦。

早年Quartz Composer (QC) 隨Facebook Home登場，無代碼輸出豐富動畫極具誘惑力，但門檻高、教程難懂，學習擱淺。Origami插件降低門檻，配合Sketch聯動，終於入門！按理解整理入門檔，助零基礎同學上手，歡迎探討指正。

核心概念

模塊——最基本元素

不同模塊實現不同功能，搭建原型＝按邏輯拼裝模塊（如積木）。兩類：

• 圓角模塊：普通功能模塊
• 方角模塊（Macro/巨集）：可雙擊進入內部編輯（理解為資料夾）

模塊顏色含義

• 藍色：輸出模塊，畫布可見
• 黑色：常規狀態
• 紫色：內部含子模塊

連線邏輯

模塊左側輸入口、右側輸出口。A右輸出連接B左輸入＝A結果輸入B。

基本執行邏輯

每個動畫：交互觸發→開關控制兩態→兩態對應兩數值→層上表現→數值變化前加彈性動畫控制動效。

最簡範例：點擊圖片放大縮小

數值變化處給圖片大小初始/結束值，即實現點擊放大縮小。

上手實戰：三步走Demo

Step 1：新建Origami文件

左右雙窗：左Patch編輯區，右Viewer預覽（預設手機框，體現移動優先）。第一Patch控制手機樣式/橫豎屏；第二Patch為Macro（雙擊進入編輯）；第三Patch藍色顯示層。

Viewer實用快捷鍵

• H：隱藏手持手
• =/-：切換背景樣式
• F：全屏展示（去手機框）

Demo 1：Hello Origami

1. 雙擊Layer Group進入編輯
2. 鍵盤`T`創建Text Layer
3. `Command+1`喚出屬性，Text欄輸入「Hello Origami」
4. 完成！

Demo 2：可交互Origami（點擊互換文字/背景色）

1. 編輯區輸入`I`→Interaction 2（紫色，交互指令，輸出down/up/tap/drag）
2. `Command+Enter`喚出Patch Library，搜`Color Transition`（顏色切換）
3. `Shift+S`獲取`Switch`（開關）
4. 連線：Interaction→Switch→Color Transition→Text Layer/背景Fill Layer

進階：加入動畫過渡

• Layer中`scale`控制大小（百分比，1=100%）
• 編輯區輸入`A`→`Pop Animation`（動畫過渡），置於顏色變化前
• 效果：柔和過渡替代生硬切換

關鍵概念補充

座標系統

Anchor point預設畫布中心(0,0)。可自定義：如左上角設top left，位置(100,-100)即距頂/左各100px。

單位制

• width/height/position：pixels
• opacity/scale：百分制(0-1對應0-100%)

常用Patch分類速查

顯示類

交互觸發類

交互響應類

(原文圖片截斷，常用含：Switch、Transition、Animation、Spring等)

避坑指南：命名規範化（內容多時極重要）、善用`Command+Enter`調用庫、Viewer快捷鍵提效、從簡單邏輯起步疊加複雜度。Origami+Sketch工作流，讓動效設計從「聽起來很美」變成「手到擒來」。