Adding Animation（添加動畫）

使用Origami添加動畫非常簡單，特別是使用了Pop Animation之后。按下Command+回車,打開Patch Library即可搜索得到。也可以使用快捷鍵“a”快速添加。Pop Animation從輸入口得到數值后，會直接把它變成動畫輸出。回憶一下，剛才的Interaction 2的Down端口，可以輸出0或1，我們拔掉Down端口與Transition的Progress端口的連線，把Down端口插到Pop Animation的Number端口。這時，Down就可以得到動畫了。然后，再把Pop Animation的Progress插到Transition的Progress。

添加動畫.png

現在我們點擊一下右邊Viewer的手機屏幕，發現圖片縮小了，松開手后，圖片又平滑地放大了。我們已經制作出動畫啦。

馬上回顧一下，其實在添加動畫中，我們只需要做的就是在Interaction 2和Transition模塊之間，加一個Pop Animation模塊。有個更快捷的方式可以實現這一點。把鼠標移動Interaction 2的Down口上，然后按下鍵盤“a”，就會自動地在這2個模塊之間加上了Pop Animation模塊，非常方便。

Adding a New State（增加新狀態）

大家一定已經注意到，目前的效果是，我們點擊屏幕，圖片縮小，放開手后，圖片又變全屏了。一般正常的交互應該是，點擊一下，圖片縮小，再點擊一下，圖片變大。為了實現這一點，我們需要在原型中引入狀態。現在只有Down口判斷手指是否點擊了屏幕，我們使用Switch（開關）模塊來加入狀態。按下快捷鍵Shift+s，添加Switch模塊。它就是一個開關，現在是Off（關）的狀態，如果Flip（按下）的時候，就會變成On（開）的狀態；如果再Flip，就又會變成Off。它的輸出口會根據On或Off的狀態對應地輸出0或1。

實際上，我們只需要在Interaction 2和Pop Animation模塊之間加入Switch。同理，可以把鼠標移動Interaction 2的Down口上，然后按下鍵盤“Shift+s”，就會自動地在這2個模塊之間加上了Switch。

添加開關模塊.png

這時，我們點擊屏幕，發現圖片縮小，松手后，圖片依然是縮小的狀態；再次點擊屏幕，圖片變大，全屏顯示。圖片縮放的過程非常平滑自然。

Synchronizing Effects（同步效應）

我們繼續添加一張帶文字和遮罩層的圖片，現在希望點擊屏幕，圖片縮小的同時，這張帶遮罩的圖片消失。再點擊屏幕，圖片全屏顯示的同時，帶遮罩的圖片也一同出現。

添加帶遮罩的圖片.png

讓圖片消失，也就是讓Layer里的“Opacity”（透明度）為0。顯然，需要添加一個Transition模塊，讓它插到Opacity去。當然，你可以按下鍵盤“t”來添加，再進行連接。這里再介紹一種更方便的方法。把鼠標移到“Opacity”上，同時按下鍵盤“t”。你會發現，添加了一個直接插到了Opacity的Transition模塊，而且它的名字也變成了“Opacity”。這樣的命名在復雜的合成里非常有用，可以幫助我們清晰地知道這個模塊是輸出到哪里的或者是干什么用的。

添加過渡模塊.png

順便也可以按這種方式給其他模塊重命名，這也是非常推薦的做法。雙擊每個模塊的頂部第一行，就可以給它們重新命名。比如，我們把第一個Transition模塊叫做“Scale”，把Switch模塊叫為“Photo is Zoomed Out”。

繼續回到連接到Opacity的Transition模塊。當Progress為0時，需要保證Opacity為1，也就是默認是顯示圖片，此時1=s+p*（e-s）=s+0，所以s也就是Start Value需要設置為1。當點擊屏幕后，Progress為1，需要保證Opacity為0，也就是圖片消失。對照上面的公式，0=1+1*（e-1），e即End Value為0。

最后，既然2張圖片都是對同一個動作做響應，自然可以共用前面的模塊，這就是“同步效應”的意思。把上面的Pop Animation插到這個Transition的輸入即可。

最后成品.png

Layer Order（圖層順序）

接觸過PS的同學就會知道，圖層是有順序的，在QC里也不例外。為什么剛才添加的帶遮罩圖片會覆蓋在金門大橋的照片上呢？請看Layer頂部右邊的數字，因為它的圖層順序為3，數字越大，就越在上方，覆蓋數字小的圖層。選中這個模塊，使用快捷鍵Command+[ 或Command+] ，可以快速地使圖層移到下一層或上一層。

圖層順序 .png

總結

第一個例子我們就成功完成了。總結一下各個常用模塊的作用：

• Interaction 2：實現各種手勢
• Switch：調節狀態
• Pop Animation：加入平滑的動畫效果
• Transition：通過設置Start Value和End Value，把數值0和1變成各種數值再輸出
  我們可以通過靈活使用這些模塊，做出精彩紛呈的交互效果。

學習材料

Origami入門教程3學習材料，提取密碼: h39m。這是本節課的圖片素材和我自己制作的QTZ文件，有興趣的朋友可以自行下載，再自己跟著視頻步驟親自做一遍，加深理解。