本案例實現(xiàn)了微信讀書首頁的左右滑動切換卡片、點擊按鈕切換卡片、加載新卡片的動效、判斷用戶是否已瀏覽完推薦的新卡片等交互效果。

一、效果展示

1. 體驗地址：https://1qp369.axshare.com
2. 下載地址：鏈接：https://pan.baidu.com/s/1QChjD9EFttSmuWGheYf_ng? 提取碼：m3zq
3. 交互說明：鼠標拖動主面板代表滑動。

二、準備素材

（1）拖入一個寬為375、高為667的矩形充當(dāng)手機屏幕，根據(jù)微信讀書首頁的樣式調(diào)整該矩形的填充顏色。通過矩形、文本、圖標等元件制作頁面的搜索框及底部tab（這兩部分不是本案例的必要內(nèi)容，此處僅是為了頁面的完整性及美觀）。

（2）拖入第一個動態(tài)頁面，寬度373、高度528，命名為主面板；在主面板的state1拖入第二個動態(tài)面板，命名為拖動內(nèi)容，高度528、寬度2986。

（3）制作卡片：在拖動內(nèi)容的state1里面拖入九個寬為320、長為492的矩形，并調(diào)整該矩形的的邊框粗度及顏色。在前八個矩形中添加書籍的封面、書名、作者名稱、微信好友頭像、昵稱及點贊小圖標即可完成完整的書籍卡片；在第九個矩形中添加兩個小矩形及六條已隱藏的橫線充當(dāng)書本頁面的樣式，這六條橫線從上到下、從左到右分別命名為“1、2、3、4、5、6”，至此完成了加載卡片。分別把這九張卡片命名為“一、二、三、四、五、六、七、八、九”。

調(diào)整好卡片之間的距離，并記錄當(dāng)頁面顯示某個卡片時，拖動內(nèi)容動態(tài)面板的x軸坐標，本案例中當(dāng)?shù)谝粡堉恋诰艔埧ㄆ@示在頁面中時，拖動內(nèi)容動態(tài)面板的x輛坐標分別“0，-330，-657，-987，-1312，-1640，-1968，-2295，-2616”。

（4）箭頭素材：根據(jù)微信讀書APP，當(dāng)用戶進入進入首頁時，顯示的箭頭帶有數(shù)字（代表還幾個新的卡片），當(dāng)左滑切換到下個卡片時，箭頭的數(shù)字減1；如果用戶已切換完新的卡片，右滑回到之前帶有數(shù)字的卡片時，箭頭將不再顯示數(shù)字。

因此，在首頁上添加一個命名為“箭頭”的動態(tài)面板，并給該面板添加九個分別命名為“卡片1、卡片2、卡片3、卡片4、卡片5、卡片6、卡片7、卡片8”的狀態(tài)，這九個狀態(tài)分別對應(yīng)九張卡片。

在此案例中把前三張卡片定義為新卡片，因此在“箭頭”動態(tài)面板中的“卡片1”、“卡片2”、“卡片3”狀態(tài)中都添加一個內(nèi)嵌動態(tài)面板，內(nèi)嵌動態(tài)面板有兩個狀態(tài)分別代表有數(shù)字箭頭和沒數(shù)字箭頭。

（5）在主面板state1里添加熱區(qū)，位置如下圖所示，目的是為了知道當(dāng)前頁面顯示哪個卡片。

至此，所有的素材已準備完成，下面開始做交互事件。

二、左右滑動切換卡片

實現(xiàn)的交互：左右滑動頁面時切換下一張卡片、滑動過程中卡片隨之移動。

實現(xiàn)的思路：主面板拖動開始時，判斷哪個卡片正處于頁面中間，從而知道向左或向右拖動結(jié)束時該切換為哪張卡片。

實現(xiàn)過程：

（1）給主面板的拖動開始時設(shè)置事件，通過判斷哪張卡片正與熱區(qū)接觸，從而判斷目前哪張卡片正處于頁面中間，并通過全局變量記錄該卡片。

（2）當(dāng)主面板拖動時，設(shè)置拖動內(nèi)容相應(yīng)移動，并設(shè)置好左右邊界。

（3）主面板向左拖動結(jié)束時，判斷全局變量y的值是多少，從而知道拖動開始時哪張卡片正處于頁面中間，從而切換為下一張卡片。向右拖動結(jié)束的事件亦然，不同是切換為上一張卡片。例如：當(dāng)向左拖動結(jié)束時，y=一，則證明拖動開始時第一張卡片處于頁面中間，則該切換為第二張卡片。

三、加載卡片動效

實現(xiàn)的交互：當(dāng)最后一張卡片（加載卡片）處于頁面中間時，卡片中的六條橫線以不同的速度向右滑動，加載完成后將跳轉(zhuǎn)到新頁面。

思路：當(dāng)最后一張卡片處于頁面中間時，以不同的時長向右滑動顯示這六條橫線，顯示完橫線后將跳轉(zhuǎn)到四張卡片。

實現(xiàn)過程：

因為只能是向左拖動時才能切換最后一張卡片（點擊箭頭也可以，下面再實現(xiàn)），所以在主面板向左拖動的如果y值=八時設(shè)置加載交互。

等待300毫秒是為等卡片已切換為第九張卡片時才開始執(zhí)行加載動效；等待1600毫秒是為讓加載動效完成了再跳轉(zhuǎn)到新的卡片，最后隱藏掉橫線是為了下一次加載動效。

四、箭頭交互

實現(xiàn)的交互：點擊每張卡片對應(yīng)的箭頭時切換為下一張卡片；切換卡片的同時切換對應(yīng)的箭頭；點擊第八張卡片對應(yīng)的箭頭時產(chǎn)生加載的交互；判斷用戶是否已瀏覽完推薦的新卡片。

思路：上述的前三種交互實現(xiàn)很簡單，關(guān)鍵是判斷用戶是否已瀏覽完所推薦的新卡片，從而判斷當(dāng)頁面顯示第一、二、三張卡片時的箭頭是否顯示數(shù)字。為此，添加全局變量c，當(dāng)頁面顯示為第四張卡片時則證明用戶已瀏覽完新卡片，從而設(shè)定c=1。

實現(xiàn)過程：

（1）判斷用戶是否已瀏覽完新卡片：有兩種情況會切換為卡片四，向左拖動和點擊箭頭動態(tài)面板的卡片3狀態(tài)中的帶有數(shù)字的箭頭元件。為此，分別對這兩種情況設(shè)置如下事件。

（2）切換卡片同時切換對應(yīng)的箭頭：通過（1）已知用戶是否已瀏覽為新的卡片。所以當(dāng)頁面處于第1、2張卡片向左拖動結(jié)束時需分情況處理；當(dāng)頁面處于第2、3、4張卡片向右拖動結(jié)束時也需分情況處理。

其他情況的向左向右拖動結(jié)束則只需把箭頭動態(tài)面板切換為對應(yīng)的狀態(tài)即可；點擊不同狀態(tài)的箭頭動態(tài)面板時只需要切換為下一狀態(tài)即可把卡片與箭頭對應(yīng)上來（點擊卡片1、2的無數(shù)字狀態(tài)時切換為下一狀態(tài)的無數(shù)字狀態(tài)；有數(shù)字的切換為下一狀態(tài)的有數(shù)字狀態(tài)）；點擊箭頭動態(tài)面板的卡片8狀態(tài)時設(shè)置卡片加載交互。

至此，已完成此案例的全部交互。

作者：稻草人，產(chǎn)品經(jīng)理。

本文由 @稻草人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議