Introduction to Origami
1.首先建立一個 Origami 專案 牠會產生一個基本頁面
2. 點Window -> Resize to Thirds 讓畫面分開並佔滿整個螢幕
3. Viewer Size 指螢幕的大小還有方向
(1) Type 有很多種手機平板可以選
(2) Orientation 直的衡的
4. Layer Group
(1)Render
(2)Texture Target
(3)Texture Mipmapping
(4)Pixel Width 會連接到 Viewer Size設定好
(5)Pixel High 會連接到 Viewer Size設定好
5. Viewer
(1) Enable
(2) Image 會連接到 Layer Group 設定好
6. 會發現Layer Group 是 方角(Group:可以點擊兩下去編輯內部) 其他兩個是圓角
7. Adding Assets : 點兩下Layer Group 可以到內部編擊
8. 此時看到一個Fill Layer 黑色 也就是螢幕目前的樣子
(1) Enable: 開起此Layer
(2) Coloy : Layer顏色
(3) Opacity: 透明度
9. 新增圖片進去(直接拖拉) 此時會有兩個圓框 一個是圖片預覽(黑色) 另一個是詳細設定(籃色) 上面參數都很好懂
10. 兩個籃色圓框右上角會顯示Layer上下關系 數字越小越下面
11. 參數點兩下可以編輯 長按可以左右拖拉
12. Adding Patches : Command+Return 叫出 Library選單
13. 上欄選擇Origami這個分類 也可以用下方Filter去搜尋
14. 搜尋 Interaction 2 並選擇 產生紅色圓框 Patch
15. 搜尋 Text Layer 並將 Interaction 2 的 Dowm 連接到 Text Layer 的 Text
16. 此時點擊畫面文字(0) 按下會變1 放開會變0 也就是說 Down 會偵測手指按下螢幕的動作
17. 此時換將Interaction 2 的 Down 連接到 Layer 的 Scale
18. 會發現Scale 變 0 也就是沒有畫面 當手指按下去時 Scale 變1 也就顯示了圖片
19. 搜尋 Transition (快速建: T) 並選擇
20. 將 Interaction2的Down 連接到 Transition的Progress ， Transition的Value 連接到 Layer的Scale
21. Start Value=1 還有 End Value=0.37 並測試看看螢幕 發現正常了
22. 可以發現 Transition 是用來改變兩組數值之間的變化的
23. Adding Animation: 搜尋 Pop Animation (快速建: a)並選擇
24. 此時將 Interaction2的Down 連接到 Pop Animation的Number ，Pop Animation的Progress 連接到 Transition的Progress 看看效果 (Boucing , Speed 可以調看看)
25. 以上23 24 步驟 可以用快速建 : 點著Interaction2的Down 並按a 就會自動連接
26. Adding New Sate : 我們要的是點擊一下變大 點擊一下變小 這樣交叉變化 此時要用Swhich (快速建:Shift+S )
27. 也可以像25.那樣 按住Interaction2的Down 並點用快捷建Shift+S 此時可以看看變化
28. Synchronizing Effects: 此時新增一個圖片Layer(範例是按讚) 此時想要縮小時隱藏這個Layer
29. 用Opacity吧 ! 按著Layer3 的 Opacity 並按鍵盤 T 產生 Transition
30.其實這些方框都可以重新命名成好懂得名稱
31.將Start value 改 1 End Value 改0
32. 將Pop animation 的Progress 另外連接到31.的Progress 此時可以看看變化
33. 最後 Wrapping UP !!!
Rooms Part 1: Collapsible Navigation Bar
1.新建專案 之後將Assets 都丟進去Layer Group
2. 調整一下圖片的位置
3. 加入 Scroll Patch
4. 將長圖片的image(黑色) 連接到Scroll的Image 使長圖片可以滑動
5. 將Scroll的Y position 連接到長圖片設定(藍色)的 Y position 並試試看效果
6. 發現拉超過時出現黑色 也就是 Layer 1 的顏色 (看你要啥顏色 都可以調的)
7. 加入 Progress Patch
8. 將Scroll 的 Yposition 連接到 Progress 的 Value
9. Progress 的 Start Value 跟長圖的一開始Y postion一樣(-383)
10. Progress 的 End Value 則是 -383 + 32(狀態欄的高度)
11. 將Bar轉換為Macro (滑鼠按著 並按 G 就會變成Macro了) 變成 Layer Group
12. 按著Layer Group 的 Pixel High 變按 T (Transition)
13. Start Value 128 End Value 128-32
14. 此時將Progress 與 Tansition 的 Progress連接在一起 (Value會等比例調整) 試試看效果
15. 會發現會跟著縮掉 Transition 的 Value其實只要1 or 0 就好 此時增加 Range Pacth
16. 將 Progress 的 Progress 連接到 Range的Value , Range的Clipped Value 連接到 Transtition的Progress 此時看看效果
17.會發現狀態欄被壓縮了 點進去Layer Group 將 Anchor Point 轉 Top Center 再看看效果 ok了
18. 此時加入Bar 三個元素並調整一下位置 試試看會發現 會太上去 我們希望牠滑上去後會消失(Opacity)
19. 跳出Layer Group 將Range的 Clipped Value 連接到LayerGroup 其他位置(會新增一個) 並命名為 Collapse Progress
20. 點進去 Layer Group 會發現出現一個黑色圓框了
21. 將牠連到左右圖片的Opacity吧 可是會發現效果相反了 此時用快捷建(點著Progress 並按r) 就會出現Reverse Progress 試試看效果吧
22. 另外微調一下字體的 Scale (點Scale按t) 並將 Progress 連接到 CollapseProgress就完成囉
Rooms Part 2: Swipe-away Navigation
1. 繼續上一個Part 我們想要點進一篇文章 並Swipe就可以回上一頁
2. 加一個 POST 的 image 並加入 Swipe (Origami的Swipe)
3. 將Swipe的 Position 連到 image 的 X position
4. Swipe 的 Sart position 還有 End position(調到螢幕外面738左右 微調看看) 會對應到image 的 Xposition
5.此時我們想要將之前Part 1做的包在一起(Macro) 按g 產生LayerGroup 並選擇Part 1的東西減下並到 Layer Group貼上，此時畫面變黑色 因為Layer Group沒有接到任何Layer
6. 按著Layer Group的 imgae 並按 l 產生layer 就會出現了(層數要改最下層Layer1)
7. 現在想要Swipe後顯示(Opacity)將Swipe的Progress 連接到 Layer 1 的Opacity 也就是說 Swipe 從 0->1 Opacity 就會顯現 試試看效果
8. 現在想要Swipe後放大效果 但是不能像上面一下直接連Scale 因為從0到1 動畫會太誇張(妳可以試試看)
9. Transition解決吧 點Scale按t 產生 Start 0.97 左右 並將 Progress 連接到 Swipe 的 Progress
10. 現在想要點一下post 就會以Swipe動畫方式顯示post內容 新增 Hit Area Patch
11. 首先調Width and High 跟圖片一樣
12. 點長圖按g讓牠變Layer Group 並將剛剛的Hit Area 剪下貼到Group裡面
13. 此時會發現Hit Area會跟著動了 只要微調一下Y position就可以了
14. 加一個interaction 2 並將 interaction 2 標題 連接到 Hit Area 標提 (表示所有動作接是連接到Hir Area)
15. 此時要把tap這個功能帶到上一個Layer使用 在點 interaction 2 的 tap 按 p
16. 往上一層就會看到Tap了 還要在往上一層 所以點tap 按p
17. 往上一層將Layer Group的Tap 連接到 Swipe的Jump to start
18. 將紅色區塊消除 在Hit Area 的 Setup Mode 關掉
Rooms Part 3: Creating a New Post
1. 連接上個 part
2. 現在要讓+圖片按下去會虛化的按鈕效果
3. 加一個interaction 2 並將牠的port連接到 + 的 Layer port (port是標提列的連接)
4. 點interaction 2 的Down 按a 出現pop animation(跳動動畫)
5. 再點 pop animation的 progress按 t 出現 trasition
6. 將 transition的Value 連接到 + Layer 的 Opacity
7. 此時調一下Tansition的 Start Value = 1 , End Value = 0.8 左右 試試看效果吧
8. 現在讓新的畫面從下面跳上來
9. 拉圖片 按Y position + t 創 trasition 並將Start Value調整到螢幕下面 -1341左右 End Value = 0
10. 點Transition的Progress按a 出現 pop animation
11. 可以預想 需要用State去區別(Switch)
12. 點折pop animation的Number按(Shift+S) 出現Switch
13. 將按鈕的interaction 2 的 up 連接到 Switch 的 Turn On 試試看效果
14. 現在來做將post關起來的動作
15. 跟上一個的 Hit Area 一樣
16. 點new post圖片 並按g 變成Group 並點進去 新增兩個 Hit Area 一個給X 一個給post 並微調位置
17. 注意一下Area比按鈕大一點 這樣使用者不需要很精準的按 就能有遇期反應了
18.兩個Hit Area 都點port 按i 新增interaction 2
19. 此時跟之前一樣要將兩個的up連接到上一層的state 關掉Switch
20. 但這邊說一個新方法: Wireless 也就是不需要拉線 直接Wireless呼叫
21. 點著up按w 會出現 wireless(藍色圓框並有wifi標誌) 也叫up 但是這個名稱會是wireless的辨別名 所以重新命名成CloseButtonUp
22. 另一個一樣做法 並命名為 PostButtonUp
23. 往上一層的 Swtch 點 Turn off 按wireless 或是在任意地方 (Shift+W) 出線Wireless Receiver (紫色圓框並有wifi標誌)
24. 點一下 Wireless Receiver 並按Command+2 會列出所有 Wireless 選Close Button UP 吧 試試看效果
25. 剛剛的post button還沒設定 用上面方法做 發現不能一次連兩條線
26. 這是因為牠不知道是否要同時按(and) 還是各別按(or) 要做 Turn Off
27. 此時新增一個 Logic Patch (Shift + A) 點兩下選擇要哪一種logic 此時選 OR 試試看效果
28. 現在要做Post會出現的效果
29. 先在長圖Group裡面新增image
30. 此時到外層 點Pixel High 按 t 新增 trasition Sart 2100 End 2100+900(新增圖片的高度)
31. 到內層新增的圖片(Layer 3) Yposition調整到上面空出來的位置
32. 將Layer 1 的Anchor Point 設為 Bottom Center
33. 回上一層 現在來做往下動畫 在Pixel high Transition 點Progress 按 a 產生animation
34. 增加一個new post 產生的 State (Shift+s) 產生 Switch 將 On/off連接到 pop animation
35. 到內層改一下Layer順序 讓新的post順序低一些
36. 到外層 複製 PostButtonUp 的 Wireless Reicer並連接到Switch 的 Turn On 試試看效果
37. 但感覺怪怪的 現在想要當畫面掉下來之後再做animation 所以要偵測new post 畫面是否掉下來了
38. 新增 Conditional Patch (按c) 其實就是if判斷
39. 將first Value 連接到 new post 圖片的 Y position ,Condition為lower, Second為 -1340
40. 也就是說 當 new post 的 Yposition < -1340 Result就會變成1
41. 此時當Switch 為 On 時 且 40.符合 才會做動畫 所以就用之前說的Logic Patch (Shift+a) 使用and gate
40. 連接Switch的On/Off 還有 Conditional 的 Result 到AND gate 並將結果連到 pop animation 的 Number
42. 試試看效果吧
43. 會發現Close Button也會出現新post 這邊要改掉
44. 看一下會發現 Switch 永遠都是On 的 沒有Off (被Turn On一次後之後都是On狀態)
45. 此時將Close Button的 interaction 2的up連接到Switch的Off即可解決 試試看吧
46. 會發現當post過一次後 按+ 原本post會瞬間消失 可以從AND gate看出來端倪 我們不想要她這麼快消失
47. 用Delay Patch (按d) 插再AND gate 和 pop animation 之間
48. Value接到兩邊 Duration 預設0.5秒 Style 選 Decresing 也就是當1變0才用Delay 0變1不用 看看效果吧
49. Staggeres Animation 現在想要一點新花樣 當按new post時會先下拉白色畫面 之後再pop out post
50. 點pop animation 按 Command 複製一個 Delay也複製一個
51. 第一個Delay的output Value 連接到新的Delay的Value ,Duration改0.5秒 Style改成Invresing 0變1才做
52. 新的Delay的OutputValue連到新的Pop animation的Number
53. 原本pop animation的progress連到Pixels high的Progress(原本連好了)
54. 新的Pop animation的Progress連接到Layer Group的Expand Progress(遠本連接會消掉)
55. 看看效果吧
56. 會發現有new post時下拉 Bar 會在new post 的某個位置才收合
57. 此時到bar的progress 複製一個 (依照兩種情況而有不同的高度判斷)
58. 複製連接到value的接線到新的Porgress Value
59. 微調新的(new post) Start Value=-833 End Value= -833+32
60. 想一下會知道new post的pop animation 的 progress可以告知new post產生的訊息
61. 新增一個Transition 並將 new post的pop animation 的 progress 連接到 牠的progress
62. 當Transtion 的 Progress=0 表示沒有new post 此時將原本的progress的Progress連接到Transition的Start Value 另一個progress(有new post的高度設定)就連接到End Value
63.最後將Transition的Value 連接到Range的Value吧 此時看看效果
64. +按鈕 太快了 將Speed降低誠5
65. X and Post按鈕的紅色區塊 取消勾選 Setup Mode
66. new post 好像有東西被遮起來 到Layer Group往上調整層數
67. 完成囉~~~
沒有留言:
張貼留言