下載教程文件** ·····密碼: ahgt**

選擇對應名稱的文件夾下載，內包含一個（開始）和一個（已完成）文件；（開始）文件用來和教程同步操作，（已完成）是最終結果。

An introduction to using Origami Studio. 介紹Origami Studio的使用方法。

Welcome to Origami. We'll be building a simple prototype, and by doing so learn the fundamentals of using Origami as well as importing from design tools such as Sketch. Follow along by downloading the files that accompany this tutorial.

歡迎使用折紙。我們將通過建立一個簡單的原型，了解 Origami Studio 的基礎知識以及從Sketch等設計工具導入文件。下載好教程文件，按照教程步驟操作。

Copying from Sketch 從Sketch導入

Importing from design tools like Sketch is as simple as copying and pasting. First off, make sure you have the Sketch file from our lessons file open. Next, select the Photo layer (a landscape image of the Golden Gate Bridge), go to Edit > Copy Cmd C. In a new Origami prototype, navigate to Edit > Paste Cmd V.

從Sketch等設計工具導入跟復制粘貼一樣簡單。首先打開教程文件夾中的 Sketch 文件，選擇 Photo 圖層，按 Cmd C 復制；打開教程文件夾中的 Origami 文件，按 Cmd V 粘貼。

We can then go back to Sketch and do the same thing with our Info Group, which contains a few text layers, an image, and a gradient. Navigate to to Edit > Copy ?C, head back to Origami and navigate to Edit > Paste ?V.

回到 Sketch 復制 Info 圖層組，里面包含了文本、圖標、漸變圖層。到 Origami 粘貼。
板栗：粘貼時會彈出一個窗口，選擇 OK 任然保留圖層和可編輯屬性，選擇 Paste as Image Instead 則將圖層組合并為一張圖，不可再編輯。

With our Sketch layers already on the macOS Clipboard. Sketch 的圖層已經在 Mac 的剪切板上了。

Origami Studio interface 界面

On the left of the screen is the Viewer; where we see and interact with our prototype. On the right we have our Layers, and our Layer Inspector which lists the properties of the currently-selected layer. The middle area is known as the Patch Editor.

左邊的是 查看器 ，是查看原型、和原型交互的通道。右側有 圖層窗口 和圖層的 屬性窗口，屬性窗口列出了當前選中的圖層的屬性。

Organizing our layers 圖層定位

Start by selecting the Photo layer. We'd like this to be centered, so move the Anchor the center. Do the same with our Info Group; change the Anchor so that it sits at the bottom of the screen.

首先選擇 Photo 圖層。現在看到的圖片位置和在 Sketch 中不一樣是居左顯示的，我們希望居中顯示，所以我們將錨點-Anchor 選擇為中間的那個。Info 圖層組也一樣需要調整錨點，將它對齊屏幕的底部。

Change the Anchor by clicking on the desired point, or by clicking and dragging to the desired point. 單擊或拖拽更改錨點

Adding interaction 添加交互

The first thing we want to do is add interaction to the Photo layer. To add interaction to a layer, hover over the layer in the Layers panel, click the Touch menu, and then click Tap.

我們要做的第一件事是添加交互到 Photo 圖層。將鼠標懸停在 Photo 圖層上，點擊 Touch 菜單，再點擊 Tap。

This is our first patch; an Interaction patch. We'll cover patches in detail a little bit later on, but for now, keep an eye on the Down and Tap outputs whilst tapping on Photo in the Viewer. Both of these outputs flash corresponding to when Photo is pressed Down, and when released, which equals a Tap.

現在有了第一個模塊 - Interaction 交互（稍后會詳細介紹該模塊）。現在在查看器中點擊照片，請注意看點擊模時 Interaction 模塊上的 Down 和 Tap 輸出口；從兩個輸出口的閃爍可以觀察到，當照片被按下時 Down 閃爍 ，釋放時 Tap 閃爍。

The first two outputs, Down and Tap, should flash when Photo is tapped. 點擊照片時，**Down** 和 **Tap** 閃爍。

Transitioning values 過渡值

We want this to transition between two values of Scale. A Scale of 1 and a Scale of whatever fits in screen, which is about 0.38. The next patch we want to add is a Transition patch, since we are transitioning between two values. Add this patch by double-clicking on the Patch Editor Cmd Enter , beginning to type 'transition', followed by Return Enter.

如何實現在兩個值之間放大和縮小呢？假設兩個 Scale 值一個為原始值 1 ，一個為適應屏幕大小的值 0.38。所以下一個要添加的模塊是 Transition 模塊，因為我們要在兩個值之間切換。雙擊編輯窗口或按 Cmd Enter 打開模塊庫 → 輸入名稱 Transition → 按 Enter 添加，或按 T 添加。

Make the Start input on the Transition patch equal 0.38 by typing 0.38 into the Start input field. Change the End input value to 1, since we know that's the Scale we want Photo to end at.

Transition 模塊的 Start 接口值填寫為 0.38，End 接口的值填寫為1，這是照片要縮放的范圍值。

Start input should be `0.38` and End input should be `1` 開始值 `0.38`，結束值 `1`。

Connecting patches 連接模塊

Connect the Down output of our purple Interaction patch to the Progress input of the Transition patch. Do this by clicking and dragging from the Down output into the Progress input of the Transition patch.

連接 Interaction 模塊的 Down 輸出口到 Transition 模塊的 Progress 輸入口。通過點擊，從“Down”輸出傳遞到“Transition”模塊的“Progress”輸入口來執行此操作。

Be sure you are connecting from the Down output. 連接了 Down 輸出口

Connecting patches to layer properties 連接到圖層屬性

We need to connect the Transition output to the Photo layer's Scale property. Like we did with connecting Down to Progress, we can make connections from patches to layer properties.

把 Transition 模塊的輸出口連接到 Photo 圖層的縮放屬性 - Scale。跟上一步連接 Down 和 Progress 接口時一樣，這樣就能讓模塊和圖層屬性產生連接。

Click and drag on the Transition output and connect it to the Scale property of Photo, this time directly in the Layers panel. You should now see that pressing Down on Photo causes the Transition to occur instantly between 0.38 and 1.

按住 Transition 模塊的輸出口并拖動到 Photo 圖層屬性窗口的 “Scale” 這個名稱上（要先選中 Photo 圖層，屬性窗口才會顯示 Photo 圖層的屬性），會自動生成一個又 Scale 屬性的 Photo 模塊。現在點擊下照片，可以看到看 Transition 在0.38 和 1 之間立即發生變化。

Adding animation 添加動畫

The next thing we want to do is add animation. Double-click on the Patch Editor Cmd Return and begin to type 'animation'. Press Return when Pop Animation appears.

下一步要加動畫了。添加一個 Pop Animation 模塊。
板栗：添加方法就不老式重復了，快捷鍵 A。

Insert the Pop Animation patch between the two existing patches by connecting the Down output of the Interaction patch to the Number input of the Pop Animation patch, and then the Progress output of the Pop Animation patch to the Progress input of the Transition patch.

把 Pop Animation 模塊添加到 Interaction 和 Transition 模塊中間。Down 接口改為連接到 Pop Animation 的 Number 接入口，Pop Animation 的輸出口 Progress 連接到 Transition 的 Progress 輸入口。

板栗：先點一下 Down 或 Progress 接口，中間的線變成黃色了再按 A 可以快速的將 Pop Animation 添加到兩個模塊中間。這是在兩個模塊中間快速插入模塊的方法。

Left-to-right flow 從左至右的流程

You might start to see that everything in the Patch Editor flows from left to right. Now when I tap and hold Down on Photo, this Transition is eased — or animated.

模塊編輯器中的所有內容都從左到右流動。
當我點擊或按住照片時，這個過渡就會啟動-恢復或保持在啟動狀態。

Tap states 點擊狀態

We would like this Transition to occur when we tap on Photo, not just when we press Down. Try connecting the Tap output of the Interaction patch to the Number input of the Pop Animation patch.

現在需要點擊的時候激活過渡，現在是在按下的時候就激活了。試著將 Interaction 模塊的 Tap 輸出口連接到 Pop Animation 模塊的 Number 接口。
板栗：前面說過了 Down 和 Tap 的區別，前者是指鼠標或手指按下時，后者是指鼠標或手指松開時。

Creating a new connection to an input will replace an older one. 創建一個新的連接會替換舊的。

You might see that it is triggering but not holding that state. That is because a Tap only lasts for one frame, and triggers when you release your finger.

再點擊圖片式一下，現在觸發但不持續該狀態。因為 Tap 只有最后一幀，在松開鼠標或手指時觸發。

Switching states 開關狀態

We need to add a Switch patch to our Patch Editor. Double-click on the Patch Editor ?? and begin to type 'switch'. Press Return ? when Switch appears.

現在在 Interaction 和 Pop Animation 之間添加一個 Switch 模塊，按 Shift S。
Like we did with the Pop Animation, insert this patch between the Interaction patch and Pop Animation patch. Connect the Tap output of the Interaction patch into the Flip input of our Switch patch. Finally, connect the output of the Switch patch into the Number input of our Pop Animation patch.

就跟添加 Pop Animation 時一樣，并改接口連接。
板栗：用了前面說的快速插模塊方法沒，用了的話接口就自動改好了。

Now a Tap will trigger a Flip on the Switch patch, which is sent onwards to the Pop Animation, and then to the Transition patch. That value will remain until we Flip the Switch back by tapping on Photo.

現在點擊 Photo 觸發脈沖從 Switch 模塊上的 Flip，到 Pop Animation 模塊，再到 Transition 模塊啟動。直到下次點擊 Photo 翻轉開關前，該值將保持不變。

Multiple transitions 多次轉換

Interaction, Switch, Pop Animation, and Transition make up the bulk of your prototyping in Origami. Mostly because they can be re-used and extended upon for other interactions.

大部分原型都可以通過 Interaction，Switch，Pop Animation，和 Transition 這幾個模塊實現。主要因為它們可以重復使用，并可擴展到其他交互上。

We know that we want our Text layers to hide and show, as well as the background Color Fill to change colors. All of this should be happening within the same physical interaction to our Photo changing in Scale.

讓 Text 圖層隱藏和顯示，或通過 Color Fill 圖層改變背景顏色，原型都和剛剛控制圖片縮放的一樣。

Double-click on the Patch Editor Cmd Return and begin to type 'transition'. Press Return when Transition appears. Connect the existing output of the Pop Animation patch into the Progress input of this new Transition patch.

再添加一個 Transition 模塊。Pop Animation 的輸出口連接到剛剛新加的 Transition 模塊的 Progress 輸入口。

Finish by clicking and dragging from the output of the new Transition patch to the Layer Inspector of the Info Group, and connecting to the Opacity property.

點擊并拖動輸出口到 Info 圖層組的不透明度屬性 Opacity 上創建一個又 Opacity 屬性的 Info 模塊。

You can also drag to the layer name in the Layers panel. The layer will expand to show its properties. 拖動到 Opacity 屬性上添加這個屬性的過渡。

We want our Info to start at an Opacity of 0 and end at on Opacity of 1 , so we don't need to make any changes to the default inputs of this Transition patch.

現在希望圖片縮小時信息消失，圖片放大時信息顯示。所以連接到 Info 的 Transition 模塊 Start 應為 0，End 應為 1，不需要做出任何改變。

Your patches and their values should looks similar to this. 現在模塊和模塊上的值應該是這樣的。

Changing transition type 更改過渡類型

Lastly, add one more Transition patch to the Patch Editor. Right-click or Control-click this Transition patch and change the Type to Color in the drop-down menu.

最后，再添加一個 Transition 模塊。右鍵或按住 Control 單擊 Transition 模塊，把 Type 下拉菜單中的 Number 改為 Color。

We want the starting fill color to be white, and the end to be black. Like before, connect the output of the Pop Animation Progress into the Progress input of the new Transition patch.

要把開始顏色設置為白色，結束顏色設置為黑色。像前面的 Transition 一樣將 Pop Animation 的輸出口連接到 Progress 輸入口。

Finally, connect the output of our Transition patch to the Color property of the Color Fill layer.

最后，連接 Transition 模塊的 輸出口到 Color Fill 圖層的 Color 屬性。

You can also drag to the layer name in the Layers panel. The layer will expand to show its properties. 拖上去連接，自動添加一個屬性模塊到編輯器中。

Now when we interact with the prototype, the Color Fill layer transitions from a white fill color when Photo is scaled down (zoomed out), to a black fill color when Photo is scaled up (zoomed in).

現在與原型進行交互，當照片被縮小（1 - 0.38）時，背景顏色從黑變白，照片放大時（0.38 - 1）背景顏色從白變黑。

相關案例

4. Photo Zoom 照片縮放
點擊在兩個狀態之間切換的動畫。

11. Messenger Home
滾動對話列表。

18. Instagram Boomerang
Transition between screens and scrolls in Boomerang.

相關模塊

Pop Animation Switch Transition Interaction

相關圖層

Group Image File Color Fill

NEXT UP
Previewing and Sharing 預覽和分享
在模擬器和設備上預覽原型。