classification: 實(shí)戰(zhàn)axure
title: 在axure中使用兩種不同的方法實(shí)現(xiàn)toggle組件
tag: toggle dynamic panel move by 方法
author: 嘟嘟寶嘟
Date: 2020年12月4日
在axure中使用兩種不同的方法實(shí)現(xiàn)toggle組件
在實(shí)際原型設(shè)計(jì)中，一般都使用動態(tài)面板實(shí)現(xiàn)toggle組件的動態(tài)效果，其實(shí)還可以使用組件的move by 方法實(shí)現(xiàn)toggle組件的動態(tài)效果。
兩種方法各有優(yōu)缺點(diǎn)：
動態(tài)面板事件的邏輯簡單，代碼少，但是需要使用的組件較多，幾乎沒有動態(tài)效果（開關(guān)動作）；
使用組件的move by方法，基礎(chǔ)組件較少（是動態(tài)面板方式的一半），可以做出開關(guān)移動的效果，但是對基礎(chǔ)組件的樣式效果設(shè)置和事件的代碼邏輯比較復(fù)雜。
今天就介紹用這兩種方法實(shí)現(xiàn)toggle組件的案例。
1. 使用動態(tài)面板實(shí)現(xiàn)toggle組件
使用動態(tài)面板實(shí)現(xiàn)toggle組件需要一個(gè)動態(tài)面板組件，為動態(tài)面板組件設(shè)置兩個(gè)狀態(tài)：開和關(guān)，每個(gè)狀態(tài)內(nèi)包含三個(gè)基礎(chǔ)組件，兩個(gè)shape組件畫出toggle開關(guān)的基礎(chǔ)樣式，一個(gè)label組件表明當(dāng)前開關(guān)的狀態(tài)。
動態(tài)面板的on狀態(tài):
動態(tài)面板的off狀態(tài)：
然后設(shè)置動態(tài)面板的click or tap 事件：
運(yùn)行這個(gè)組件，我們看到當(dāng)點(diǎn)擊toggle組件的時(shí)候，開關(guān)實(shí)現(xiàn)了打開和關(guān)閉的效果。
但是當(dāng)點(diǎn)擊中間的滑塊或開關(guān)狀態(tài)文字的時(shí)候，組件狀態(tài)也發(fā)生了改變，而實(shí)際系統(tǒng)的toggle組件這個(gè)時(shí)候的狀態(tài)不會發(fā)生，只會在點(diǎn)擊滑塊的旁邊顏色區(qū)域時(shí)，滑塊才會滑動改變狀態(tài)。
2. 使用組件的move by方法，實(shí)現(xiàn)toggle組件
這種方法只需要定義三個(gè)基礎(chǔ)組件，兩個(gè)shape組件和一個(gè)label組件：
一個(gè)帶有顏色改變的大的shape組件作為toggle的滑軌，一個(gè)圓形shape組件作為toggle的滑塊，label組件表明當(dāng)前開關(guān)的狀態(tài)。
- 首先設(shè)置作為
滑軌的shape組件的顏色和樣式效果，我把基本效果設(shè)置為紅色關(guān)閉狀態(tài)（這是因?yàn)?code>selceted效果對應(yīng)on狀態(tài)比較符合語義邏輯），selected style設(shè)置為綠色，默認(rèn)展示selected style。
- 然后定義
滑軌shape組件的click or tap事件：
在move方法中使用的是相對位置by而不是絕對位置to，橫向移動距離只要大于滑軌組件的尺寸就可以，設(shè)置移動的邊界滑塊就不會滑出滑軌組件。500ms的滑動時(shí)間只是為了看到滑動效果，實(shí)際設(shè)置時(shí)可以設(shè)為100ms。
運(yùn)行這個(gè)組件，當(dāng)我們點(diǎn)擊滑塊或者滑軌之外時(shí)，toggle組件不會有反應(yīng)，當(dāng)點(diǎn)擊滑軌時(shí)，滑塊會有明顯的滑動開關(guān)效果。
