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

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

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

你將學到的東西：

1. 使用隨機數字來實現一些騷操作
2. 通過動態(tài)面板來控制停和不要停
3. 文本框的妙用
4. 文末有彩蛋

本教學原理：

1. 通過動態(tài)面板循環(huán)計算產生1-6隨機數賦值到文本框；
2. 文本框文本改變來控制動態(tài)面板要展示的骰子數。

第一步：通過動態(tài)面板計算隨機數字

1. 繪制如下三個元件

1. 動態(tài)面板，創(chuàng)建2個狀態(tài)，命名[控制隨機]
2. 文本框，命名[隨機數字]
3. 按鈕，命名[開關按鈕]

2. 設置[控制隨機]動態(tài)面板交互

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

函數解釋：

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

Math.ceil(x):即取整

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

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

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

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

④看看效果

每100ms變換一次數字

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

繪制骰子

①繪制六個骰子

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

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

設置六個情形：

④看看效果

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

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

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

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

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

看看效果：

最終效果1：

最終效果2：

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

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

源文件下載地址：

鏈接：https://pan.baidu.com/s/1iZlcYaNN9IxqGDiC4xXruw

提取碼：8oy5

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

題圖來自Unsplash，基于CC0協議