屏幕過渡動畫概述

設計 iPhone 應用程序時，從一個屏幕過渡到另一個屏幕使用動畫就像滑動條那樣是很普遍的。在 Axure RP 中，屏幕可以設計在一個動態(tài)面板里面和設置面板狀態(tài)行動用于從一個屏幕滑動過渡到下一個。這個 iPhone 應用程序教程向您展示如何做到這一點。

從一個方面說明，構(gòu)建你的 iPhone 應用程序原型在動態(tài)面板是一個不錯的方式來把你的整個應用程序放在一個頁面。但為了防止過載的動態(tài)面板可能會很難控制在一個頁面上，考慮將它分解成多個頁面是值得考慮的。

iPhone 應用程序?qū)Ш脚c動態(tài)面板

添加熱點

http://wiki.jikexueyuan.com/project/axure/images/iphone-app-screen-transition-tutorial1.png" alt="image" />

首先，打開axureiphoneapp.zip并打開 iPhoneApp-StateChangeNavigationTutorial.rp 文件。添加熱點在后退按鈕和現(xiàn)在播放按鈕的上面。我們這樣做是因為這些按鈕是由多個部件組成的，和我們想要添加一個交互到整個區(qū)域。

將第一個轉(zhuǎn)換為動態(tài)面板

http://wiki.jikexueyuan.com/project/axure/images/iphone-app-screen-transition-tutorial2.png" alt="image" />

接下來，我們將把這兩個屏幕放在一個動態(tài)面板里面。選擇第一個屏幕的所有部件包含灰色背景，右鍵單擊并將其轉(zhuǎn)化為一個動態(tài)面板。標簽這個面板為交互面板。

添加"暫停"狀態(tài)

http://wiki.jikexueyuan.com/project/axure/images/iphone-app-screen-transition-tutorial3.png" alt="image" />

添加一個額外的狀態(tài)面板通過在動態(tài)面板管理器右鍵單擊面板并選擇添加狀態(tài)。

標簽狀態(tài)1為"現(xiàn)在播放"和狀態(tài)2為“暫?！薄?/p>

粘貼小部件到"暫停"狀態(tài)

http://wiki.jikexueyuan.com/project/axure/images/iphone-app-screen-transition-tutorial4.png" alt="image" />

選擇站列表屏幕小部件，剪切和粘貼成站狀態(tài)。將粘貼小部件移動到位置0，0。

添加 OnClick 到熱點

http://wiki.jikexueyuan.com/project/axure/images/iphone-app-screen-transition-tutorial5.png" alt="image" />

選擇"現(xiàn)在播放"熱點，并雙擊 OnClick 事件打開事件編輯器。

設置面板狀態(tài)為“現(xiàn)在播放”

http://wiki.jikexueyuan.com/project/axure/images/iphone-app-screen-transition-tutorial6.png" alt="image" />

為交互面板添加控制面板狀態(tài)行動并勾選復選框?！艾F(xiàn)在播放”狀態(tài)將被默認選中。選擇并單擊 OK關閉事件編輯器。

單擊 OK 關閉編輯器。

打開播放狀態(tài)，添加到 OnClick

http://wiki.jikexueyuan.com/project/axure/images/iphone-app-screen-transition-tutorial7.png" alt="image" />

導航到現(xiàn)在播放狀態(tài)，選擇后退按鈕熱點，并雙擊 OnClick 打開事件編輯器。

設置面板狀態(tài)“暫停”

http://wiki.jikexueyuan.com/project/axure/images/iphone-app-screen-transition-tutorial8.png" alt="image" />

選擇“設置面板狀態(tài)”和勾選交互面板復選框。從下拉目錄中選擇暫停狀態(tài)，并為“動畫進時”和“動畫出時”選擇“向右滑”然后單擊 OK。

現(xiàn)在可以在你的桌面上生成和測試它或者把它放在你的蘋果手機上看看效果了。

總結(jié)

現(xiàn)在你有能力為你的蘋果手機應用原型設置動態(tài)面板了，合理地使用它吧！還需要其他幫助嗎？查看論壇或聯(lián)系我們 support@axure.com