Animation jump on two Windows Phone 7 pages

Source: Internet
Author: User

Follow these steps to create an animated transition between two pages:

① Intercept any operations that indicate that the user is leaving the current page

② Start an animated storyboard to hide the current page

③ Navigate to the next page

④ Intercepting navigation of new pages

⑤ Start an animated storyboard to display new pages

 

First, create a Windows Phone application.

Code of the animation effect in 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="0"/>
7 <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-480"/>
8 </DoubleAnimationUsingKeyFrames>
9 <DoubleAnimationUsingKeyFrames
10 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
11 Storyboard.TargetName="phoneApplicationPage">
12 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
13 <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-800"/>
14 </DoubleAnimationUsingKeyFrames>
15 </Storyboard>
16 </phone:PhoneApplicationPage.Resources>
17 <phone:PhoneApplicationPage.RenderTransform>
18 <CompositeTransform/>
19 </phone:PhoneApplicationPage.RenderTransform>

Drag a Button control, trigger the Click event, and navigate to Page1.xaml.

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

In MainPage. xaml. cs, rewrite the OnNavigatingFrom method:

 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 }

Create a new WindowsPhone page Page1.xaml

The following code shows the animation effect of 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="0"/>
7 <EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
8 </DoubleAnimationUsingKeyFrames>
9 <DoubleAnimationUsingKeyFrames
10 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
11 Storyboard.TargetName="phoneApplicationPage">
12 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
13 <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
14 </DoubleAnimationUsingKeyFrames>
15 <DoubleAnimationUsingKeyFrames
16 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
17 Storyboard.TargetName="phoneApplicationPage">
18 <EasingDoubleKeyFrame KeyTime="0" Value="-720"/>
19 <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
20 </DoubleAnimationUsingKeyFrames>
21 </Storyboard>
22 </phone:PhoneApplicationPage.Resources>
23 <phone:PhoneApplicationPage.RenderTransform>
24 <CompositeTransform CenterX="240" CenterY="400"/>
25 </phone:PhoneApplicationPage.RenderTransform>

Then write the following code in the initialization function of Page1.xaml. cs:

1 public Page1()
2 {
3 InitializeComponent();
4
5 this.DisplayPage.Begin();
6 }

In this way, a basic jump effect of two page animations is ready.

 

The following figure shows the effect.

Think about the source code:

Http://dl.dbank.com/c0hcs4rabx

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.