WP8頁面跳轉動畫實現


   

背景

WP系統一向以系統流暢著稱,這其中主要歸功系統內程序頁面間跳轉的流暢動畫。但很可惜的是sdk本身並沒有對應用內使用這些動畫效果進行支持。縱觀國內WP market 加入頁面跳轉動畫效果的APP也很少(主要原因在於多數APP都在趕功能=。=)但是就移動端而言用戶體驗應該是時刻關注的重點,因此為程序加些動畫效果會讓整個APP更加生動。

   

對於頁面跳轉動畫的實現Toolkit中有支持,實際添加也非常容易,下面我們就開始為APP添加。

   

如何實現

使用TransitionFrame很簡單只需要兩步即可打到動畫翻頁效果。

   

1、在app.xaml.cs文件中將InitializePhoneApplicatoin將原來的PhoneApplicationFrame改為Toolkit中的TransitionFrame

   

2、在頁面中配置頁面跳轉時使用的動畫效果:

   

   

分析:

Toolkit中實現頁面跳轉動畫的思路如下:在導航事件Navigating觸發時,TransitionFrame會找到Old content 即離開頁面,然后對old content進行動畫處理,在動畫完成的時候,再對new content進行動畫處理,如此便可提供流暢的動畫效果。

   

具體一些:

TransitionService.NavigationInTransition是頁面作為new content 執行的動畫效果,而作為new content分為兩種,導航方向為forward,舉例說明,比如mainpage->page1,那么page1則會執行NavigationInTransition.Forward里面定義的動畫。若導航方向為backward,距離mainpage->page1->page2 back->page1,那么執行NavigationInTransition.Backward內定義的動畫。

   

Toolkit內定義了幾種翻頁效果,包括:Rotate、Slide、Swivel、Turnstile等

具體可參照Toolkit源碼內的Sample查看。

   

性能考慮:

如此是否對性能產生影響?這個問題相信在很多場合下會提出來,加個動畫對性能影響會不會很大

   

未開啟動畫的情況下執行5次頁面跳轉:

   

   

開啟動畫時相同操作:

 

   

分析上圖可以看出動畫效果對於cpu及內存影響不大,對於wp8系統來說在可接受范圍內,提升的用戶體驗和消耗的資源來比,是比較值得的。

   

   

注意:

對於WP程序而言,應時刻保持程序的響應,隨時保持UI線程任務量最低,與UI線程無關的工作盡可能放到后台線程來執行,理論上而言耗時超過50ms的工作都該在非UI線程中執行。

而就頁面跳轉動畫而言,頁面的構造時間NavagatedTo,Loaded響應事件的執行時間都對動畫效果產生影響,嚴重的時候動畫直接失效,因此,一定保證頁面的數據加載都在后台執行,以保證最好的用戶體驗。

   

   

   

wp8開發交流

QQ群:182659848

   

   

   

   

   

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM