axure怎么制作計時間選擇器效果?

當(dāng)涉及到時間時,偶爾會需要定時發(fā)送之類的功能,該怎么設(shè)計設(shè)計固定時間點的時間選擇器呢?下面我們就來看看詳細(xì)的教程。

原型設(shè)計工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊碼+安裝教程)
- 類型:輔助設(shè)計
- 大?。?/span>90.5MB
- 語言:簡體中文
- 時間:2018-05-24
1、首先我們拖動一個矩形框,按自己需求設(shè)計樣式,我這里設(shè)置懸停樣式及選中樣式為淺藍(lán)色效果,可命名為選擇時間框
2、接著拖動一個矩形作為底部面板,然后拖動幾個矩形作為時間數(shù)據(jù),矩形的懸停效果也為淺藍(lán)色。時間按需求設(shè)定,這里各15分鐘一個時間。
3、接著將時間組件的矩形組合,并轉(zhuǎn)換為動態(tài)面板
4、接著要實現(xiàn)選擇時間時的滾動效果,選擇動態(tài)面板然后右鍵選擇滾動條-垂直滾動。
5、以上基本效果設(shè)計好,接下來設(shè)計交互選中,邏輯主要如下:1、點擊選擇時間框,動態(tài)面板交替下拉推動顯示、推動上拉隱藏2、選擇時間,選擇時間框獲取到該選項數(shù)據(jù),并且動態(tài)面板推動上拉隱藏。
1)我們將動態(tài)面板設(shè)置為隱藏。
2)第二步新建時間選擇框的單擊時交互事件,如下圖,完成之后可點擊預(yù)覽看基本的交互效果。
3)雙擊進入動態(tài)面板,在每一個時間選項的矩形框,設(shè)計單擊交互事件,即選中時時間選擇框的文本值為當(dāng)前時間選項的文本,如下圖以8:15的為例設(shè)置為即可預(yù)覽效果。
6、值得注意的是最好利用變量去設(shè)置文本,不然每個時間的文本你都需要自己輸文字,所以利用變量的話其他時間的單擊事件直接復(fù)制黏貼的話就好了。
以上就是axure自定義設(shè)計時間選擇器效果的教程,希望大家喜歡,請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
相關(guān)文章
- Axure中想要制作一個升降序的效果,該怎么制作表格行,上下?lián)Q行調(diào)整排序的效果呢?下面我們就來看看詳細(xì)的教程,很簡單,需要的朋友可以參考下2018-08-20
Axure怎么設(shè)計網(wǎng)頁強密碼驗證效果?
Axure怎么設(shè)計網(wǎng)頁強密碼驗證效果?現(xiàn)在網(wǎng)頁的密碼越來越復(fù)雜,想要制作一個密碼驗證,該怎么制作這個網(wǎng)頁圓形呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-07-17- axure怎么設(shè)計QQ登錄界面交互效果?axure中設(shè)計網(wǎng)頁原型很簡單,該怎么設(shè)計qq登陸的頁面呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-07-17
- Axure怎么制作控件隨鼠標(biāo)移動的效果?Axure中創(chuàng)建的方框和熱區(qū)想要制作跟隨鼠標(biāo)移動的效果,該怎么制作呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-07-04
- axure下拉框光標(biāo)閃動效果怎么制作?很多網(wǎng)頁下拉輸入框中光標(biāo)都是閃爍的,等待輸入的效果,該怎么制作這個效果呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-06-28
- Axure RP怎么制作彈出菜單的效果?Axure中制作網(wǎng)頁原型很簡單,想要制作一個彈出式的菜單,該怎么弄制作這個效果呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-06-26
- Axure怎么制作鐘表秒針旋轉(zhuǎn)的效果?Axure中想要制作一個指針秒表轉(zhuǎn)動的效果,該怎么制作呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-06-11
AxureRP怎么制作草圖/頁面效果? Axure頁面草圖設(shè)置方法
AxureRP怎么制作草圖/頁面效果?Axure中想要制作一個頁面效果,該怎么制作呢?下面我們就來看看Axure頁面草圖設(shè)置方法,需要的朋友可以參考下2018-05-07Axure RP 8怎么使用中繼器實現(xiàn)自增效果?
Axure RP 8怎么使用中繼器實現(xiàn)自增效果?Axure RP 8中想要實現(xiàn)點擊按鈕數(shù)據(jù)自動+1的效果,該怎么實現(xiàn)呢?我們可以使用中繼器實現(xiàn)自增的效果,需要的朋友可以參考下2018-01-25Axure RP 8怎么模擬手機界面顯示應(yīng)用圖標(biāo)的效果?
Axure RP 8怎么模擬手機界面顯示應(yīng)用圖標(biāo)的效果?Axure RP 8中想要設(shè)計一個手機屏幕顯示應(yīng)用圖標(biāo)的效果,該怎么繪制這種界面呢?下面我們就來看看詳細(xì)的教程,需要的朋友可2018-01-17