2023年Axure高保真教程：橡皮擦的擦除效果-刮獎(jiǎng)原型

Axure高保真教程：橡皮擦的擦除效果——刮獎(jiǎng)原型橡皮擦的擦除效果是系統(tǒng)常見的效果，在可以畫圖編輯的系統(tǒng)中或者是在抽獎(jiǎng)刮獎(jiǎng)的系統(tǒng)中特別常見。所以今日和大家共享在Axure中如何制作橡皮刷的效果，我們會(huì)議刮獎(jiǎng)原型為案例，教大家制作出一個(gè)刮獎(jiǎng)效果的高保真原型模板。

一、效果展現(xiàn)

1、鼠標(biāo)移入對(duì)應(yīng)區(qū)域，拖動(dòng)鼠標(biāo)可以刮開上層，查看中獎(jiǎng)信息；

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

3、能依據(jù)隨機(jī)的中獎(jiǎng)圖案和刮出的隨機(jī)圖片自動(dòng)計(jì)算出中獎(jiǎng)金額。

原型地址：

二、制作教程

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

1.中獎(jiǎng)圖案

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

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

最終我們用添加行的交互，對(duì)刮獎(jiǎng)區(qū)的中繼器添加12行，每行同樣用上述的便利設(shè)置一個(gè)0-7的隨機(jī)整數(shù)到Column0中。

2.中獎(jiǎng)金額區(qū)

中獎(jiǎng)金額很簡(jiǎn)潔，就是一個(gè)元寶圖標(biāo)和文本標(biāo)簽組成。

3.刮獎(jiǎng)區(qū)

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

另外還需要，下方增加一個(gè)金元寶圖標(biāo)和文本標(biāo)簽。

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

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

這樣隨機(jī)抽取圖案，以及自動(dòng)計(jì)算中獎(jiǎng)金額就完成了，最終我們要做掩蓋在上方的可刮區(qū)。

4.可刮區(qū)

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

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

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

最上面我們要放一層動(dòng)態(tài)面板，由于只有動(dòng)態(tài)面板有拖動(dòng)的效果。

鼠標(biāo)移入動(dòng)態(tài)面板就顯示橡皮刷，移出就隱蔽。

然后做一個(gè)橡皮刷跟隨鼠標(biāo)移動(dòng)的交互，我們可以用cursor函數(shù)獵取鼠標(biāo)的實(shí)時(shí)坐標(biāo)，然后減去橡皮刷一般的高度或者寬度，就可以讓橡皮刷的中心點(diǎn)跟隨鼠標(biāo)。

鼠標(biāo)拖動(dòng)時(shí)，我們先用移動(dòng)的交互，讓橡皮刷跟隨鼠標(biāo)拖動(dòng)，然后在設(shè)置條件，假如橡皮刷遇到第一個(gè)正方形，我們就用隱蔽的交互，設(shè)置第一個(gè)正方形隱蔽，假如遇到第2個(gè)正方形，我們就用隱蔽的交互，設(shè)置第2個(gè)正方形隱蔽……一次類推直到最終一個(gè)。

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

5.其他元件

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

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

這樣我們就制作完成了，下