在Axure的設(shè)計(jì)中，隨機(jī)函數(shù)是比較常用的函數(shù)類(lèi)型之一。這篇文章，作者就分享了用隨機(jī)函數(shù)設(shè)計(jì)和交互的整個(gè)過(guò)程，供大家參考學(xué)習(xí)。

這期內(nèi)容，我們將深入探討Axure中隨機(jī)函數(shù)的用法。

一、隨機(jī)函數(shù)

創(chuàng)建隨機(jī)函數(shù)所需的元件

1.打開(kāi)一個(gè)新的 RP 文件并在畫(huà)布上打開(kāi) Page 1。

2.在元件庫(kù)中拖出一個(gè)矩形元件。

做到这三点挑战，产品经理只会不断升值

好的产品经理是很稀缺的，懂用户、懂商业、懂数据的产品经理走出互联网，依然是抢手货。相反，如果只做简单传话、低效执行、浅层思考的产品经理，恐怕走不过未来3-5年的洪流。

查看详情 >

3.選中矩形元件，樣式窗格中，將矩形元件命名為“數(shù)值”，線寬設(shè)置為0，輸入文本“數(shù)值”。

4.在元件庫(kù)中拖出一個(gè)按鈕元件，樣式窗格中，將填充色設(shè)置為藍(lán)色（#0052D9），輸入文本“生成隨機(jī)數(shù)”。

二、創(chuàng)建交互

創(chuàng)建生成隨機(jī)數(shù)按鈕交互狀態(tài)

1.選中生成隨機(jī)數(shù)按鈕元件，在交互窗格點(diǎn)擊新建交互，單擊時(shí)，設(shè)置數(shù)值元件文本，插入一個(gè)函數(shù)變量。

2.插入這段函數(shù)：[[(Math.random()*3+1).toFixed(1)]]，這里設(shè)置的是1-4隨機(jī)出數(shù)，如果想改變隨機(jī)出數(shù)的區(qū)間，改變Math.random()*3+1中“3+1”字段就可以，例如想設(shè)置1-10之間隨機(jī)出數(shù)，就改成：[[(Math.random()*9+1).toFixed(1)]]，設(shè)置1-100之間隨機(jī)出數(shù)，就改成：[[(Math.random()*99+1).toFixed(1)]]。

3.點(diǎn)擊確認(rèn)，保持變量函數(shù)。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面中，鼠標(biāo)單擊生成隨機(jī)數(shù)按鈕，會(huì)生成1-4的隨機(jī)數(shù)。

一個(gè)生成隨機(jī)數(shù)的交互就做好了，但是我們發(fā)現(xiàn)，這個(gè)生成隨機(jī)數(shù)的交互，生成的是小數(shù)，那么，如果我們要生成整數(shù)要怎么做呢?

1.選中文本框和按鈕原件，復(fù)制粘貼到畫(huà)布上，將文本框內(nèi)“數(shù)值”文本改為“整數(shù)”便于區(qū)分。

三、修改交互

改生成隨機(jī)數(shù)按鈕交互狀態(tài)

1.選中生成隨機(jī)數(shù)按鈕元件，在交互窗格點(diǎn)擊設(shè)置文本交互，將變量函數(shù)：[[(Math.random()*3+1).toFixed(1)]]，改成：[[Math.floor((Math.random()*3+1).toFixed(1))]]。

*這段函數(shù)增加了“Math.floor”和一對(duì)小括號(hào)“（）”

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面中，鼠標(biāo)單擊生成隨機(jī)數(shù)按鈕，會(huì)生成1-4的隨機(jī)整數(shù)。

這里還有一個(gè)問(wèn)題，細(xì)心的同學(xué)應(yīng)該發(fā)現(xiàn)了，這個(gè)隨機(jī)數(shù)下一次出數(shù)的時(shí)候會(huì)出現(xiàn)同樣的數(shù)值，這個(gè)問(wèn)題，我將用輪播圖案例來(lái)說(shuō)明。

四、排重隨機(jī)函數(shù)

創(chuàng)建隨機(jī)函數(shù)所需的元件

創(chuàng)建輪播圖

1.創(chuàng)建輪播圖的案例我之前有做過(guò)一期內(nèi)容，感興趣的同學(xué)，看完這期內(nèi)容，可以去復(fù)習(xí)一下過(guò)往內(nèi)容，這里就略過(guò)細(xì)節(jié)，大致操作就是準(zhǔn)備四張不同顏色的Bannner圖，用于區(qū)分。

2.在元件庫(kù)中拖出一個(gè)熱區(qū)元件，將元件命名為“比較”，并隱藏元件，用于接下來(lái)添加交互輔助比較數(shù)值。

創(chuàng)建交互

在創(chuàng)建交互之前，需要先添加兩個(gè)全局變量，變量可以隨便命名，只要自己能看懂就行。

創(chuàng)建Banner交互狀態(tài)

1.選中Banner動(dòng)態(tài)面板，在交互窗格中點(diǎn)擊創(chuàng)建交互，載入時(shí)，設(shè)置變量值，variable_2 值 為 [[Math.floor((Math.random()*3+1).toFixed(1))]]，點(diǎn)擊確定，保存。

創(chuàng)建比較交互狀態(tài)

1，選中輔助比較輔助元件，在交互窗格中點(diǎn)擊創(chuàng)建交互，單擊時(shí)，啟用情形判斷。

情形1：如果值于 variable_2 ==值于 variable_1，觸發(fā)事件，Banner 載入時(shí)。

情形2：否則如果 為 真， 等待 2500毫秒，設(shè)置Banner動(dòng)態(tài)面板 值 名稱(chēng)或序號(hào) State[[variable_2]] 逐漸 500毫秒。

等待 500毫秒，設(shè)置變量值 variable_1為[[variable_2]]，觸發(fā)事件，Banner 載入時(shí)

2.選中選中Banner動(dòng)態(tài)面板，在交互窗格中，添加觸發(fā)事件，比較 單擊時(shí)。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面中，輪播圖將隨機(jī)排重播放，每次播放的輪播圖都不一樣。

隨機(jī)函數(shù)的應(yīng)用場(chǎng)景還有很多，比如隨機(jī)點(diǎn)名，換一換等等。

預(yù)覽地址：https://q6ei95.axshare.com

好的，這期內(nèi)容到這里就結(jié)束。