Axure教程:模擬真實搖骰子交互

6 評論 3320 瀏覽 6 收藏 7 分鐘

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

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

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

Axure教學之模擬真實搖骰子交互

你將學到的東西:

  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. 按鈕,命名[開關按鈕]

Axure教學之模擬真實搖骰子交互

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

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

函數解釋:

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

Math.ceil(x):即取整

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

Axure教學之模擬真實搖骰子交互

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

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

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

Axure教學之模擬真實搖骰子交互

④看看效果

每100ms變換一次數字

Axure教學之模擬真實搖骰子交互

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

繪制骰子

①繪制六個骰子

Axure教學之模擬真實搖骰子交互

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

Axure教學之模擬真實搖骰子交互

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

Axure教學之模擬真實搖骰子交互

設置六個情形:

Axure教學之模擬真實搖骰子交互

④看看效果

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

Axure教學之模擬真實搖骰子交互

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

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

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

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

Axure教學之模擬真實搖骰子交互

看看效果:

Axure教學之模擬真實搖骰子交互

最終效果1:

Axure教學之模擬真實搖骰子交互

最終效果2:

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

Axure教學之模擬真實搖骰子交互

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

源文件下載地址:

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

提取碼:8oy5

 

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

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 第二步的3,文本改變時這個條件,我的axure9.0中為什么沒有找到這個條件呢

    來自北京 回復
    1. 要用文本框組件才有

      來自福建 回復
  2. ?? 看完一篇原型設計文章啦,感覺還是不太會?

    想從0基礎開始學習Axure么?推薦你找Axure實戰(zhàn)班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:大禮包

    領取原型設計大禮包,多學多練,你也能成為原型設計高手哦!

    來自廣東 回復
  3. 好頂贊!

    來自四川 回復
    1. 哈哈

      來自福建 回復
    2. 第二步的3,文本改變時這個條件,我的axure9.0中為什么沒有找到這個條件呢

      來自北京 回復