橡皮擦的擦除效果是系統(tǒng)常見的效果，本文以會議刮獎原型為案例，分析如何在Axure中制作橡皮刷的效果，一起來看一下吧。

橡皮擦的擦除效果是系統(tǒng)常見的效果，在可以畫圖編輯的系統(tǒng)中或者是在抽獎刮獎的系統(tǒng)中非常常見。所以今天和大家分享在Axure中如何制作橡皮刷的效果，我們會議刮獎原型為案例，教大家制作出一個刮獎效果的高保真原型模板。

一、效果展示

1、鼠標移入對應(yīng)區(qū)域，拖動鼠標可以刮開上層，查看中獎信息；

2、刮獎區(qū)域和中間圖案是隨機抽取生成的，所以每次中間圖案和刮去圖案金額都是隨機的；

3、能根據(jù)隨機的中獎圖案和刮出的隨機圖片自動計算出中獎金額。

二、制作教程

這個原型模板主要分成4個區(qū)域，刮獎區(qū)、中獎圖案和中獎金額和覆蓋在上方的可刮區(qū)。

1. 中獎圖案

放置一個動態(tài)面板，面板里增加多個狀態(tài)，每個狀態(tài)對應(yīng)一張動物圖片，案例中是7種動物，所以需要7個狀態(tài)，每個狀態(tài)用1~7的數(shù)字分別命名，因為在載入時，我們會通過隨機數(shù)抽取一個1-7之間的數(shù)，這里我們用random函數(shù)就可以隨機抽取一個0-1之間的隨機數(shù)，然后我們乘以7，相當于獲取一個0-7之間的隨機數(shù)，最后用Math.ceil(x)函數(shù)向上取整就可以獲取到0-7之間的隨機整數(shù)。

我們用一個默認隱藏的文本記錄這個整數(shù)，然后設(shè)置面板狀態(tài)進入和這個隨機數(shù)一樣的狀態(tài)頁。

最后我們用添加行的交互，對刮獎區(qū)的中繼器添加12行，每行同樣用上述的方便設(shè)置一個0-7的隨機整數(shù)到Column0中。

2. 中獎金額區(qū)

中獎金額很簡單，就是一個元寶圖標和文本標簽組成。

3. 刮獎區(qū)

我們用中繼器來制作，中繼器內(nèi)部放置一個動態(tài)面板，面板里增加多個狀態(tài)，每個狀態(tài)對應(yīng)一張動物圖片，案例中是7種動物，所以需要7個狀態(tài)，每個狀態(tài)命名，方便后續(xù)交互，案例中是用1~7的數(shù)字分別命名，后續(xù)會通過隨機函數(shù)獲取一個0-7的隨機數(shù)，從而顯示對應(yīng)的圖案。這里和上面中獎圖案的動態(tài)面板是一致的。

另外還需要，下方增加一個金元寶圖標和文本標簽。

中繼器表格里默認Column0列即可，因為中獎區(qū)是12個內(nèi)容，上面在中獎圖案載入的時候，就新增了12行，Column0列里的隨機整數(shù)。所以在中繼器每項加載時，我們用設(shè)置面板狀態(tài)的交互，設(shè)置面板狀態(tài)到和Column0的隨機整數(shù)一致的頁面，然后我們還要設(shè)置一個隨機金額，同理我們用random函數(shù)獲取一個隨機金額，案例中是1-999元。

然后我們要設(shè)置中間金額的值了，中繼器第一行加載的時候，中獎金額的文本是0，所以我們可以寫條件，如果前面中間圖片抽取的隨機數(shù)字，和column0列隨機抽取的數(shù)字一致，就代表抽中了，所以我們就把該行隨機抽取的中間金額+他原來的值。例如第1行抽中100,中獎金額0+100=100，第二行沒抽中，所以中獎金額是100，第三行抽中了205，中獎金額=205+100=305……

這樣隨機抽取圖案，以及自動計算中獎金額就完成了，最后我們要做覆蓋在上方的可刮區(qū)。

4.可刮區(qū)

底部我們用多個正方形矩形拼在一起，如下圖所示：

案例中是10*10的矩形，大家可以根據(jù)需要修改，矩形越少效果越好，但是矩形太小就會導(dǎo)致矩形數(shù)量和交互增多，容易導(dǎo)致卡頓。

上方是我們的橡皮刷，我們用矩形制作即可。

最上面我們要放一層動態(tài)面板，因為只有動態(tài)面板有拖動的效果。

鼠標移入動態(tài)面板就顯示橡皮刷，移出就隱藏。

然后做一個橡皮刷跟隨鼠標移動的交互，我們可以用cursor函數(shù)獲取鼠標的實時坐標，然后減去橡皮刷一般的高度或者寬度，就可以讓橡皮刷的中心點跟隨鼠標。

鼠標拖動時，我們先用移動的交互，讓橡皮刷跟隨鼠標拖動，然后在設(shè)置條件，如果橡皮刷碰到第一個正方形，我們就用隱藏的交互，設(shè)置第一個正方形隱藏，如果碰到第2個正方形，我們就用隱藏的交互，設(shè)置第2個正方形隱藏……一次類推直到最后一個。

我們完成一個后，可以復(fù)制多兩個，分別放在三個區(qū)域上面即可。

5.其他元件

其他元件，其實就是美化的元件，包括背景、圖標、分割線、文字等內(nèi)容，大家可以根據(jù)自己需要添加。

這里還涉及再來一次的按鈕，這個按鈕點擊后，其實我們需要將頁面還原。一般人會用顯示的操作顯示所有矩形，然后用刪除行刪除刮獎區(qū)里所有的行，在觸發(fā)中獎圖片區(qū)載入的交互，這樣相當于重新隨機。但是我們可以不用這么麻煩，直接一個打開鏈接，選擇刷新頁面即可。

這樣我們就制作完成了，下次使用時，我們只需要在動態(tài)面板里修改中獎圖片，就可以直接使用了，如果用橡皮刷區(qū)域可以直接復(fù)制使用。

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