本文教大家一個模擬真實搖骰子交互，一起來看看~

在做這個教學時有個重大發現，原來骰子的骰拼音不是“shǎi”而是“tóu”！這是比本教學更重要的內容。

你將會學會的交互效果圖：

你將學到的東西：

使用隨機數字來實現一些騷操作通過動態面板來控制停和不要停文本框的妙用文末有彩蛋本教學原理：

通過動態面板循環計算產生1-6隨機數賦值到文本框；文本框文本改變來控制動態面板要展示的骰子數。

第一步：通過動態面板計算隨機數字

1. 繪制如下三個元件

動態面板，創建2個狀態，命名[控制隨機]文本框，命名[隨機數字]按鈕，命名[開關按鈕]

2. 設置[控制隨機]動態面板交互

①[控制隨機]新建交互狀態改變時，設置文本[隨機數字]文本框=[[Math.ceil(6*Math.random())]]

函數解釋：

Math.random：即隨機產生0-1內的隨機數，前面加6*，即隨機產生0-6隨機數

Math.ceil(x):即取整

本函數的意思是取0-6之間的隨機正整數

3. 設置[開關按鈕]交互

①[開關按鈕]點擊時，情形1，如果[按鈕開關]元件文字為“開”，則執行以下條件：設置[控制隨機]動態面板到下一項，循環間隔100ms。設置文本[開關按鈕]元件文字為“關”

②[開關按鈕]點擊時，情形2，如果[按鈕開關]元件文字為“關”，則執行以下條件：設置[控制隨機]動態面板停止循環。設置文本[開關按鈕]元件文字為“開”

④看看效果

每100ms變換一次數字

第二步：繪制骰子和用文本框控制骰子

繪制骰子

①繪制六個骰子

②填充顏色后，創建一個動態面板，命名[骰子]，添加六個狀態，分別把六個骰子放到六個狀態里。

③設置[控制隨機]輸入文本框交互，文本改變時，添加六個情形，當[隨機數字]輸入文本框=1時，設置[骰子]動態面板為狀態1，依次類推。

設置六個情形：

④看看效果

這樣[骰子]動態面板會隨著文本框的改變而改變，這就是利用輸入文本框的“文本改變時”的妙用。

第三步：利用隨機數模擬真實移動

由于骰子在運動過程中，既有旋轉，又有位移，且隨開關控制，其實很簡單，我們只需要在[控制隨機]動態面板增加兩個動作：

旋轉[骰子]經過60°，動畫線性100ms

移動[骰子]到達X=[[Math.ceil(100*Math.random())]]，Y=[[Math.ceil(100*Math.random())]]，動畫線性100ms。這個函數的意思就是移動[骰子]在100*100范圍內隨機移動

看看效果：

最終效果1：

最終效果2：

大家思考一下怎么實現，原理很簡單

這次教學就到這里，我有時候做交互只是覺得好玩而已，同時可以鍛煉邏輯思維能力。很多同學都反映源文件打不開，因為我用的是9.0的，習慣了也挺好用的，有疑問歡迎留言。

提取碼：8oy5

本文由 @索大佩羅娜 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

舉報/反饋

總結

以上是生活随笔為你收集整理的html5模拟真实摇骰子,Axure教程：模拟真实摇骰子交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。