在Mugeda中制作順暢的左右滑動切換卡片效果的教程

之前在做《刁角武漢》的時候?qū)θ绾芜x擇景點這個問題做了好幾個方案,一個是畫一張大地圖,另一個是做垂直的列表選擇,但我還是選擇了左右滑動來切換景點。因為在多次嘗試之后發(fā)現(xiàn)發(fā)現(xiàn)在手機屏上似乎不適合做可以上下左右滑動的大地圖,而垂直列表在 Mugeda 上又有 BUG,經(jīng)常卡住滑不了。所以為了更好的用戶體驗,我選擇了做左右滑動切換,模擬出平常 app 的效果。

目錄:

一、解析動畫效果

二、做出初步的動畫效果

三、完善動畫

 

一、解析動畫效果

其實在 Mugeda 中如果要做到左右滑動切換卡片,點擊進入的效果并不難。但是要加上動畫效果的話還需要做一番調(diào)整。

1_b7ffW1mAvbYeKboyb6iuZQ(1)

可以看到切換動畫效果可以拆分為幾個動作,以“向左滑動”為例:“手指向左滑動”?—?“頁面1從頁面中心向左平移至畫面外”?—?“切換至下一頁”?—?“頁面2從頁面外向左平移至頁面中心” ;

如果是“向右滑動”:“手指向右滑動”?—?“頁面2從頁面中心向右平移至畫面外”?—?“切換至上一頁”?—?“頁面1從頁面外向右平移至頁面中心”

如果是用戶的動作是“單擊”,那就直接跳轉(zhuǎn)到正文頁了。

這里的動畫效果我們利用 Mugeda 的預(yù)置動畫來做,比用元件動畫做會方便一些。比如“向左滑動”動作里“頁面1從頁面中心向左平移至畫面外”這個動畫,其實就是預(yù)置動畫里的移出效果。

1_xIClZUaHRxHFb2LOXCbQdA(1)

所以,我們會用到預(yù)置動畫里的“移出”和“移入”效果。

 

二、做出初步的動畫效果

從上一步的分析可以得知,每個頁面都需要3個關(guān)鍵幀。現(xiàn)在我來解釋一下每個幀應(yīng)該做什么。

第一幀是用戶可以點擊進入詳情頁的幀,控制用戶進行“向左滑動”、“向右滑動”操作顯示的動畫。

第二幀顯示跳轉(zhuǎn)到下一頁之前的動畫,即向左的“移出”動畫。

第三幀顯示跳轉(zhuǎn)到前一頁之前的動畫,即向右的“移出”動畫。

所以可以整理出以下行為:

1_sJ6Yb7ic4GfqjeLp_wLtWQ(1)

注意:因為第一個頁面沒有上一頁,最后一個頁面也沒有下一頁,鑒于他們的特殊性,我們要在第一頁里去掉行為4和第3幀,最后一頁里去掉行為3和第二幀?。ǜ淖儙笠浀孟鄬?yīng)的修改行為里的參數(shù))

同時要額外配置:

1_ZnpkK2k3pVyNK15By0OfVw(1) 1_CS9-EmiEsp7NAqOtLz19FA(1)

所有的預(yù)置動畫都要啟用“自動播放”,并禁用“循環(huán)播放”。翻頁設(shè)置也要講翻頁效果設(shè)置為“出現(xiàn)”。

預(yù)置動畫這樣設(shè)置的原因是為了能夠正常顯示被滑動對象的正常進/出場動畫,而翻頁設(shè)置的原因是保證畫面上其他元素不會被用戶操作所影響,保持固定的位置。

如果按照步驟來的話,你的 H5 已經(jīng)可以做出帶有動畫的左右滑動切換效果了,但可以看到在中間的兩個頁面在切換的時候動畫有些錯誤,為什么呢?

1_261B2XrsN3RFH-2YQXxO_A(1)

 

三、完善動畫

因為我們每個頁面的第一幀的預(yù)置動畫都是從右向左的“移入”效果,所以只能保證一直往下翻頁時動畫的正常播放,但是從后往前操作時返回前一頁默認是看到第一幀,如果還是現(xiàn)在的從右向左的“移入”效果,就弄反了,

正確的情況應(yīng)該是如果用戶是返回而來的,預(yù)置動畫為從左向右的“移入”效果。

但是同一幀同一個元素,不能同時向左和向右“移入”,我們只能新開一幀(第4幀),這一幀專門為返回而來的頁面服務(wù)。

于是我們要加一層條件判斷,判斷到如果用戶是從頁面返回而來的,就跳到第4幀,播放從左向右的“移入”動畫。如果用戶是左滑去下一頁,則正常播放之前的效果。

我們先在第3頁的第3幀添加一個文本,元素名稱為 “from3to2” 內(nèi)容為“0”,將第3頁的被滑動對象添加一個行為:當出現(xiàn)時改變“from3to2”元素文本或取值屬性,改為“3to2”,如下圖:

1_8GTjsQRR26qNnn4F5tYRbA(1)

然后我們在第2頁的第1幀添加一個行為:跳轉(zhuǎn)到幀并停止(第4幀);觸發(fā)條件:出現(xiàn);執(zhí)行條件:檢查 “from3to2” 的元素狀態(tài)中文本或取值等于 “3to2”,然后再第4幀中把預(yù)置動畫改成為時長0.3秒的從左移入。如下圖:

1_gmgeNqEHTmhm1lL-5z1ZMg(1)

在第4幀中添加行為:重置“from3to2”元素的所有屬性。這樣才不會影響用戶從右向左滑動到下一頁時的效果。同時記得添加左右滑動時頁面跳轉(zhuǎn)的行為,因為如果用戶是返回到該頁面的話就是在第4幀中交互,而不是第1幀了。

我整理了一個表格,如下圖所示:

1_sxPCoS0jwWD39BKtBfgrIA(1)

    • 要注意第3頁和第4頁的物體添加,與第4幀的聯(lián)動。

重復(fù)給后面的頁面設(shè)置就能做到流暢的左右滑動切換卡片效果。

1_2AveMCHDEQgF9ac7aF5msA(1)

本文轉(zhuǎn)自medium?Pudge Peter

每天更新,
全站高品質(zhì)素材免費下載!