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