在閱讀類產(chǎn)品中，翻頁效果是一種很常見的交互動效，但因為涉及中繼器等設置，好多同學并不會用Axure操作。本文作者分享了設計翻頁效果的詳細課程，希望可以幫到大家。

翻書效果是一種模擬真實書本翻頁動作的視覺效果，常用于網(wǎng)頁設計和應用程序中，以增強用戶體驗和交互性。這種效果通常通過動畫和過渡效果來模擬書頁的翻轉(zhuǎn)，使用戶感覺像在真實的書本中翻頁一樣。

所以今天作者就教大家怎么在Axure里用中繼器制作制作一個書本翻頁效果，具體效果如下所示：

一、效果展示

1、鼠標左右滑動或點擊左右箭頭，可以切換至上一頁或下一頁，切換期間有模擬翻頁的動畫效果

2、如果翻到首頁再繼續(xù)向前翻頁，或者翻到尾頁繼續(xù)向后翻頁，就會彈出提示彈窗進行提醒

3、文字內(nèi)容在中繼器里標記，后續(xù)只需維護中繼器表格，即可填寫上對應的文字

二、制作教程

1. 材料準備

制作材料包括中繼器、動態(tài)面板、矩形、文本標簽、三角形

1.1 制作書框架

我們用矩形和三角形、以及文本標簽制作書的框架，三角形用于制作左右按鈕，矩形用于制作頁面灰色背景以及頁面內(nèi)容（文字上下左右居中），文本標簽，用于制作底部頁碼

如下圖所示擺放，如果只是做左右滑動效果的話，那三角形按鈕可以不需要

1.2 制作提示彈窗

用矩形制作提示彈窗，默認隱藏，放置在書本中部位置

1.3 制作翻書頁面

我們用動態(tài)面板制作翻書頁，需要制作兩個狀態(tài)頁面，狀態(tài)1是右側(cè)的頁面，我們可以把上面做好的右側(cè)頁面復制進去；狀態(tài)2是左側(cè)頁面，我們可以把上面做好的左側(cè)頁面復制進去。

然后放在書框架的上方，與里面的頁面對齊。

1.4 制作中繼器

我們新建一個中繼器，用來包括書本的內(nèi)容，no列對應頁數(shù)，content列對應該頁數(shù)的內(nèi)容

中繼器分頁設置我們設置每頁顯示項目數(shù)為2，這樣每次只會加載兩條

這樣基礎(chǔ)的材料就準備好了，后續(xù)交互需要一些默認隱藏的文本，后續(xù)交互制作過程中也會提及。

2. 設置交互

2.1 中繼器每項加載時的交互

我們是通過中繼器來傳值的，我們先要在中繼器外部準備3個默認隱藏的文本標簽，僅用于記錄中繼器里的文字，分別為記錄左側(cè)內(nèi)容，記錄左側(cè)內(nèi)容，記錄頁數(shù)

在中繼器每項加載時，如果是奇數(shù)行，那我們用設置文本的交互，將content列的值設置到記錄左側(cè)內(nèi)容的文本標簽里；如果是偶數(shù)行，我們就用設置文本的交互，將content列的值設置到記錄右側(cè)內(nèi)容的文本標簽里

我們還要記錄左側(cè)頁面的頁數(shù)，如果中繼器里加載的是奇數(shù)行，就用設置文本的交互，將no列的值設置到記錄頁數(shù)的文本里；如果是偶數(shù)列，那我們還要將no列的值先減一，再記錄。

2.2 設置頁面內(nèi)容

中繼器加載完成后，在記錄文本里獲取左右兩頁記錄的文本，我們就用設置文本的交互，在載入時，先等待中繼器加載完，然后用設置文本的交互，將對應的文本值分別設置到左右頁面里，這里需要注意，這里我們要把頁面內(nèi)容左右兩頁，以及用于翻頁的動態(tài)面板兩個state里面的兩頁都設置

2.3 設置頁碼

和前面一樣，中繼器加載完成后，我們獲取到記錄的左側(cè)頁面的頁數(shù)，所以我們用設置文本的交互，將左側(cè)頁面的頁面設置為當前記錄的文本，右側(cè)頁面設置問當前記錄的文本值加1，這里需要注意，這里我們要把頁面內(nèi)容左右兩頁，以及用于翻頁的動態(tài)面板兩個state里面的兩頁都設置。

設置好之后，默認加載的內(nèi)容就都能顯示了。

2.4 翻頁效果

這里我們以左箭頭為例展開說明，首先我們要判斷當前頁是否為第一頁，用pageindx函數(shù)就可以獲取到中繼器的頁碼了，如果是第一頁，我們就不能再往前翻頁了，所以就用顯示的交互，顯示提示彈窗，因為第一頁和最后一頁的提示，是共用一個提示彈窗的元件的，所以我們先用設置文本的交互，將里面的文本值設置為已經(jīng)是第一頁啦。

那如果不是在第一頁，那我我們用設置面板狀態(tài)的交互，將翻頁的動態(tài)面板設置到state2，相當于將左側(cè)的頁面放上來，左側(cè)的是透明的。

然后我們用設置當前頁面的交互，將中繼器設置為上一頁，這樣中繼器就會重新加載傳值，記錄在前面的三個文本里面，然后我們用設置文本的交互，要先改面板右側(cè)，就是翻到新頁面的內(nèi)容設置上去，默認在下面的右側(cè)內(nèi)容是暫時不用改；然后左側(cè)的內(nèi)容是要先改的，因為翻起來之后，就會看到下面的內(nèi)容，所以需要先更新。兩個頁面對應的頁面也是同樣的道理

然后準備好之后，我們開始翻頁，用設置面板狀態(tài)的交互，將動態(tài)面板設置到上一頁，動畫效果選擇向右翻轉(zhuǎn)，然后增加一個動畫時間，例如2s。

之后我們要懂等待事件，等待動畫結(jié)束，再用設置文本的將會，將前面剩下的兩個頁面，在設置回同樣的內(nèi)容，就是通過這樣一個時間差，以及先后顯示內(nèi)容的順序，完成翻頁的交互。

這里還有一點需要注意的是，如果在動畫時間里連續(xù)多次點擊按鈕，就會出現(xiàn)bug，所以在點擊的開始，我們可以用禁用的交互，將按鈕禁用，翻頁結(jié)束后再用啟用的交互，將按鈕啟用。

那右箭頭的交互也是一樣的里，只不過是和左箭頭相反，大家回去自行制作即可。

2.5 左右滑動翻頁效果

如果我們想通過鼠標拖動實現(xiàn)左右翻頁的效果，那我們只需要通過觸發(fā)事件，觸發(fā)左右翻頁的按鈕，這里需要注意的是，如果我們向左滑動，其實是想翻到下一頁，所以觸發(fā)的是右箭頭鼠標單擊時的交互；如果是向右滑動，其實是想翻到上一頁，所以觸發(fā)的是左箭頭鼠標單擊時的交互。

這樣我們就完成了中繼器制作翻書效果的原型模板，后續(xù)使用也很方便，只需要在中繼器表格里對應頁面的文字內(nèi)容，預覽時就可以自動生成效果。

那以上就是本期教程的全部內(nèi)容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。