之前在做《刁角武漢》的時(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)?？ㄗ』涣恕Ｋ詾榱烁玫挠脩趔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