中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

一、效果展示

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

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

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

原型地址：https://toqk0p.axshare.com

二、制作教程

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

1. 中獎圖案

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

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

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

2. 中獎金額區(qū)

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

3. 刮獎區(qū)

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

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

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

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

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

4.可刮區(qū)

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

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

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

最上面我們要放一層動態(tài)面板，因?yàn)橹挥袆討B(tài)面板有拖動的效果。

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

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

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

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

5.其他元件

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

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

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

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