之前介紹過(guò)這個(gè)神器，今天終于有實(shí)戰(zhàn)教程咯！作者以微信消息頁(yè)面為例，來(lái)講述下Origami中常見(jiàn)的幾個(gè)交互模塊以及一些在平時(shí)使用經(jīng)常會(huì)應(yīng)用到的小技巧。學(xué)起來(lái)吧！

木有基礎(chǔ)的同學(xué)看一下：《設(shè)計(jì)利器搶先看！Quartz Composer+Origami 2.0介紹及教程》

最終效果如下圖，暫時(shí)先忽略這AV般的畫(huà)質(zhì)……（錄屏轉(zhuǎn)Gif搞死我了）

在正式做動(dòng)效之前，做好前戲尤為重要——對(duì)動(dòng)效進(jìn)行分析并將其分解。

你看，我是這樣拆解這個(gè)動(dòng)效的：

1. 點(diǎn)擊微信消息列表中的任意項(xiàng)，該項(xiàng)底色加深；
2. 消息對(duì)話頁(yè)從右至左滑入屏幕；
3. 在消息對(duì)話頁(yè)面，向右劃動(dòng)則返回上一級(jí)；

總得來(lái)說(shuō)，就這三個(gè)步驟，But！像我這樣心思縝密的騷年就會(huì)發(fā)現(xiàn)這其中還包含著許多細(xì)微的效果：

1. 按住消息列表項(xiàng)但不松手，該項(xiàng)則一直保持選中態(tài)也就是底色加深，直待松手，消息對(duì)話頁(yè)面才向左滑入；
2. 消息頁(yè)面從右至左滑入時(shí)，原列表頁(yè)也向左滑動(dòng)，但速度稍慢，反之亦然；
3. 在消息頁(yè)面右劃返回上一級(jí)的過(guò)程中，導(dǎo)航條左右按鈕淡入淡出，Title隨手指方向漸入漸出。

分解之后，我們制作動(dòng)效的思路也就清晰了，第一步自然是打開(kāi)電腦刷一會(huì)微博然后打開(kāi)……Sorry……

由于篇幅的限制，在此我只就前半部分：點(diǎn)擊列表項(xiàng)滑出消息對(duì)話頁(yè)面 進(jìn)行講解，暫時(shí)不講右劃返回上一級(jí)這一部分。

好了，就讓我們一起蕩起雙槳吧！

Step 1

點(diǎn)擊列表項(xiàng)，該項(xiàng)顏色加深，同時(shí)消息對(duì)話頁(yè)面向左滑入；

因?yàn)槲覀冎暗姆纸猓覀円呀?jīng)知曉頁(yè)面中的哪些元素將會(huì)發(fā)生變化，所以在準(zhǔn)備素材時(shí)，我們就必須將這些元素單獨(dú)裁圖，比如導(dǎo)航欄中的按鈕與Title等。

然后將所有元素逐個(gè)拖入畫(huà)布，如下圖這個(gè)姿勢(shì)；（趁機(jī)吐槽：QC無(wú)法實(shí)現(xiàn)圖片批量拖入也真是夠了！）

然后對(duì)照自己的微信界面，把所有元素移動(dòng)到正確地位置；

然后添加Hit Area（熱區(qū)）模塊，大小調(diào)整為列表項(xiàng)大小，位置移動(dòng)至如圖位置；并添加Interaction2（交互）模塊，將Interaction2模塊與Hit Area模塊連接；

這里，我需要先對(duì)Interaction2這個(gè)模塊進(jìn)行詳細(xì)的說(shuō)明，做好筆記；

Interaction2右側(cè)有四個(gè)輸出端：Down，Up，Tap，Drag；

Drag很好理解，脫拽而已，不是，拖拽而已；而且在Origami官網(wǎng)提供的教程中就提到過(guò)Drag的用法，此處也暫先不提；

Tap意為一次完整的點(diǎn)擊動(dòng)作，就是手指按下 - 再抬起才視為完成動(dòng)作，才會(huì)觸發(fā)動(dòng)效；

Up意為抬起的動(dòng)作，僅僅抬起手指后就觸發(fā)動(dòng)效；我知道有童鞋就要問(wèn)了，你不按下哪來(lái)的抬起！？ 這位童鞋請(qǐng)坐下，待我慢慢給你吹~

是這樣的，Tap觸發(fā)的動(dòng)效一般都不是針對(duì)控件本身的，主要是說(shuō)Tap操作之后其他東西怎樣怎樣動(dòng)次打次的。而Up與Down一般是針對(duì)控件的中間狀態(tài)，比如微信的消息列表項(xiàng)，按下去時(shí)底色加深，抬起時(shí)則滑入消息對(duì)話頁(yè)。如果直接用Tap操作觸發(fā)的話，效果便是按下去無(wú)效果，抬起后底色加深并滑出對(duì)話頁(yè)；

具體實(shí)現(xiàn)第一步的效果，其實(shí)很簡(jiǎn)單，如圖：

(1) 熱區(qū)紅不啦嘰的有礙觀瞻，便去掉Hit Area模塊的Setup Mode 的勾選狀態(tài)，將其隱藏。

(2) 將Interaction2的Down輸出端連接Switch的Turn on輸入端，再將Switch模塊的輸出端連接至Transition（轉(zhuǎn)換）模塊的輸入端，Transition的的開(kāi)始狀態(tài)0，結(jié)束狀態(tài)為1，并將其賦予一個(gè)灰色矩形的透明度，意為在熱區(qū)按下后開(kāi)啟灰色矩形塊透明度從0到1的轉(zhuǎn)換。如此便實(shí)現(xiàn)了消息列表項(xiàng)按下后顏色加深的效果；

(3) 將Interaction2的Up輸出端連接Switch的Turn on輸入端，再將Switch模塊的輸出端連接至Transition模塊的輸入端，Transition的的開(kāi)始狀態(tài)640，結(jié)束狀態(tài)為0，并將其賦予消息對(duì)話頁(yè)面的X坐標(biāo)，意為在熱區(qū)有抬起操作后，消息對(duì)話頁(yè)的X坐標(biāo)由640轉(zhuǎn)換至0，如此便實(shí)現(xiàn)了消息對(duì)話頁(yè)滑入的效果；

(4) 圖中黃色的線就猶如“電線”用來(lái)傳遞信號(hào)，但是現(xiàn)在改革開(kāi)放30年了，人民的生活水平也提高了，我便使用了藍(lán)牙無(wú)線技術(shù)，添加Wireless Broadcaster（無(wú)線發(fā)射）模塊，配對(duì)Wireless Rreceiver，就可以不用“電線”而用“無(wú)線”遠(yuǎn)距離跨層級(jí)的傳輸信號(hào)了。

除此之外，我在每個(gè)Transition模塊前都設(shè)置了一個(gè)Pop（彈性）模塊，目的是為了讓轉(zhuǎn)換效果更流暢而不生硬，Pop的各項(xiàng)參數(shù)都可以調(diào)節(jié)。

Step 2

消息頁(yè)面滑入時(shí)，列表頁(yè)Title向左漸出，右上角加號(hào)icon淡出，消息對(duì)話頁(yè)Title向右漸入，并淡入返回按鈕與聯(lián)系人icon，與此同時(shí)，列表頁(yè)也以較慢的速度左滑；

(1)將Interaction2的Tap輸出端連接Switch的Turn on輸入端，再將Switch模塊的輸出端連接至兩個(gè)Transition（轉(zhuǎn)換）模塊的輸入端，第一個(gè)Transition的的開(kāi)始狀態(tài)0，結(jié)束狀態(tài)為-320，并將其賦予列表頁(yè)Title的X坐標(biāo)，意為點(diǎn)擊熱區(qū)后打開(kāi)Switch（開(kāi)關(guān)），從而開(kāi)啟列表頁(yè)Title的X坐標(biāo)值從0到-320的轉(zhuǎn)換。其他icon的淡入、淡出、漸入便如法炮制。（為了便于區(qū)分，我更改了每個(gè)Transition模塊的名稱）

(2) 將Interaction2的Tap輸出端連接Switch的Turn on輸入端，再將Switch模塊的輸出端連接至Transition（轉(zhuǎn)換）模塊的輸入端，第一個(gè)Transition的的開(kāi)始狀態(tài)0，結(jié)束狀態(tài)為-200，并將其賦予列表頁(yè)的X坐標(biāo)，從而開(kāi)啟列表頁(yè)X坐標(biāo)值從0到-200的轉(zhuǎn)換。在Transition前，我添加了一個(gè)Classic Animation（傳統(tǒng)動(dòng)效）模塊，可以設(shè)置控件的運(yùn)動(dòng)曲線，使其運(yùn)動(dòng)加速度變化的更細(xì)膩一些。

如此，點(diǎn)擊微信消息列表頁(yè)的列表項(xiàng)滑出消息對(duì)話頁(yè)的動(dòng)效就制作完畢了，這其中關(guān)于部分交互模塊，我做了比較詳細(xì)的闡述，但是接下來(lái)，通過(guò)右劃手勢(shì)返回上一級(jí)如何實(shí)現(xiàn)，我將在后面的文章中分享給各位。

?【動(dòng)效神器Hype零基礎(chǔ)入門教程系列】

先聊一下這個(gè)軟件的強(qiáng)大功能，附上簡(jiǎn)單教程！
《Sketch神助攻！無(wú)代碼做動(dòng)效神器Hype3入門教程》

中國(guó)臺(tái)灣設(shè)計(jì)師叫你用Hype做原型過(guò)場(chǎng)！
《無(wú)代碼動(dòng)效神器！教你用HYPE3做APP原型的基礎(chǔ)過(guò)場(chǎng)（附神器）》

美丫姐手把手教你用Hype做Path菜單動(dòng)畫(huà)！
《比AE還方便！教你用HYPE無(wú)代碼制作PATH扇形菜單動(dòng)畫(huà)》

作者：ME網(wǎng)易移動(dòng)設(shè)計(jì)中心

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量101萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com