Windows Phone 7两个页面动画跳转

两个页面之间创建带有动画的过渡效果基本步骤：

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

②启动一个动画故事板来隐藏当前页面

③导航到下一个页面

④截获新页面的导航

⑤启动一个动画故事板来显示新页面

首先新建一个Windows Phone的应用程序

MainPage.xaml里面的动画效果代码：

<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="HidePage">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="phoneApplicationPage">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-480"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="phoneApplicationPage">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-800"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<phone:PhoneApplicationPage.RenderTransform>
<CompositeTransform/>
</phone:PhoneApplicationPage.RenderTransform>

复制代码

然后拖一个Button控件，并触发Click事件，导航到Page1.xaml

private void button1_Click(object sender, RoutedEventArgs e)
{
this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
}

复制代码

在MainPage.xaml.cs里面重写OnNavigatingFrom方法：

protected override void OnNavigatingFrom(System.Windows.Navigation.NavigatingCancelEventArgs e)
{
base.OnNavigatingFrom(e);

if (UriToNavigateTo == null)
{
e.Cancel = true;
UriToNavigateTo = e.Uri;
this.HidePage.Begin();
this.HidePage.Completed += new EventHandler(HidePage_Completed);
}
else
{
UriToNavigateTo = null;
}
}

private void HidePage_Completed(object sender, EventArgs e)
{
this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
}

复制代码

接着新建一个WindowsPhone页面Page1.xaml

Page1.xaml的动画效果代码如下：

<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:3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
Storyboard.TargetName="phoneApplicationPage">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
Storyboard.TargetName="phoneApplicationPage">
<EasingDoubleKeyFrame KeyTime="0" Value="-720"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<phone:PhoneApplicationPage.RenderTransform>
<CompositeTransform CenterX="240" CenterY="400"/>
</phone:PhoneApplicationPage.RenderTransform>

复制代码

然后在Page1.xaml.cs的初始化函数里写如下代码：

public Page1()
{
InitializeComponent();

this.DisplayPage.Begin();
}

复制代码

就这样，一个最基本的两个页面动画跳转效果就做好了