两个页面之间创建带有动画的过渡效果基本步骤:
①截获当前任何表明用户正在离开当前页面的操作
②启动一个动画故事板来隐藏当前页面
③导航到下一个页面
④截获新页面的导航
⑤启动一个动画故事板来显示新页面
首先新建一个Windows Phone的应用程序
MainPage.xaml里面的动画效果代码:
1 <phone:PhoneApplicationPage.Resources> 2 <Storyboard x:Name="HidePage"> 3 <DoubleAnimationUsingKeyFrames 4 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" 5 Storyboard.TargetName="phoneApplicationPage"> 6 <EasingDoubleKeyFrame KeyTime="0" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"0"/> 7 <EasingDoubleKeyFrame KeyTime="0:0:2" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"-480"/> 8 </DoubleAnimationUsingKeyFrames> 9 <DoubleAnimationUsingKeyFrames 10 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 11 Storyboard.TargetName="phoneApplicationPage"> 12 <EasingDoubleKeyFrame KeyTime="0" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"0"/> 13 <EasingDoubleKeyFrame KeyTime="0:0:2" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"-800"/> 14 </DoubleAnimationUsingKeyFrames> 15 </Storyboard> 16 </phone:PhoneApplicationPage.Resources> 17 <phone:PhoneApplicationPage.RenderTransform> 18 <CompositeTransform/> 19 </phone:PhoneApplicationPage.RenderTransform>
然后拖一个Button控件,并触发Click事件,导航到Page1.xaml
1 private void button1_Click(object sender, RoutedEventArgs e) 2 { 3 this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative)); 4 }
在MainPage.xaml.cs里面重写OnNavigatingFrom方法:
1 protected override void OnNavigatingFrom(System.Windows.Navigation.NavigatingCancelEventArgs e) 2 { 3 base.OnNavigatingFrom(e); 4 5 if (UriToNavigateTo == null) 6 { 7 e.Cancel = true; 8 UriToNavigateTo = e.Uri; 9 this.HidePage.Begin(); 10 this.HidePage.Completed += new EventHandler(HidePage_Completed); 11 } 12 else 13 { 14 UriToNavigateTo = null; 15 } 16 } 17 18 private void HidePage_Completed(object sender, EventArgs e) 19 { 20 this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative)); 21 }
接着新建一个WindowsPhone页面Page1.xaml
Page1.xaml的动画效果代码如下:
1 <phone:PhoneApplicationPage.Resources> 2 <Storyboard x:Name="DisplayPage"> 3 <DoubleAnimationUsingKeyFrames 4 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" 5 Storyboard.TargetName="phoneApplicationPage"> 6 <EasingDoubleKeyFrame KeyTime="0" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"0"/> 7 <EasingDoubleKeyFrame KeyTime="0:0:3" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"1"/> 8 </DoubleAnimationUsingKeyFrames> 9 <DoubleAnimationUsingKeyFrames 10 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" 11 Storyboard.TargetName="phoneApplicationPage"> 12 <EasingDoubleKeyFrame KeyTime="0" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"0"/> 13 <EasingDoubleKeyFrame KeyTime="0:0:2" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"1"/> 14 </DoubleAnimationUsingKeyFrames> 15 <DoubleAnimationUsingKeyFrames 16 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" 17 Storyboard.TargetName="phoneApplicationPage"> 18 <EasingDoubleKeyFrame KeyTime="0" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"-720"/> 19 <EasingDoubleKeyFrame KeyTime="0:0:2" Value=http://www.cnblogs.com/xiaohuzi1990/archive/2012/02/08/"0"/> 20 </DoubleAnimationUsingKeyFrames> 21 </Storyboard> 22 </phone:PhoneApplicationPage.Resources> 23 <phone:PhoneApplicationPage.RenderTransform> 24 <CompositeTransform CenterX="240" CenterY="400"/> 25 </phone:PhoneApplicationPage.RenderTransform>
然后在Page1.xaml.cs的初始化函数里写如下代码:
1 public Page1() 2 { 3 InitializeComponent(); 4 5 this.DisplayPage.Begin(); 6 }
就这样,一个最基本的两个页面动画跳转效果就做好了
下面是效果截图
|
原文链接:http://www.189works.com/article-42445-1.html