《Page》制作页面间跳转动画步骤

在Windows Phone 应用程序中使用动画在页面中跳转可以起到很好的过渡效果，那要怎么让制作一个页面间的跳转动画那？

其实也面间的跳转动画制作步骤并的复杂，相对来说还很简单，步骤如下：

（1）截获任何表明用户正在离开当前页面的操作

（2）启动一个动画故事板来隐藏当前页面

（3）导航到下一个页面

（4）截获新页面的导航

（5）启动一个动画板来显示新页面

具体操作：

1、隐藏当前页面

当用户将要离开当前页面时，对其进行截获的一种方法是讲对Navigate方法的调用替换为对动画启动的调用。该方法的缺点是，如果用户有多种导航到另外一个页面的方式，那么你可能要在一个页面中多处位置执行次操作。另外一个方法就是重写OnNavigateionFrom方法并且取消导航，而调用动画故事板以便隐藏当前页面。当隐藏动画完成当前页面的隐藏之前，用户是无法离开该页面的。所以你要把用户将要导航到的URI记录下来，在动画结束时，再次调用Navigate方法。导航离开页面。

相关代码：

 1         //页面间跳转动画
 2         public Uri UriToNacigateTo { get; set; }
 3         public bool IsCurrentApp { get; set; }
 4         protected override void OnNavigatingFrom(System.Windows.Navigation.NavigatingCancelEventArgs e)
 5         {
 6             base.OnNavigatingFrom(e);
 7             IsCurrentApp = e.IsNavigationInitiator;
 8             if (UriToNacigateTo == null)
 9             {
10                 e.Cancel = true;
11                 if (IsCurrentApp)
12                     UriToNacigateTo = e.Uri;
13                 this.HidePage.Begin();
14             }
15             else
16             {
17                 UriToNacigateTo = null;
18             }
19         }
20         private void HodePage_Completed(object sender, EventArgs e)
21         {
22             if (IsCurrentApp)
23                 this.NavigationService.Navigate(UriToNacigateTo);
24         }

2、显示新页面

一旦隐藏上一个页面并且加载了新页面，就可以按类似的过程显示动画了。你需要重写新页面的OnNavigatedTo方法，并启动一个可以显示页面内容的动画故事板：

1         protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
2         {
3             base.OnNavigatedTo(e);
4             this.DisplayPage.Begin();
5         }

3、动画故事板

用于隐藏当前页面的动画可以如下所示：

View Code

 1     <phone:PhoneApplicationPage.Resources>
 2         <!-- 页面间跳转动画 -->
 3         <Storyboard x:Name="HidePage" Completed="HodePage_Completed">
 4             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="phoneApplicationPage">
 5                 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
 6                 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-480"/>
 7             </DoubleAnimationUsingKeyFrames>
 8             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="phoneApplicationPage">
 9                 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
10                 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-800"/>
11             </DoubleAnimationUsingKeyFrames>
12         </Storyboard>
13         <Storyboard x:Name="DisplayPage">
14             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="phoneApplicationPage">
15                 <EasingDoubleKeyFrame KeyTime="0" Value="-480"/>
16                 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
17             </DoubleAnimationUsingKeyFrames>
18             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="phoneApplicationPage">
19                 <EasingDoubleKeyFrame KeyTime="0" Value="-800"/>
20                 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
21             </DoubleAnimationUsingKeyFrames>
22         </Storyboard>
23     </phone:PhoneApplicationPage.Resources>
24     <!-- 页面间跳转动画 -->
25     <phone:PhoneApplicationPage.RenderTransform>
26         <CompositeTransform/>
27     </phone:PhoneApplicationPage.RenderTransform>

相反，显示新页面的动画可能如下：

View Code

 1     <phone:PhoneApplicationPage.Resources>
 2         <Storyboard x:Name="DisplayPage">
 3             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="phoneApplicationPage">
 4                 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
 5                 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
 6             </DoubleAnimationUsingKeyFrames>
 7             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="phoneApplicationPage">
 8                 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
 9                 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
10             </DoubleAnimationUsingKeyFrames>
11             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="phoneApplicationPage">
12                 <EasingDoubleKeyFrame KeyTime="0" Value="-720"/>
13                 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
14             </DoubleAnimationUsingKeyFrames>
15         </Storyboard>
16     </phone:PhoneApplicationPage.Resources>
17     <phone:PhoneApplicationPage.RenderTransform>
18         <CompositeTransform/>
19     </phone:PhoneApplicationPage.RenderTransform>

本例到此结束