Axure8教程——動態儀表盤

0 評論 4419 瀏覽 6 收藏 6 分鐘

本文分享了用Axure8制作動態儀表盤的方法,根據設置的數值,儀表盤指針可以旋轉到相應的值位置,一起來學習一下吧。

本次分享的的案例是Axure8制作的動態儀表盤,根據設置的數值,儀表盤指針旋轉到相應的值位置。

預覽及下載地址:https://2qiuwg.axshare.com

一、制作原型

1、首先創建空白頁面,在工作區域拖入一個矩形元件,并將其形狀修改為扇形的樣子,這里在屬性中找到形狀設置即可,如下圖所示:

設置其大小設置為312*312,顏色為:#9F7344,如下圖所示:

2、在工作區域拖入第二個矩形元件,并將其形狀修改為扇形的樣子,這里在屬性中找到形狀設置即可,其大小設置312*312,顏色為:#FBBB0C;如下圖所示:

3、在工作區域拖入第三個矩形元件,并將其形狀修改為扇形的樣子,這里在屬性中找到形狀設置即可,其大小設置312*312,顏色為:#9CA837;如下圖所示:

4、為儀表盤設置數據刻度,如圖:

5、接下來制作指針,在工作區域拖入第四個矩形元件,并將其形狀修改為三角形的樣子,設置大小為:6156;拖入第五個矩形并將其形狀修改為橢圓形的樣子,設置大小為1616,設置顏色為#FF4848,并把組合在一起命名為“指針”,如下圖所示:

6、儀表盤區域拖入兩個動態面板,命名為“1”和“2”,設置兩個狀態,兩個動態面板設置為隱藏狀態,其作用是控制指針的動態,拖入一個文本框命名為“3”,其初始值為0,用來顯示儀表盤刻度,如下圖所示:

原型元件制作完畢,接下來對元件進行交互設置。

二、交互設置

1、動態面板“1”設置

選擇動態面板“1”,對其”狀態改變時“進行交互設置:

判斷文本框“3”的值,其值可以為任意值,根據需要進行設置,例如:如果值設置為小于75,其指針指向75后停止,在這設置為小于100,設置文本框“3”的值為[[LVAR1+1]],否則停止循環,并對其”載入時”事件進行設置,如下圖所示:

2、動態面板“2”設置

選擇動態面板“2”,對其”狀態改變時“進行交互設置:判斷文本框“3”的值,其值如果大于0則設置文本框“3”的值為:[[LVAR1-1]],否則停止循環,如下圖所示:

3、文本框“3”設置

選擇文本框“3”,對其”文本改變時“進行交互設置:

所有設計完畢。

本文由@產品纖纖 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!