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

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

你將會學(xué)會的交互效果圖：

你將學(xué)到的東西：

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

本教學(xué)原理：

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

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

1. 繪制如下三個元件

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

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

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

函數(shù)解釋：

Math.random()：即隨機產(chǎn)生0-1內(nèi)的隨機數(shù)，前面加6*，即隨機產(chǎn)生0-6隨機數(shù)

Math.ceil(x):即取整

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

3. 設(shè)置[開關(guān)按鈕]交互

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

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

④看看效果

每100ms變換一次數(shù)字

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

繪制骰子

①繪制六個骰子

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

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

設(shè)置六個情形：

④看看效果

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

第三步：利用隨機數(shù)模擬真實移動

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

旋轉(zhuǎn)[骰子]經(jīng)過60°，動畫線性100ms

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

看看效果：

最終效果1：

最終效果2：

大家思考一下怎么實現(xiàn)，原理很簡單

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

源文件下載地址：

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

提取碼：8oy5

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

題圖來自Unsplash，基于CC0協(xié)議