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

目錄：

一、解析動畫效果

二、做出初步的動畫效果

三、完善動畫

一、解析動畫效果

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

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

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

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

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

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

二、做出初步的動畫效果

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

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

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

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

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

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

同時要額外配置：

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

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

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

三、完善動畫

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

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

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

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

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

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

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

我整理了一個表格，如下圖所示：

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

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

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