国产午夜亚洲精品国产成人_欧美屁股大的xxxxx_丰满巨肥大屁股bbw网站_日韩精品亚洲aⅴ在线影院_旧番剧精灵の森へようこそ

案例19:制作一個(gè)可交互switch button部件

  • 2022-04-28 16:49:54
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://www.gtalker.cn

第一步:在【部件】面板中單擊【選項(xiàng)】按鈕,在彈出的菜單中選擇【創(chuàng)建部件庫(kù)】,見(jiàn)圖8。

11.jpg

(圖8)

第二步:在彈出的對(duì)話框中給自定義部件庫(kù)指定路徑位置,單擊【保存】后會(huì)打開(kāi)另一個(gè)Axure APP窗口,見(jiàn)圖9。

第三步:在左側(cè)【部件庫(kù)頁(yè)面】面板中雙擊【新部件1】,并給其重命名為switch button,見(jiàn)圖10。

11.jpg

(圖9)

11.jpg

(圖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.jpg

(圖11)

11.jpg

(圖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。

11.jpg

(圖13)

11.jpg

(圖14)

繼續(xù)新增【等待】動(dòng)作,在【配置動(dòng)作】中設(shè)置等待時(shí)間【300】毫秒,見(jiàn)圖15。

11.jpg

(圖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。

11.jpg

(圖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。

11.jpg

(圖17)

繼續(xù)在右側(cè)【配置動(dòng)作】中勾選slider_off,并設(shè)置移動(dòng)為【絕對(duì)】(x:2, y:2),動(dòng)畫(huà)【搖擺】,時(shí)間【300】毫秒,見(jiàn)圖19。

11.jpg

(圖18)

11.jpg

(圖19)

繼續(xù)新增【等待】動(dòng)作,在【配置動(dòng)作】中設(shè)置等待時(shí)間【300】毫秒,見(jiàn)圖20。

11.jpg

(圖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。

11.jpg

(圖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í)行。

11.jpg

(圖22)

11.jpg

(圖23)


當(dāng)前文章標(biāo)題:案例19:制作一個(gè)可交互switch button部件

當(dāng)前URL:http://www.gtalker.cn/news/wzzz/3437.html

上一篇:編輯自定義部件屬性

下一篇:高級(jí)交互——條件邏輯概述

網(wǎng)站建設(shè)、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專(zhuān)線:15368242187(微信同號(hào))