這次我們來講解一個(gè)在動(dòng)態(tài)面板里面切換標(biāo)簽的效果。

一、準(zhǔn)備元件

1.首先打開一下Axure新建文件，拖取一個(gè)矩形，設(shè)置長度：375 px ，高度：50 px ；

2.然后輸入文本標(biāo)簽，這里的字體大小我們給它設(shè)置為14 px ，先把它置灰，這里我的字體色值為 #999999 ；

3.最后我們加一個(gè)小黑條，脫出一個(gè)矩形，設(shè)置長度：40 px ，高度：2 px 。給它名為小黑條。

以上樣式我是按照常規(guī)移動(dòng)端尺寸做的，不用說每個(gè)尺寸都跟我一樣，只要保存美觀即可。

好的，完成之前我們會(huì)得到以下的樣子：

二、設(shè)置文本的交互樣式

1.我們點(diǎn)擊全選所有文本 – 右鍵選擇交互樣式 – 選擇選中一項(xiàng) – 把字體顏色設(shè)置為 #333333，然后點(diǎn)擊確定；

2.第二步還是選擇所有文本 – 右鍵選擇設(shè)置選項(xiàng)組名稱 – 命名“標(biāo)簽切換”（這里可隨意命名）；

3.因?yàn)樾『跅l在標(biāo)題一的底部，我們需要單選標(biāo)題一 – 設(shè)置為默認(rèn)選中狀態(tài)；

這時(shí)候我們的前提條件就做好了，可以準(zhǔn)備下一步了。

三、設(shè)置交互效果

1.點(diǎn)擊交互效果 “鼠標(biāo)點(diǎn)擊時(shí)” ，設(shè)置該元件為 “true” （選中） ；

2.點(diǎn)擊移動(dòng)，選擇小黑條，設(shè)置移動(dòng)為絕對(duì)位置，X軸為 [[This+2]] , Y 軸為 [[This+28]] ，動(dòng)畫為線性，時(shí)間為250毫秒，點(diǎn)擊確定;

3.復(fù)制標(biāo)題一的動(dòng)態(tài)效果，粘貼到所有文本，這時(shí)切換標(biāo)簽的效果就完成了。

已完成的小伙伴，可以點(diǎn)擊預(yù)覽嘗試一下自己做的效果，感受一下自己做出來的成果！

四、進(jìn)階

已完成以上步驟的小伙伴們，可以嘗試一下進(jìn)階效果。咱們的標(biāo)題是《動(dòng)態(tài)面板：切換標(biāo)簽》，咱們是不是還沒有用到動(dòng)態(tài)面板呢？

下面來嘗試著做吧！

1.我們把文本再新增出 n 個(gè)（記得不要復(fù)制第一個(gè)默認(rèn)為選中狀態(tài)的標(biāo)題一），讓他超出 375 px 的長度，同時(shí)矩形需要跟上；

2.然后我們?nèi)x所有元件，右鍵點(diǎn)擊“轉(zhuǎn)換為動(dòng)態(tài)面板”，然后我們給這個(gè)動(dòng)態(tài)面板命名為“移動(dòng)面板”；

3.然后我們再在這個(gè)基礎(chǔ)上給它再加一個(gè)動(dòng)態(tài)面板，命名為“固定面板”，給他設(shè)置一個(gè)固定寬度為 375 px ，然后可以看到以下樣式；

4.這時(shí)候我們打開固定面板，按照 375 px 的寬度定一個(gè)中心點(diǎn)，拉一個(gè)標(biāo)尺;

5.以下的意思是點(diǎn)擊標(biāo)題一、二、三，新增一個(gè)條件為：移動(dòng)“移動(dòng)面板”至 X 軸為 0 ，Y 軸為 0 ；但到標(biāo)題四時(shí)， X 軸需要到中心點(diǎn)的地方，X 軸會(huì)變成 -42 ，Y 軸保持不變。以此類推…（看以下第一張圖）下一個(gè)是 -105 px 、 -168 px 、 -212 px 、 -212 px 、 -212 px （后面三個(gè)都為 -212 px 的原因是： “移動(dòng)面板” 的移動(dòng)不能少于固定面板右側(cè)的藍(lán)色線，看以下第二張圖）;

6.看一下設(shè)置移動(dòng)“移動(dòng)面板”的設(shè)置樣式（效果做在文本里）；

7.按照上面 “5” 的規(guī)則，把其他文本都加上移動(dòng)“移動(dòng)面板”的效果;

8.所有步驟完成了之后，可得到該效果（騰訊視頻鏈接）：

https://v.qq.com/x/page/c1342lfqgss.html?start=1

本文由 @李桂東 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自網(wǎng)絡(luò)