QC+ORIGAMI動效設計初級篇之微信新聞頁

之前介紹過這個神器，今天終于有實戰(zhàn)教程咯！作者以微信新聞頁面為例，來講述下Origami中常見的幾個交互模塊以及一些在平時使用經(jīng)常會應用到的小技巧。學起來吧！

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

在正式做動效之前，做好前戲尤為主要——對動效進行分析并將其分解。

你看，我是這樣拆解這個動效的：

點擊微信新聞列表中的任意項，該項底色加深； 新聞對話頁從右至左滑入屏幕； 在新聞對話頁面，向右劃動則返回上一級；

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

按住新聞列表項但不松手，該項則一向保持選中態(tài)也就是底色加深，直待松手，新聞對話頁面才向左滑入； 新聞頁面從右至左滑入時，原列表頁也向左滑動廣州禮品公司，但速度稍慢，反之亦然； 在新聞頁面右劃返回上一級的過程中，導航條左右按鈕淡入淡出，Title隨手指方向漸入漸出。

分解之后，我們制作動效的思路也就清晰了，步天然是打開電腦刷一會微博然后打開……Sorry……

因為篇幅的限制，在此我只就前半部分：點擊列表項滑出新聞對話頁面 進行講解，暫時不講右劃返回上一級這一部分。

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

Step 1

點擊列表項，該項顏色加深，同時新聞對話頁面向左滑入；

因為我們之前的分解，我們已經(jīng)知曉頁面中的哪些元素將會發(fā)生轉(zhuǎn)變，所以在預備素材時，我們就必須將這些元素單專制圖，比如導航欄中的按鈕與Title等。

然后將所有元素逐個拖入畫布，如下圖這個姿勢；（趁機吐槽：QC無法實現(xiàn)圖片批量拖入也真是夠了?。?/p>

然后對照自己的微信界面，把所有元素移動到準確地位置；

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

這里，我需要先對Interaction2這個模塊進行具體的說明，做好筆記；

Interaction2右側有四個輸出端：Down，Up，Tap，Drag；

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

Tap意為一次完整的點擊動作，就是手指按下 – 再抬起才視為完成動作，才會觸發(fā)動效；

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

是這樣的，Tap觸發(fā)的動效一般都不是針對控件自己的，主要是說Tap操作之后其他東西怎樣怎樣動次打次的。而Up與Down一般是針對控件的中心狀況，比如微信的新聞列表項，按下去時底色加深，抬起時則滑入新聞對話頁。假如直接用Tap操作觸發(fā)的話，效果便是按下去無效果，抬起后底色加深并滑出對話頁；

具體實現(xiàn)步的效果，其實很簡單，如圖：

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

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

(3) 將Interaction2的Up輸出端連接Switch的Turn on輸入端，再將Switch模塊的輸出端連接至Transition模塊的輸入端，Transition的的開始狀況640，結束狀況為0，并將其賦予新聞對話頁面的X坐標，意為在熱區(qū)有抬起操作后，新聞對話頁的X坐標由640轉(zhuǎn)換至0，如此便實現(xiàn)了新聞對話頁滑入的效果；

(4) 圖中黃色的線就猶如“電線”用來傳遞旌旗燈號，但是現(xiàn)在改革開放30年了，人民的生活水平也提高了，我便使用了藍牙無線技術，添加Wireless Broadcaster（無線發(fā)射）模塊，配對Wireless Rreceiver，就可以不用“電線”而用“無線”遠距離跨層級的傳輸旌旗燈號了。

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

Step 2

新聞頁面滑入時，列表頁Title向左漸出，右上角加號icon淡出，新聞對話頁Title向右漸入，并淡入返回按鈕與聯(lián)系人icon，與此同時，列表頁也以較慢的速度左滑；

(1)將Interaction2的Tap輸出端連接Switch的Turn on輸入端，再將Switch模塊的輸出端連接至兩個Transition（轉(zhuǎn)換）模塊的輸入端，個Transition的的開始狀況0，結束狀況為-320，并將其賦予列表頁Title的X坐標，意為點擊熱區(qū)后打開Switch（開關），從而開啟列表頁Title的X坐標值從0到-320的轉(zhuǎn)換。其他icon的淡入、淡出、漸入便如法炮制。（為了便于區(qū)分品牌策劃，我更改了每個Transition模塊的名稱）

(2) 將Interaction2的Tap輸出端連接Switch的Turn on輸入端，再將Switch模塊的輸出端連接至Transition（轉(zhuǎn)換）模塊的輸入端，個Transition的的開始狀況0，結束狀況為-200，并將其賦予列表頁的X坐標，從而開啟列表頁X坐標值從0到-200的轉(zhuǎn)換。在Transition前，我添加了一個Classic Animation（傳統(tǒng)動效）模塊上海做網(wǎng)站，可以設置控件的運動曲線，使其運動加速度轉(zhuǎn)變的更細膩一些。

如此，點擊微信新聞列表頁的列表項滑出新聞對話頁的動效就制作完畢了，這其中關于部分交互模塊，我做了比較具體的闡述，但是接下來，通過右劃手勢返回上一級如何實現(xiàn)，我將在后面的文章中分享給各位。

當前名稱：QC+ORIGAMI動效設計初級篇之微信新聞頁
文章來源：http://www.muchs.cn/news21/287871.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、手機網(wǎng)站建設、網(wǎng)站排名、外貿(mào)網(wǎng)站建設、微信公眾號、面包屑導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)