classification: 實戰(zhàn)axure
title: 在axure中使用兩種不同的方法實現(xiàn)toggle組件
tag: toggle
dynamic panel
move by 方法
author: 嘟嘟寶嘟
Date: 2020年12月4日
在axure中使用兩種不同的方法實現(xiàn)toggle組件
在實際原型設計中渠鸽,一般都使用動態(tài)面板實現(xiàn)toggle組件的動態(tài)效果妹笆,其實還可以使用組件的move by 方法實現(xiàn)toggle組件的動態(tài)效果捶索。
兩種方法各有優(yōu)缺點:
動態(tài)面板事件的邏輯簡單胸哥,代碼少溃斋,但是需要使用的組件較多馍佑,幾乎沒有動態(tài)效果(開關(guān)動作)酒甸;
使用組件的move by方法堆巧,基礎組件較少(是動態(tài)面板方式的一半)礁叔,可以做出開關(guān)移動的效果牍颈,但是對基礎組件的樣式效果設置和事件的代碼邏輯比較復雜。
今天就介紹用這兩種方法實現(xiàn)toggle組件的案例琅关。
1. 使用動態(tài)面板實現(xiàn)toggle組件
使用動態(tài)面板實現(xiàn)toggle組件需要一個動態(tài)面板組件
煮岁,為動態(tài)面板組件設置兩個狀態(tài):開
和關(guān)
,每個狀態(tài)內(nèi)包含三個基礎組件涣易,兩個shape組件
畫出toggle開關(guān)的基礎樣式画机,一個label
組件表明當前開關(guān)的狀態(tài)。
動態(tài)面板
的on狀態(tài):
動態(tài)面板
的off狀態(tài):
然后設置動態(tài)面板
的click or tap
事件:
運行這個組件新症,我們看到當點擊toggle組件的時候步氏,開關(guān)實現(xiàn)了打開和關(guān)閉的效果。
但是當點擊中間的滑塊或開關(guān)狀態(tài)文字的時候徒爹,組件狀態(tài)也發(fā)生了改變荚醒,而實際系統(tǒng)的toggle組件這個時候的狀態(tài)不會發(fā)生,只會在點擊滑塊的旁邊顏色區(qū)域時隆嗅,滑塊才會滑動改變狀態(tài)腌且。
2. 使用組件的move by方法,實現(xiàn)toggle組件
這種方法只需要定義三個基礎組件榛瓮,兩個shape
組件和一個label
組件:
一個帶有顏色改變的大的
shape組件作為toggle的滑軌
铺董,一個圓形
shape組件作為toggle的滑塊
,label組件表明當前開關(guān)的狀態(tài)。
- 首先設置作為
滑軌
的shape組件的顏色和樣式效果精续,我把基本效果設置為紅色關(guān)閉狀態(tài)(這是因為selceted
效果對應on
狀態(tài)比較符合語義邏輯)坝锰,selected style
設置為綠色,默認展示selected style
重付。
- 然后定義
滑軌
shape組件的click or tap
事件:
在move方法中使用的是相對位置by而不是絕對位置to顷级,橫向移動距離只要大于滑軌組件的尺寸就可以,設置移動的邊界滑塊就不會滑出滑軌組件确垫。500ms的滑動時間只是為了看到滑動效果弓颈,實際設置時可以設為100ms。
運行這個組件删掀,當我們點擊滑塊或者滑軌之外時翔冀,toggle組件不會有反應,當點擊滑軌時披泪,滑塊會有明顯的滑動開關(guān)效果纤子。