之前在做《刁角武漢》的時(shí)候?qū)θ绾芜x擇景點(diǎn)這個(gè)問(wèn)題做了好幾個(gè)方案,一個(gè)是畫一張大地圖,另一個(gè)是做垂直的列表選擇,但我還是選擇了左右滑動(dòng)來(lái)切換景點(diǎn)。因?yàn)樵诙啻螄L試之后發(fā)現(xiàn)發(fā)現(xiàn)在手機(jī)屏上似乎不適合做可以上下左右滑動(dòng)的大地圖,而垂直列表在 Mugeda 上又有 BUG,經(jīng)??ㄗ』涣恕K詾榱烁玫挠脩趔w驗(yàn),我選擇了做左右滑動(dòng)切換,模擬出平常 app 的效果。
目錄:
一、解析動(dòng)畫效果
二、做出初步的動(dòng)畫效果
三、完善動(dòng)畫
一、解析動(dòng)畫效果
其實(shí)在 Mugeda 中如果要做到左右滑動(dòng)切換卡片,點(diǎn)擊進(jìn)入的效果并不難。但是要加上動(dòng)畫效果的話還需要做一番調(diào)整。
可以看到切換動(dòng)畫效果可以拆分為幾個(gè)動(dòng)作,以“向左滑動(dòng)”為例:“手指向左滑動(dòng)”?—?“頁(yè)面1從頁(yè)面中心向左平移至畫面外”?—?“切換至下一頁(yè)”?—?“頁(yè)面2從頁(yè)面外向左平移至頁(yè)面中心” ;
如果是“向右滑動(dòng)”:“手指向右滑動(dòng)”?—?“頁(yè)面2從頁(yè)面中心向右平移至畫面外”?—?“切換至上一頁(yè)”?—?“頁(yè)面1從頁(yè)面外向右平移至頁(yè)面中心”
如果是用戶的動(dòng)作是“單擊”,那就直接跳轉(zhuǎn)到正文頁(yè)了。
這里的動(dòng)畫效果我們利用 Mugeda 的預(yù)置動(dòng)畫來(lái)做,比用元件動(dòng)畫做會(huì)方便一些。比如“向左滑動(dòng)”動(dòng)作里“頁(yè)面1從頁(yè)面中心向左平移至畫面外”這個(gè)動(dòng)畫,其實(shí)就是預(yù)置動(dòng)畫里的移出效果。
所以,我們會(huì)用到預(yù)置動(dòng)畫里的“移出”和“移入”效果。
二、做出初步的動(dòng)畫效果
從上一步的分析可以得知,每個(gè)頁(yè)面都需要3個(gè)關(guān)鍵幀?,F(xiàn)在我來(lái)解釋一下每個(gè)幀應(yīng)該做什么。
第一幀是用戶可以點(diǎn)擊進(jìn)入詳情頁(yè)的幀,控制用戶進(jìn)行“向左滑動(dòng)”、“向右滑動(dòng)”操作顯示的動(dòng)畫。
第二幀顯示跳轉(zhuǎn)到下一頁(yè)之前的動(dòng)畫,即向左的“移出”動(dòng)畫。
第三幀顯示跳轉(zhuǎn)到前一頁(yè)之前的動(dòng)畫,即向右的“移出”動(dòng)畫。
所以可以整理出以下行為:
注意:因?yàn)榈谝粋€(gè)頁(yè)面沒有上一頁(yè),最后一個(gè)頁(yè)面也沒有下一頁(yè),鑒于他們的特殊性,我們要在第一頁(yè)里去掉行為4和第3幀,最后一頁(yè)里去掉行為3和第二幀?。ǜ淖儙笠浀孟鄬?duì)應(yīng)的修改行為里的參數(shù))
同時(shí)要額外配置:
所有的預(yù)置動(dòng)畫都要啟用“自動(dòng)播放”,并禁用“循環(huán)播放”。翻頁(yè)設(shè)置也要講翻頁(yè)效果設(shè)置為“出現(xiàn)”。
預(yù)置動(dòng)畫這樣設(shè)置的原因是為了能夠正常顯示被滑動(dòng)對(duì)象的正常進(jìn)/出場(chǎng)動(dòng)畫,而翻頁(yè)設(shè)置的原因是保證畫面上其他元素不會(huì)被用戶操作所影響,保持固定的位置。
如果按照步驟來(lái)的話,你的 H5 已經(jīng)可以做出帶有動(dòng)畫的左右滑動(dòng)切換效果了,但可以看到在中間的兩個(gè)頁(yè)面在切換的時(shí)候動(dòng)畫有些錯(cuò)誤,為什么呢?
三、完善動(dòng)畫
因?yàn)槲覀兠總€(gè)頁(yè)面的第一幀的預(yù)置動(dòng)畫都是從右向左的“移入”效果,所以只能保證一直往下翻頁(yè)時(shí)動(dòng)畫的正常播放,但是從后往前操作時(shí)返回前一頁(yè)默認(rèn)是看到第一幀,如果還是現(xiàn)在的從右向左的“移入”效果,就弄反了,
正確的情況應(yīng)該是如果用戶是返回而來(lái)的,預(yù)置動(dòng)畫為從左向右的“移入”效果。
但是同一幀同一個(gè)元素,不能同時(shí)向左和向右“移入”,我們只能新開一幀(第4幀),這一幀專門為返回而來(lái)的頁(yè)面服務(wù)。
于是我們要加一層條件判斷,判斷到如果用戶是從頁(yè)面返回而來(lái)的,就跳到第4幀,播放從左向右的“移入”動(dòng)畫。如果用戶是左滑去下一頁(yè),則正常播放之前的效果。
我們先在第3頁(yè)的第3幀添加一個(gè)文本,元素名稱為 “from3to2” 內(nèi)容為“0”,將第3頁(yè)的被滑動(dòng)對(duì)象添加一個(gè)行為:當(dāng)出現(xiàn)時(shí)改變“from3to2”元素文本或取值屬性,改為“3to2”,如下圖:
然后我們?cè)诘?頁(yè)的第1幀添加一個(gè)行為:跳轉(zhuǎn)到幀并停止(第4幀);觸發(fā)條件:出現(xiàn);執(zhí)行條件:檢查 “from3to2” 的元素狀態(tài)中文本或取值等于 “3to2”,然后再第4幀中把預(yù)置動(dòng)畫改成為時(shí)長(zhǎng)0.3秒的從左移入。如下圖:
在第4幀中添加行為:重置“from3to2”元素的所有屬性。這樣才不會(huì)影響用戶從右向左滑動(dòng)到下一頁(yè)時(shí)的效果。同時(shí)記得添加左右滑動(dòng)時(shí)頁(yè)面跳轉(zhuǎn)的行為,因?yàn)槿绻脩羰欠祷氐皆擁?yè)面的話就是在第4幀中交互,而不是第1幀了。
我整理了一個(gè)表格,如下圖所示:
- 要注意第3頁(yè)和第4頁(yè)的物體添加,與第4幀的聯(lián)動(dòng)。
重復(fù)給后面的頁(yè)面設(shè)置就能做到流暢的左右滑動(dòng)切換卡片效果。
本文轉(zhuǎn)自medium?Pudge Peter
全站高品質(zhì)素材免費(fèi)下載!