Implementation of page Jump animation in Windows Phone

The toolkit of the Silverlight team provides us with such a set of components, called the transitionservices service, which can be used to implement jump animations between pages. This service provides several jump animations:

2. Slidetransition: sliding up or down or left or right. The specific mode value is determined:
   • Slideupfadein flies up
   • Slideupfadeout fly up
   • Slidedownfadein flies down
   • Slidedownfadeout
   • Slideleftfadein flies to the left
   • Slideleftfadein flies to the left
   • Sliderightfadein flies to the right
   • Sliderightfadein flies to the right
4. Rolltransition: 360-degree rotation animation effect
6. Rotatetransition: rotation effect. The mode enumerated values are as follows:
   • In180clockwise 180 clockwise Transfer
   • Out180clockwise 180 clockwise Transfer
   • In180counterclockwise 180 counterclockwise Transfer
   • Out180counterclockwise 180
   • In90clockwise 90 clockwise Transfer
   • Out90clockwise 90 clockwise Transfer
   • In90counterclockwise 90 counterclockwise Transfer
   • Out90counterclockwise 90 clockwise Transfer
8. Swiveltransition: vertical flip animation effect. The mode value is enumerated as follows:
   • Backwardin forward
   • Backwardout
   • Forwardin forward Transfer
   • Forwardout
   • Fullscreenin full screen transfer-in
   • Fullscreenout
10. Turnstiletransition: the animation effect of page turning between left and right. The enumerated value of mode is as follows:
    • Backwardin backward flip
    • Backwardout flip back
    • Forwardin forward
    • Forwardout

As you can see, toolikit provides us with a wide range of animation effects. The following uses the page flip animation effect as an example to implement page Jump animation.

For a single page, first find the rootframe initialization location in the app. Xmal. CS file and replace it with the followingCode:

 
//Rootframe = new phoneapplicationframe ();Rootframe =NewTransitionframe ();
 

Then you need to add a few codes to the page Resource:

 

<Toolkit: transitionservice. navigationintransition>
<Toolkit: navigationintransition>
<Toolkit: navigationintransition. Backward>
<Toolkit: turnstiletransition mode = "  Backwardin  " />
</Toolkit: navigationintransition. Backward>
<Toolkit: navigationintransition. Forward>
<Toolkit: turnstiletransition mode = "  Forwardin  " />
</Toolkit: navigationintransition. Forward>
</Toolkit: navigationintransition>
</Toolkit: transitionservice. navigationintransition>
<Toolkit: transitionservice. navigationouttransition>
<Toolkit: navigationouttransition>
<Toolkit: navigationouttransition. Forward>
<Toolkit: turnstiletransition mode = "  Forwardout  " />
</Toolkit: navigationouttransition. Forward>
<Toolkit: navigationouttransition. Backward>
<Toolkit: turnstiletransition mode = "  Backwardout  " />
</Toolkit: navigationouttransition. Backward>
</Toolkit: navigationouttransition>
</Toolkit: transitionservice. navigationouttransition>

However, sometimes we need to set a jump animation for all pages of the entire app. Of course, we can copy the above Code to every page, but it is a little uncomfortable to look at it, in this case, we can create a public page style and apply it to each page. In the resource node of the app. XAML file or custom resource file, add the following style:

<Style X: Key = "  Pagetranstionstyle  " Targettype = "  Phone: phoneapplicationpage  " > <Setter property = " Toolkit: transitionservice. navigationintransition  " > <Setter. value> <Toolkit: navigationintransition. Backward> <Toolkit: turnstiletransition mode = "  Backwardin  " /> </Toolkit: navigationintransition. Backward> <Toolkit: navigationintransition. Forward> <Toolkit: turnstiletransition mode = "  Forwardin  " /> </Toolkit: navigationintransition. Forward> </Toolkit: navigationintransition> </setter. value> </setter> <setter property = "  Toolkit: transitionservice. navigationouttransition  " > <Setter. value> <Toolkit: navigationouttransition. Backward> <Toolkit: turnstiletransition mode = "  Backwardout  " /> </Toolkit: navigationouttransition. Backward> <Toolkit: navigationouttransition. Forward> <Toolkit: turnstiletransition mode = "  Forwardout  " /> </Toolkit: navigationouttransition. Forward> </Toolkit: navigationouttransition> </setter. value> </setter> </style>

Then add the following code to each page:

 
Style ="{Staticresource pagetranstionstyle}"
 

Posted in Windows Phone