Windows phone中如何新增頁面跳轉動畫
有沒有羨慕ios平臺中華麗的動畫效果,不用擔心微軟的toolkit團隊為我們為我們提供了這樣一套元件,叫做TransitionServices服務。
簡單說一下它具備的效果:turnstile(軸旋轉效果);turnstile feather(羽毛式軸旋轉效果);continuum(繼承動畫效果);slide(滑動效果);rotate(旋轉效果)。這裡我們實現一下Turnstile效果:
接下來我介紹一下使用過程(這裡實現一個全域性的跳轉動畫,某個頁面需要動畫效果時直接新增style屬性就可以了):
首先毋庸置疑我們要下載Silverlight for Windows Phone Toolkit (沒有Windows phone Toolkit的可以去http://silverlight.codeplex.com/releases/view/55034/ 進行下載):
因為想實現全域性都可以呼叫的動畫,於是我們可以在App.xaml中實現我們的想法。
1.首先將Toolkit引用進來:在Application中加入 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" 即可:如圖
2.在 <Application.Resources>中新增一個動畫樣式(Style標籤中的便是):
<!--應用程式資源--> <Application.Resources> <local:LocalizedStrings xmlns:local="clr-namespace:MeeTu" x:Key="LocalizedStrings"/> <UriMapper:UriMapper x:Name="mapper"> <UriMapper:UriMapping Uri="/MainPage.xaml" /> </UriMapper:UriMapper> <Style x:Key="PageTranstionStyle" TargetType="phone:PhoneApplicationPage"> <Setter Property="toolkit:TransitionService.NavigationInTransition"> <Setter.Value> <toolkit:NavigationInTransition> <toolkit:NavigationInTransition.Backward> <toolkit:TurnstileTransition Mode="BackwardIn"/> </toolkit:NavigationInTransition.Backward> <toolkit:NavigationInTransition.Forward> <toolkit:TurnstileTransition Mode="ForwardIn" /> </toolkit:NavigationInTransition.Forward> </toolkit:NavigationInTransition> </Setter.Value> </Setter> <Setter Property="toolkit:TransitionService.NavigationOutTransition"> <Setter.Value> <toolkit:NavigationOutTransition> <toolkit:NavigationOutTransition.Backward> <toolkit:TurnstileTransition Mode="BackwardOut"/> </toolkit:NavigationOutTransition.Backward> <toolkit:NavigationOutTransition.Forward> <toolkit:TurnstileTransition Mode="ForwardOut" /> </toolkit:NavigationOutTransition.Forward> </toolkit:NavigationOutTransition> </Setter.Value> </Setter> <Setter Property="Background"> <Setter.Value> <ImageBrush ImageSource="/Images/bg2.png"/> </Setter.Value> </Setter> </Style> </Application.Resources>
3.這一點很重要,我們需要在App.xaml.cs檔案中修改下東西,以便於我們的動畫能被呼叫。
在cs檔案中找到"RootFrame = new PhoneApplicationFrame();" 也就是PhoneApplicationFrame的例項化方法,
我們將它改成:"RootFrame = new TransitionFrame();" 這樣我們的框架就成為了一個可以有跳轉動畫的框架了。
4.接下來就是呼叫了,這個很簡單直接在想用動畫的頁面里加上這個style就可以了: Style="{StaticResource PageTranstionStyle}":如圖:
<phone:PhoneApplicationPage x:Class="MeeTu.Message.SendMessagePage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" mc:Ignorable="d" Style="{StaticResource PageTranstionStyle}" shell:SystemTray.IsVisible="False"> <!--LayoutRoot 是包含所有頁面內容的根網格--> <Grid x:Name="LayoutRoot"> <Grid.Background> <ImageBrush ImageSource="/Images/bg2.png"/> </Grid.Background> </Grid> <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default" BackgroundColor="Black" ForegroundColor="White"> <shell:ApplicationBarIconButton Text="send" IconUri="/Icons/check.png" Click="ApplicationBarIconButton_Click_Send" /> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem Text="Settings" /> <shell:ApplicationBarMenuItem Text="Profile" /> <shell:ApplicationBarMenuItem Text="Sign out" /> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar> </phone:PhoneApplicationPage>
最後:除了自帶的這些動畫效果外,我們同樣可以自定義動畫,這個我以後再同大家分享。