Adding Animation（添加動(dòng)畫）

使用Origami添加動(dòng)畫非常簡(jiǎn)單照捡，特別是使用了Pop Animation之后。按下Command+回車,打開Patch Library即可搜索得到唆姐。也可以使用快捷鍵“a”快速添加。Pop Animation從輸入口得到數(shù)值后自点，會(huì)直接把它變成動(dòng)畫輸出生音。回憶一下缩麸，剛才的Interaction 2的Down端口讯榕，可以輸出0或1，我們拔掉Down端口與Transition的Progress端口的連線匙睹，把Down端口插到Pop Animation的Number端口愚屁。這時(shí)，Down就可以得到動(dòng)畫了痕檬。然后霎槐，再把Pop Animation的Progress插到Transition的Progress。

添加動(dòng)畫.png

現(xiàn)在我們點(diǎn)擊一下右邊Viewer的手機(jī)屏幕梦谜，發(fā)現(xiàn)圖片縮小了丘跌，松開手后，圖片又平滑地放大了唁桩。我們已經(jīng)制作出動(dòng)畫啦闭树。

馬上回顧一下，其實(shí)在添加動(dòng)畫中荒澡，我們只需要做的就是在Interaction 2和Transition模塊之間报辱，加一個(gè)Pop Animation模塊。有個(gè)更快捷的方式可以實(shí)現(xiàn)這一點(diǎn)单山。把鼠標(biāo)移動(dòng)Interaction 2的Down口上碍现，然后按下鍵盤“a”，就會(huì)自動(dòng)地在這2個(gè)模塊之間加上了Pop Animation模塊米奸，非常方便昼接。

Adding a New State（增加新狀態(tài)）

大家一定已經(jīng)注意到，目前的效果是悴晰，我們點(diǎn)擊屏幕慢睡，圖片縮小，放開手后，圖片又變?nèi)亮似Ｒ话阏５慕换?yīng)該是泪喊，點(diǎn)擊一下，圖片縮小者吁，再點(diǎn)擊一下窘俺，圖片變大。為了實(shí)現(xiàn)這一點(diǎn)复凳，我們需要在原型中引入狀態(tài)×隼幔現(xiàn)在只有Down口判斷手指是否點(diǎn)擊了屏幕，我們使用Switch（開關(guān)）模塊來(lái)加入狀態(tài)育八。按下快捷鍵Shift+s对途，添加Switch模塊。它就是一個(gè)開關(guān)髓棋，現(xiàn)在是Off（關(guān)）的狀態(tài)实檀，如果Flip（按下）的時(shí)候，就會(huì)變成On（開）的狀態(tài)按声；如果再Flip膳犹，就又會(huì)變成Off。它的輸出口會(huì)根據(jù)On或Off的狀態(tài)對(duì)應(yīng)地輸出0或1签则。

實(shí)際上须床，我們只需要在Interaction 2和Pop Animation模塊之間加入Switch。同理渐裂，可以把鼠標(biāo)移動(dòng)Interaction 2的Down口上豺旬，然后按下鍵盤“Shift+s”，就會(huì)自動(dòng)地在這2個(gè)模塊之間加上了Switch柒凉。

添加開關(guān)模塊.png

這時(shí)族阅，我們點(diǎn)擊屏幕，發(fā)現(xiàn)圖片縮小膝捞，松手后坦刀，圖片依然是縮小的狀態(tài)；再次點(diǎn)擊屏幕绑警，圖片變大求泰，全屏顯示。圖片縮放的過(guò)程非常平滑自然计盒。

Synchronizing Effects（同步效應(yīng)）

我們繼續(xù)添加一張帶文字和遮罩層的圖片，現(xiàn)在希望點(diǎn)擊屏幕芽丹，圖片縮小的同時(shí)北启，這張帶遮罩的圖片消失。再點(diǎn)擊屏幕，圖片全屏顯示的同時(shí)咕村，帶遮罩的圖片也一同出現(xiàn)场钉。

添加帶遮罩的圖片.png

讓圖片消失，也就是讓Layer里的“Opacity”（透明度）為0懈涛。顯然逛万，需要添加一個(gè)Transition模塊，讓它插到Opacity去批钠。當(dāng)然宇植，你可以按下鍵盤“t”來(lái)添加，再進(jìn)行連接埋心。這里再介紹一種更方便的方法指郁。把鼠標(biāo)移到“Opacity”上，同時(shí)按下鍵盤“t”拷呆。你會(huì)發(fā)現(xiàn)闲坎，添加了一個(gè)直接插到了Opacity的Transition模塊，而且它的名字也變成了“Opacity”茬斧。這樣的命名在復(fù)雜的合成里非常有用腰懂，可以幫助我們清晰地知道這個(gè)模塊是輸出到哪里的或者是干什么用的。

添加過(guò)渡模塊.png

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

繼續(xù)回到連接到Opacity的Transition模塊罢防。當(dāng)Progress為0時(shí)，需要保證Opacity為1唉侄，也就是默認(rèn)是顯示圖片咒吐，此時(shí)1=s+p*（e-s）=s+0，所以s也就是Start Value需要設(shè)置為1属划。當(dāng)點(diǎn)擊屏幕后恬叹，Progress為1，需要保證Opacity為0同眯，也就是圖片消失绽昼。對(duì)照上面的公式，0=1+1*（e-1）须蜗，e即End Value為0硅确。

最后目溉，既然2張圖片都是對(duì)同一個(gè)動(dòng)作做響應(yīng)，自然可以共用前面的模塊菱农，這就是“同步效應(yīng)”的意思缭付。把上面的Pop Animation插到這個(gè)Transition的輸入即可。

最后成品.png

Layer Order（圖層順序）

接觸過(guò)PS的同學(xué)就會(huì)知道循未，圖層是有順序的陷猫，在QC里也不例外。為什么剛才添加的帶遮罩圖片會(huì)覆蓋在金門大橋的照片上呢的妖？請(qǐng)看Layer頂部右邊的數(shù)字绣檬，因?yàn)樗膱D層順序?yàn)?，數(shù)字越大羔味，就越在上方河咽，覆蓋數(shù)字小的圖層。選中這個(gè)模塊赋元，使用快捷鍵Command+[ 或Command+] 忘蟹，可以快速地使圖層移到下一層或上一層。

圖層順序 .png

總結(jié)

第一個(gè)例子我們就成功完成了搁凸∶闹担總結(jié)一下各個(gè)常用模塊的作用：

• Interaction 2：實(shí)現(xiàn)各種手勢(shì)
• Switch：調(diào)節(jié)狀態(tài)
• Pop Animation：加入平滑的動(dòng)畫效果
• Transition：通過(guò)設(shè)置Start Value和End Value，把數(shù)值0和1變成各種數(shù)值再輸出
  我們可以通過(guò)靈活使用這些模塊护糖，做出精彩紛呈的交互效果褥芒。

學(xué)習(xí)材料

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