第一步:在【部件】面板中單擊【選項(xiàng)】按鈕,在彈出的菜單中選擇【創(chuàng)建部件庫(kù)】,見(jiàn)圖8。
(圖8)
第二步:在彈出的對(duì)話框中給自定義部件庫(kù)指定路徑位置,單擊【保存】后會(huì)打開(kāi)另一個(gè)Axure APP窗口,見(jiàn)圖9。
第三步:在左側(cè)【部件庫(kù)頁(yè)面】面板中雙擊【新部件1】,并給其重命名為switch button,見(jiàn)圖10。
(圖9)
(圖10)
第四步:使用矩形部件調(diào)整圓角角度,制作如圖11所示的形狀,部件尺寸可由讀者自定。昆明網(wǎng)站建設(shè)小編為了演示方便,在此將圓形尺寸設(shè)置為100×100像素,圓角矩形尺寸為200×104像素。并分別給4個(gè)形狀部件命名為slider_off、bg_off、slider_on和bg_on。
第五步:同時(shí)選中slider_on和bg_on,單擊右鍵,在彈出的關(guān)聯(lián)菜單中選中【轉(zhuǎn)換為動(dòng)態(tài)面板】,并給動(dòng)態(tài)面板命名為switch_button,然后同時(shí)選中slider_off和bg_off,單擊右鍵,選擇【剪切】,雙擊switch_button動(dòng)態(tài)面板,在彈出的【動(dòng)態(tài)面板狀態(tài)管理】對(duì)話框中單擊綠色加號(hào)圖標(biāo),新增一個(gè)狀態(tài)State2。雙擊State2,單擊右鍵,選擇【粘貼】,將剛剛剪切的slider_off和bg_off粘貼到設(shè)計(jì)區(qū)域,并設(shè)置其坐標(biāo)為(x:0,y:0),見(jiàn)圖12。
(圖11)
(圖12)
此時(shí),slider_on坐標(biāo)為(x:98,y:2),slider_on 坐標(biāo)為(x:2,y:2)。
第六步:選中slider_off部件,在右側(cè)部件【屬性】面板中雙擊【鼠標(biāo)單擊時(shí)】事件,在彈出的【用例編輯器】中新增【移動(dòng)】動(dòng)作,在【配置動(dòng)作】中勾選slider_off,并設(shè)置其移動(dòng)為【絕對(duì)】(x:98,y:2),動(dòng)畫(huà)【搖擺】,時(shí)間【300】毫秒,見(jiàn)圖13。
繼續(xù)勾選slider_on,并設(shè)置其移動(dòng)為【絕對(duì)】(x:98,y:2),動(dòng)畫(huà)【搖擺】,時(shí)間【300】毫秒,見(jiàn)圖14。
(圖13)
(圖14)
繼續(xù)新增【等待】動(dòng)作,在【配置動(dòng)作】中設(shè)置等待時(shí)間【300】毫秒,見(jiàn)圖15。
(圖15)
繼續(xù)新增【設(shè)置面板狀態(tài)】動(dòng)作,在【配置動(dòng)作】中勾選switch_button,并設(shè)置其選擇狀態(tài)為State1,進(jìn)入/退出動(dòng)畫(huà)【淡入淡出】,時(shí)間【300】毫秒,見(jiàn)圖16。
(圖16)
第七步:在【Outline:頁(yè)面】面板中雙擊slider_on(快速選擇想要的部件),見(jiàn)圖17,在部件【屬性】面板中雙擊【鼠標(biāo)單擊時(shí)】事件,在彈出的【用例編輯器】中新增【移動(dòng)】動(dòng)作,在【配置動(dòng)作】中勾選slider_on,并設(shè)置移動(dòng)為【絕對(duì)】(x:2,y:2),動(dòng)畫(huà)【搖擺】,時(shí)間【300】毫秒,見(jiàn)圖18。
(圖17)
繼續(xù)在右側(cè)【配置動(dòng)作】中勾選slider_off,并設(shè)置移動(dòng)為【絕對(duì)】(x:2, y:2),動(dòng)畫(huà)【搖擺】,時(shí)間【300】毫秒,見(jiàn)圖19。
(圖18)
(圖19)
繼續(xù)新增【等待】動(dòng)作,在【配置動(dòng)作】中設(shè)置等待時(shí)間【300】毫秒,見(jiàn)圖20。
(圖20)
繼續(xù)新增【設(shè)置面板狀態(tài)】動(dòng)作,在【配置動(dòng)作】中勾選switch_button,并設(shè)置其選擇狀態(tài)為State2,進(jìn)入/退出動(dòng)畫(huà)【淡入淡出】,時(shí)間【300】毫秒,見(jiàn)圖21。
(圖21)
至此,switch_button開(kāi)關(guān)交互就設(shè)置完畢了,單擊【預(yù)覽】按鈕快速測(cè)試。
第八步:到這里,昆明網(wǎng)站制作小編認(rèn)為自定義部件就制作完畢了。在頂部菜單欄中單擊【文件>保存】,關(guān)閉當(dāng)前的AxureAPP。當(dāng)再次打開(kāi)AxureAPP時(shí),在【部件】面板的下拉列表中就可以看到剛剛創(chuàng)建的名為my_widget_library的部件庫(kù)了,見(jiàn)圖22。選擇該部件庫(kù)后可以看到剛剛制作的switch_button部件,見(jiàn)圖23。將其拖放到設(shè)計(jì)區(qū)域,單擊【預(yù)覽】按鈕,打開(kāi)瀏覽器測(cè)試,剛剛添加的交互都可以正常執(zhí)行。
(圖22)
(圖23)
當(dāng)前文章標(biāo)題:案例19:制作一個(gè)可交互switch button部件
當(dāng)前URL:http://www.gtalker.cn/news/wzzz/3437.html
上一篇:編輯自定義部件屬性
下一篇:高級(jí)交互——條件邏輯概述