2023-10-26 分類: 網(wǎng)站建設(shè)
之前介紹過這個(gè)神器,今天終于有實(shí)戰(zhàn)教程咯!作者以微信新聞頁面為例,來講述下Origami中常見的幾個(gè)交互模塊以及一些在平時(shí)使用經(jīng)常會(huì)應(yīng)用到的小技巧。學(xué)起來吧!
效果如下圖,暫時(shí)先忽略這AV般的畫質(zhì)……(錄屏轉(zhuǎn)Gif搞死我了)
在正式做動(dòng)效之前,做好前戲尤為主要——對(duì)動(dòng)效進(jìn)行分析并將其分解。
你看,我是這樣拆解這個(gè)動(dòng)效的:
點(diǎn)擊微信新聞列表中的任意項(xiàng),該項(xiàng)底色加深; 新聞對(duì)話頁從右至左滑入屏幕; 在新聞對(duì)話頁面,向右劃動(dòng)則返回上一級(jí);
總得來說,就這三個(gè)步驟,But!像我這樣心思縝密的騷年就會(huì)發(fā)現(xiàn)這其中還包含著許多細(xì)微的效果:
按住新聞列表項(xiàng)但不松手,該項(xiàng)則一向保持選中態(tài)也就是底色加深,直待松手,新聞對(duì)話頁面才向左滑入; 新聞頁面從右至左滑入時(shí),原列表頁也向左滑動(dòng)廣州禮品公司,但速度稍慢,反之亦然; 在新聞頁面右劃返回上一級(jí)的過程中,導(dǎo)航條左右按鈕淡入淡出,Title隨手指方向漸入漸出。
分解之后,我們制作動(dòng)效的思路也就清晰了,步天然是打開電腦刷一會(huì)微博然后打開……Sorry……
因?yàn)槠南拗疲诖宋抑痪颓鞍氩糠郑狐c(diǎn)擊列表項(xiàng)滑出新聞對(duì)話頁面 進(jìn)行講解,暫時(shí)不講右劃返回上一級(jí)這一部分。
好了,就讓我們一路蕩起雙槳吧!
Step 1
點(diǎn)擊列表項(xiàng),該項(xiàng)顏色加深,同時(shí)新聞對(duì)話頁面向左滑入;
因?yàn)槲覀冎暗姆纸猓覀円呀?jīng)知曉頁面中的哪些元素將會(huì)發(fā)生轉(zhuǎn)變,所以在預(yù)備素材時(shí),我們就必須將這些元素單專制圖,比如導(dǎo)航欄中的按鈕與Title等。
然后將所有元素逐個(gè)拖入畫布,如下圖這個(gè)姿勢(shì);(趁機(jī)吐槽:QC無法實(shí)現(xiàn)圖片批量拖入也真是夠了?。?/p>
然后對(duì)照自己的微信界面,把所有元素移動(dòng)到準(zhǔn)確地位置;
然后添加Hit Area(熱區(qū))模塊,大小調(diào)整為列表項(xiàng)大小,位置移動(dòng)至如圖位置;并添加Interaction2(交互)模塊,將Interaction2模塊與Hit Area模塊連接;
這里,我需要先對(duì)Interaction2這個(gè)模塊進(jìn)行具體的說明,做好筆記;
Interaction2右側(cè)有四個(gè)輸出端:Down,Up,Tap,Drag;
Drag很好理解,脫拽而已,不是,拖拽而已;而且在Origami官網(wǎng)提供的教程中就提到過Drag的用法,此處也暫先不提;
Tap意為一次完整的點(diǎn)擊動(dòng)作,就是手指按下 – 再抬起才視為完成動(dòng)作,才會(huì)觸發(fā)動(dòng)效;
Up意為抬起的動(dòng)作,僅僅抬起手指后就觸發(fā)動(dòng)效;我知道有童鞋就要問了,你不按下哪來的抬起?。?這位童鞋請(qǐng)坐下,待我慢慢給你吹~
是這樣的,Tap觸發(fā)的動(dòng)效一般都不是針對(duì)控件自己的,主要是說Tap操作之后其他東西怎樣怎樣動(dòng)次打次的。而Up與Down一般是針對(duì)控件的中心狀況,比如微信的新聞列表項(xiàng),按下去時(shí)底色加深,抬起時(shí)則滑入新聞對(duì)話頁。假如直接用Tap操作觸發(fā)的話,效果便是按下去無效果,抬起后底色加深并滑出對(duì)話頁;
具體實(shí)現(xiàn)步的效果,其實(shí)很簡單,如圖:
(1) 熱區(qū)紅不啦嘰的有礙觀瞻,便去掉Hit Area模塊的Setup Mode 的勾選狀況,將其隱藏。
(2) 將Interaction2的Down輸出端連接Switch的Turn on輸入端,再將Switch模塊的輸出端連接至Transition(轉(zhuǎn)換)模塊的輸入端,Transition的的開始狀況0,結(jié)束狀況為1,并將其賦予一個(gè)灰色矩形的透明度,意為在熱區(qū)按下后開啟灰色矩形塊透明度從0到1的轉(zhuǎn)換。如此便實(shí)現(xiàn)了新聞列表項(xiàng)按下后顏色加深的效果;
(3) 將Interaction2的Up輸出端連接Switch的Turn on輸入端,再將Switch模塊的輸出端連接至Transition模塊的輸入端,Transition的的開始狀況640,結(jié)束狀況為0,并將其賦予新聞對(duì)話頁面的X坐標(biāo),意為在熱區(qū)有抬起操作后,新聞對(duì)話頁的X坐標(biāo)由640轉(zhuǎn)換至0,如此便實(shí)現(xiàn)了新聞對(duì)話頁滑入的效果;
(4) 圖中黃色的線就猶如“電線”用來傳遞旌旗燈號(hào),但是現(xiàn)在改革開放30年了,人民的生活水平也提高了,我便使用了藍(lán)牙無線技術(shù),添加Wireless Broadcaster(無線發(fā)射)模塊,配對(duì)Wireless Rreceiver,就可以不用“電線”而用“無線”遠(yuǎn)距離跨層級(jí)的傳輸旌旗燈號(hào)了。
除此之外,我在每個(gè)Transition模塊前都設(shè)置了一個(gè)Pop(彈性)模塊上海轎車運(yùn)輸公司,目的是為了讓轉(zhuǎn)換效果更流暢而不生硬,Pop的各項(xiàng)參數(shù)都可以調(diào)節(jié)。
Step 2
新聞頁面滑入時(shí),列表頁Title向左漸出,右上角加號(hào)icon淡出,新聞對(duì)話頁Title向右漸入,并淡入返回按鈕與聯(lián)系人icon,與此同時(shí),列表頁也以較慢的速度左滑;
(1)將Interaction2的Tap輸出端連接Switch的Turn on輸入端,再將Switch模塊的輸出端連接至兩個(gè)Transition(轉(zhuǎn)換)模塊的輸入端,個(gè)Transition的的開始狀況0,結(jié)束狀況為-320,并將其賦予列表頁Title的X坐標(biāo),意為點(diǎn)擊熱區(qū)后打開Switch(開關(guān)),從而開啟列表頁Title的X坐標(biāo)值從0到-320的轉(zhuǎn)換。其他icon的淡入、淡出、漸入便如法炮制。(為了便于區(qū)分品牌策劃,我更改了每個(gè)Transition模塊的名稱)
(2) 將Interaction2的Tap輸出端連接Switch的Turn on輸入端,再將Switch模塊的輸出端連接至Transition(轉(zhuǎn)換)模塊的輸入端,個(gè)Transition的的開始狀況0,結(jié)束狀況為-200,并將其賦予列表頁的X坐標(biāo),從而開啟列表頁X坐標(biāo)值從0到-200的轉(zhuǎn)換。在Transition前,我添加了一個(gè)Classic Animation(傳統(tǒng)動(dòng)效)模塊上海做網(wǎng)站,可以設(shè)置控件的運(yùn)動(dòng)曲線,使其運(yùn)動(dòng)加速度轉(zhuǎn)變的更細(xì)膩一些。
如此,點(diǎn)擊微信新聞列表頁的列表項(xiàng)滑出新聞對(duì)話頁的動(dòng)效就制作完畢了,這其中關(guān)于部分交互模塊,我做了比較具體的闡述,但是接下來,通過右劃手勢(shì)返回上一級(jí)如何實(shí)現(xiàn),我將在后面的文章中分享給各位。
當(dāng)前名稱:QC+ORIGAMI動(dòng)效設(shè)計(jì)初級(jí)篇之微信新聞頁
文章來源:http://m.rwnh.cn/news21/287871.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)、面包屑導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容