滑動(dòng)菜單教程概述

本教程演示如何創(chuàng)建一個(gè)常用來隱藏和顯示菜單的滑動(dòng)動(dòng)畫。當(dāng)設(shè)計(jì) iPhone 應(yīng)用程序原型，你可以使用這種技術(shù)來隱藏和顯示上傳菜單，設(shè)置選項(xiàng)，或者通過上下滑動(dòng)隱藏任意的展示。

面板的滑上

新增熱點(diǎn)

http://wiki.jikexueyuan.com/project/axure/images/iphone-appsliding-menu-tutorial1.png" alt="image" />

首先，打開axureiphoneapp.zip 和 iphoneaslidingmenututorial.rp 文件。由于底部導(dǎo)航是一個(gè)單一的圖像，我們可以在圖標(biāo)大拇指向>上和向下之間新增一個(gè)熱點(diǎn)選項(xiàng)按鈕。同時(shí)，在 Add >Bookmark 按鈕上也添加熱點(diǎn)，因?yàn)樗怯脙蓚€(gè)控件創(chuàng)建的，我們希望整個(gè)地區(qū)被點(diǎn)擊添加熱點(diǎn)。

轉(zhuǎn)換菜單到動(dòng)態(tài)面板

http://wiki.jikexueyuan.com/project/axure/images/iphone-appsliding-menu-tutorial2.png" alt="image" />

為了創(chuàng)建滑動(dòng)動(dòng)畫我們將會(huì)使用 Set Panel State 。首先，通過窗口小部件將整個(gè)活動(dòng)菜單轉(zhuǎn)換到一個(gè)動(dòng)態(tài)的面板上，點(diǎn)擊右鍵，并選擇[轉(zhuǎn)換到動(dòng)態(tài)面板]，標(biāo)記面板為 “SlideUpMenu”。

設(shè)置面板為隱藏

http://wiki.jikexueyuan.com/project/axure/images/iphone-appsliding-menu-tutorial3.png" alt="image" />

現(xiàn)在設(shè)置遇到錯(cuò)誤時(shí)動(dòng)態(tài)面板自動(dòng)隱藏。假如你不能點(diǎn)擊或者打開可見的動(dòng)態(tài)面板即使?fàn)顟B(tài)是空的，我們就需要面板隱藏起來。

在熱點(diǎn)上添加 OnClick

http://wiki.jikexueyuan.com/project/axure/images/iphone-appsliding-menu-tutorial4.png" alt="image" />

現(xiàn)在讓我們通過 OnClick 的 OptionsButton 新增一個(gè)互動(dòng)，熱點(diǎn)我們在第一步時(shí)已經(jīng)添加過了。雙擊 OnClick 進(jìn)行事件的添加。

面板顯示與滑動(dòng)

http://wiki.jikexueyuan.com/project/axure/images/iphone-appsliding-menu-tutorial5.png" alt="image" />

添加“顯示”動(dòng)作并選擇 SlidingMenu 復(fù)選框。在彈出的下拉框里選擇“滑上”，然后點(diǎn)擊 OK 確定并關(guān)閉引導(dǎo)。標(biāo)記好該項(xiàng)面板并設(shè)置為自動(dòng)顯示，以便我們不需要再添加一個(gè)顯示面板的作用。

面板的滑下

打開菜單，添加事件到 Onclick

http://wiki.jikexueyuan.com/project/axure/images/iphone-appsliding-menu-tutorial6.png" alt="image" />

在插件管理器通過雙擊狀態(tài)1打開菜單狀態(tài)并在我們之前設(shè)置過熱點(diǎn)的“添加書簽”那里添加一個(gè) Onclick 事件。

隱藏面板，滑下

http://wiki.jikexueyuan.com/project/axure/images/iphone-appsliding-menu-tutorial7.png" alt="image" />

要隱藏面板我們將使用“隱藏”動(dòng)作并點(diǎn)擊“滑落”動(dòng)畫。

將 SlideUpMenu 歸位

http://wiki.jikexueyuan.com/project/axure/images/iphone-appsliding-menu-tutorial8.png" alt="image" />

最后將 slideupmenu 到位，你可以按住 Shift 的同時(shí)拖動(dòng)它沿一個(gè)軸移動(dòng)。生成你的原型和測試了。上傳到axshare和你的設(shè)備上查看。如果隱藏菜單沒有正常工作，確保行動(dòng)是正確的順序。

總結(jié)

現(xiàn)在你已經(jīng)學(xué)會(huì)創(chuàng)建菜單和滑動(dòng)的技術(shù)。明智地使用它吧！
還需要其他幫助嗎？查看論壇或聯(lián)系我們 support@axure.com