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

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

一、效果展示

1、滑鼠移入對應區域，拖動滑鼠可以刮開上層，查看中獎信息；

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

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

二、製作教程

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

1. 中獎圖案

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

我們用一個默認隱藏的文本記錄這個整數，然後設置面板狀態進入和這個隨機數一樣的狀態頁。

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

2. 中獎金額區

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

3. 刮獎區

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

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

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

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

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

4.可刮區

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

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

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

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

滑鼠移入動態面板就顯示橡皮刷，移出就隱藏。

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

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

我們完成一個後，可以複製多兩個，分別放在三個區域上面即可。

5.其他元件

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

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

這樣我們就製作完成了，下次使用時，我們只需要在動態面板里修改中獎圖片，就可以直接使用了，如果用橡皮刷區域可以直接複製使用。

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

本文由 @AI產品人 原創發布於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議

該文觀點僅代表作者本人，人人都是產品經理平台僅提供信息存儲空間服務。