Axure教程：首頁的左右滑動、點擊切換卡片、加載動畫等交互的實現

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

一、效果展示

1. 體驗地址：https://1qp369.axshare.com
2. 交互說明：鼠標拖動主面板代表滑動。

二、準備素材

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

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

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

調整好卡片之間的距離，並記錄當頁面顯示某個卡片時，拖動內容動態面板的x軸座標，本案例中當第一張至第九張卡片顯示在頁面中時，拖動內容動態面板的x輛座標分別“0，-330，-657，-987，-1312，-1640，-1968，-2295，-2616”。

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

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

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

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

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

二、左右滑動切換卡片

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

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

實現過程：

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

（2）當主面板拖動時，設置拖動內容相應移動，並設置好左右邊界。

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

三、加載卡片動效

實現的交互：當最後一張卡片（加載卡片）處於頁面中間時，卡片中的六條橫線以不同的速度向右滑動，加載完成後將跳轉到新頁面。

思路：當最後一張卡片處於頁面中間時，以不同的時長向右滑動顯示這六條橫線，顯示完橫線後將跳轉到四張卡片。

實現過程：

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

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

四、箭頭交互

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

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

實現過程：

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

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

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

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

作者：稻草人，產品經理。

本文由 @稻草人 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議