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

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

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

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

1.打開一個新的 RP 文件并在畫布上打開 Page 1。

2.在元件庫中拖出一個矩形元件。

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

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

二、創(chuàng)建交互

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

1.選中生成隨機(jī)數(shù)按鈕元件，在交互窗格點擊新建交互，單擊時，設(shè)置數(shù)值元件文本，插入一個函數(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.點擊確認(rèn)，保持變量函數(shù)。

預(yù)覽交互

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

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

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

三、修改交互

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

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

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

預(yù)覽交互

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

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

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

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

創(chuàng)建輪播圖

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

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

創(chuàng)建交互

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

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

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

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

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

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

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

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

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

預(yù)覽交互

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

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

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

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