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

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

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

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

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

（3）导航到下一个页面

（4）截获新页面的导航

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

具体操作：

1、隐藏当前页面

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

相关代码：

//页面间跳转动画
public Uri UriToNacigateTo { get; set; }
public bool IsCurrentApp { get; set; }
protected override void OnNavigatingFrom(System.Windows.Navigation.NavigatingCancelEventArgs e)
{
base.OnNavigatingFrom(e);
IsCurrentApp = e.IsNavigationInitiator;
if (UriToNacigateTo == null)
{
e.Cancel = true;
if (IsCurrentApp)
UriToNacigateTo = e.Uri;
this.HidePage.Begin();
}
else
{
UriToNacigateTo = null;
}
}
private void HodePage_Completed(object sender, EventArgs e)
{
if (IsCurrentApp)
this.NavigationService.Navigate(UriToNacigateTo);
}

2、显示新页面

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

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
this.DisplayPage.Begin();
}

3、动画故事板

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

View Code

<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="DisplayPage">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="phoneApplicationPage">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="phoneApplicationPage">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="phoneApplicationPage">
<EasingDoubleKeyFrame KeyTime="0" Value="-720"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<phone:PhoneApplicationPage.RenderTransform>
<CompositeTransform/>
</phone:PhoneApplicationPage.RenderTransform>

本例到此结束