《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、动画故事板

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

    <phone:PhoneApplicationPage.Resources>
        <!-- 页面间跳转动画 -->
        <Storyboard x:Name="HidePage" Completed="HodePage_Completed">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="phoneApplicationPage">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-480"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="phoneApplicationPage">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-800"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="DisplayPage">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="phoneApplicationPage">
                <EasingDoubleKeyFrame KeyTime="0" Value="-480"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="phoneApplicationPage">
                <EasingDoubleKeyFrame KeyTime="0" Value="-800"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>
    <!-- 页面间跳转动画 -->
    <phone:PhoneApplicationPage.RenderTransform>
        <CompositeTransform/>
    </phone:PhoneApplicationPage.RenderTransform>

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

    <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>

本例到此结束