之前在做微信讀書的原型時被書城搖一搖的加載交互效果卡了兩天的時間，最后終于想出如何制作，本文將分享如何制作這樣的一個翻頁效果。

一、最終效果展示

體驗地址：點擊此處

交互說明：點擊“BUTTON”開始交互效果

下方的圖標開始用翻頁的形式切換至下一個圖標——循環(huán)效果。

二、制作方式

1. 繪制所需的原件

本文需要繪制一個用來觸發(fā)效果的按鈕，一個循環(huán)面板，和兩個用來作為基本素材的動態(tài)面板。

觸發(fā)按鈕就是普通的按鈕，實際的話可以換成一個搖一搖的圖標，但本文只是作為一個簡單的示范，所以就使用了Axure自帶的按鈕元件如下：

循環(huán)面板也是很簡單，直接拖入一個動態(tài)面板，然后添加兩個狀態(tài)用來當作循環(huán)使用，然后起名字叫循環(huán)面板。因為動態(tài)面板是不可見的，所以只要放在非觸發(fā)區(qū)域（在案例中就是除了觸發(fā)按鈕以外的區(qū)域）即可。

如下圖所示（1即循環(huán)面板）：

作為素材的動態(tài)面板稍微麻煩一點，首先是第一個動態(tài)面板，動態(tài)面板大小調整為和素材大小一樣，然后添加四個狀態(tài)（具體看效果，本文中的效果是四個圖標翻頁，所以有四個狀態(tài)）。每個狀態(tài)為一個圖標，但這個圖標素材要分為左右兩半，不然實現(xiàn)不了翻書效果。

在本文案例中，我將四個狀態(tài)中的圖標分別命名為綠山、紅心、發(fā)現(xiàn)、星星。State1是綠山，State2是紅心，State3是發(fā)現(xiàn)，State4是星星。

同時，State2、3、4中圖標素材的右半邊素材透明度需要改成0，因為如果不這樣設置同樣也無法實現(xiàn)翻書效果，State 1是呈現(xiàn)在最表面的效果所以一開始右半邊透明度不能為0，但在設置循環(huán)面板時同樣會將其設置為0。

如下圖所示：

第二個動態(tài)面板是重點，大小和第一個動態(tài)面板一樣，因為素材大小是一樣的。動態(tài)面板也設置為四個狀態(tài)，但是每個狀態(tài)素材跟第一個動態(tài)面板不一樣。動態(tài)面板2中State 1中的素材為動態(tài)面板1中State1中左半邊素材+State2中右半邊素材，即左綠山+右紅心。

依此類推，State2中的素材為左紅心+右發(fā)現(xiàn)，State3中的素材為左發(fā)現(xiàn)+右星星，State4中的素材為左星星+右綠山。如此設置的原因是因為上一層圖標在翻頁的過程中，會露出下一層的圖標。

如下圖所示：

然后將動態(tài)面板1置于動態(tài)面板2之上，兩個面板應該剛剛好重合。

最終效果如下圖所示：

2. 觸發(fā)按鈕的設置

觸發(fā)按鈕的設置很簡單，鼠標單擊時設置循環(huán)面板為向后循環(huán)，循環(huán)間隔為1000毫秒（這個間隔跟循環(huán)面板的設置有關，但1000毫秒翻頁速度就剛剛好，不會太快也不會太慢）。

如下圖所示：

3. 循環(huán)面板的設置

這里是最難的地方。

循環(huán)面板設置用例為狀態(tài)改變時。

添加條件，當動態(tài)面板1處于State 1 即處于綠山圖標時，設置綠山圖標右半邊不透明度為100，左半邊圖標不透明度為0，動態(tài)面板2狀態(tài)為State 1（雖然此時動態(tài)面板2初始狀態(tài)已經(jīng)處于State 1 了，但后面循環(huán)時動態(tài)面板就不會再處于State 1了），動態(tài)面板1則將State 1向左翻轉切換為State 2，時間為1000毫秒。

然后等待1000毫秒（等待翻頁效果完成），再將State 1中的綠山圖標右半邊不透明度設為0，左半邊不透明度設為100（此時動態(tài)面板1處于State 2 即紅山圖標狀態(tài)，因此State 1 中的變化不會表現(xiàn)出來）。

同樣的，當動態(tài)面板1處于State 2 時，對State 2 的圖片即紅山圖片進行動作設置，如下圖所示：

依此類推繼續(xù)設置動態(tài)面板1的State 3和State 4，設置完成即完成了這個效果的所有設置。

三、總結

該效果其實并不難，但邏輯上很抽象，需要不斷地去調試更改才能得到最后的效果。同時建議對素材取合適的命名，比如：對每個圖標的左右兩半邊都命名，避免設置時弄錯圖片。

在這個效果上可以再結合實際進行潤色，比如：翻頁結束時出現(xiàn)彈出窗口，如像微信讀書中的書籍推薦等，具體效果可以看這個地址中的“發(fā)現(xiàn)”-“書城”-“搖一搖”，有需要實現(xiàn)這個效果的小伙伴可以評論里留言。

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

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