Axure怎么設(shè)計(jì)開(kāi)關(guān)按鈕效果?
我要評(píng)論Axure中想要繪制開(kāi)關(guān)按鈕，該怎么設(shè)計(jì)開(kāi)關(guān)呢？下面我們就來(lái)看看詳細(xì)的教程。
原型設(shè)計(jì)工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊(cè)碼+安裝教程)
- 類(lèi)型：輔助設(shè)計(jì)
- 大?。?/span>90.5MB
- 語(yǔ)言：簡(jiǎn)體中文
- 時(shí)間：2018-05-24
”開(kāi)關(guān)“按鍵比較簡(jiǎn)單，如下圖，新建一個(gè)”圓形“及一個(gè)”矩形“
設(shè)置”圓形“尺寸為28*28，命名為round；設(shè)置”矩形“尺寸為70*32，命名為block，填充色#999999，圓角半徑35，字體顏色#FFFFFF，文字內(nèi)容”OFF“，右對(duì)齊
另單獨(dú)再設(shè)置”矩形：block“的選中時(shí)，填充色為#009900
按下圖方式布局方式組合”圓形：round“和”矩形：block“，并命名此組合為”on-off“
布局、組合結(jié)束后，下來(lái)就是”開(kāi)關(guān)“按鍵的交互動(dòng)作。”組合：on-off“的”鼠標(biāo)點(diǎn)擊時(shí)“的交互動(dòng)作：設(shè)置”當(dāng)前控件“的選中狀態(tài)為”切換（toggle）“方式
”圓形：round“的”選中時(shí)“的交互動(dòng)作：移動(dòng)”圓形：round“到指定位置（X,Y）
設(shè)置“元件：block”為局部變量LVAR1，所以X的值為[[LVAR1.right-This.width-3]]
Y的值為[[This.y]]
”圓形：round“的”取消選中時(shí)“的交互動(dòng)作：移動(dòng)”圓形：round“到指定位置（X,Y）
設(shè)置“元件：block”為局部變量LVAR1，所以X的值為[[LVAR1.left+3]]
Y的值依舊為[[This.y]]
”矩形：block“的”選中時(shí)“的交互動(dòng)作：設(shè)置”矩形：block“的值為”ON“：富文本格式設(shè)定為左對(duì)齊，文字粗體
”矩形：block“的”取消選中時(shí)“的交互動(dòng)作：設(shè)置”矩形：block“的值為”OFF“：富文本格式設(shè)定為右對(duì)齊，文字粗體
至此，基本設(shè)置就結(jié)束了~很是簡(jiǎn)單，明了。這個(gè)是一個(gè)默認(rèn)”關(guān)閉“的效果，默認(rèn)”開(kāi)啟“效果原理類(lèi)似，這里就不再累述了
以上就是axure設(shè)計(jì)開(kāi)關(guān)按鈕的教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
相關(guān)文章
Axure RP 8怎么控制不同顏色元件移動(dòng)？Axure RP 8中想要控制兩個(gè)不同顏色的柱子，該怎么操作呢？下面我們就來(lái)看看詳細(xì)的教程，很簡(jiǎn)單，需要的朋友可以參考下2017-05-08
Axure RP 8怎么控制矩形元件顛倒旋轉(zhuǎn)?
Axure RP 8怎么控制矩形元件顛倒旋轉(zhuǎn)？Axure RP 8中想想要使用按鈕控制一個(gè)矩形的旋轉(zhuǎn)，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，很簡(jiǎn)單，需要的朋友可以參考下2017-05-08
axure怎么制作圖片自動(dòng)播放的效果？axure中想要制作一個(gè)圖片自動(dòng)播放的效果，該怎么設(shè)計(jì)呢？下面我們就來(lái)看看詳細(xì)的教程，很簡(jiǎn)單，需要的朋友可以參考下2017-05-05
Axure RP 8怎么設(shè)置動(dòng)態(tài)面板顯示隱藏對(duì)象?
Axure RP 8怎么設(shè)置動(dòng)態(tài)面板顯示隱藏對(duì)象？Axure RP 8中設(shè)計(jì)的網(wǎng)頁(yè)想要隱藏元件，該怎么實(shí)現(xiàn)呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-04-28
AXURE怎么使用中繼器實(shí)現(xiàn)樣式重復(fù)但內(nèi)容不同的效果?
AXURE怎么使用中繼器實(shí)現(xiàn)樣式重復(fù)但內(nèi)容不同的效果？一般網(wǎng)站中我們都會(huì)遇到用一個(gè)模塊顯示不同內(nèi)容的情況，該怎么使用AXURE實(shí)現(xiàn)呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋2017-04-25
axure怎么設(shè)計(jì)菜單橫向隱藏與顯示的效果?
axure怎么隱藏菜單橫向隱藏與顯示的效果？今天想要和大家分享一些關(guān)于axure顯示隱藏效果的實(shí)現(xiàn)方法，我們就以隱藏菜單為例，需要的朋友可以參考下2017-04-23
Axure怎么設(shè)計(jì)手機(jī)短信倒計(jì)時(shí)效果?
Axure怎么設(shè)計(jì)手機(jī)短信倒計(jì)時(shí)效果？Axure中想要制作倒計(jì)時(shí)效果，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，很簡(jiǎn)單，需要的朋友可以參考下2017-04-23
axure怎么用中繼器制作微博聯(lián)系人效果？想要仿照微博的聯(lián)系人樣式制作一個(gè)這種效果，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-04-23
axure怎么給文字設(shè)置跑馬燈效果？axure中想讓文字實(shí)現(xiàn)跑馬燈效果，該怎么實(shí)現(xiàn)呢》下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-04-23
axure怎么使用動(dòng)態(tài)面板制作淘寶圖片輪播效果?
axure怎么使用動(dòng)態(tài)面板制作淘寶圖片輪播效果？我們經(jīng)?？吹教詫氈杏袌D片輪播的效果，該怎么設(shè)計(jì)這種效果呢？下面我們就來(lái)看看通過(guò)axure實(shí)現(xiàn)的教程，需要的朋友可以參考下2017-04-23
