PlaneProjection for 3D effects. Part II : flipping

Let's make use of PlaneProjection to program 3D effects : flipping effects in this post (more effects to come in next posts).

As usual, let's start with the easiest one. Please, note that all images have a red circle in the upper-left corner : whenever displaying an image and playing with rotations, it's important to be sure the image is correctly displayed and not the inverted one (the "back side" or mirrored image if you prefer) and it's so easy to be confused without a mark.

The images are not included in the xap file as internal ressources, they are loaded from the web server at run time. To do so, the images must be copied in the ClientBin folder (the one that contains the xap file to be published). To load these images at run-time (here at start-up time) :
 string[] arImageNames={"Amsterdam", "London", "Moskow", "Paris", "Roma" };
 Image[] arImages;
 .....
 public MainPage()
 {
  InitializeComponent();
  arImages = new Image[arImageNames.Length];
  for (int i=0; i<arImageNames.Length; i++)
  {
   arImages[i] = new Image();
   arImages[i].Source = new BitmapImage(new Uri(arImageNames[i]+".jpg", UriKind.Relative));
  }
  .....
 }
The image is declared in xaml as follows (with an initial -90° rotation along the Y-axis to render it initially invisible) :
 <Image x:Name="img" Width="150" Height="150" Stretch="Fill" ..... >
  <Image.Projection>
   <PlaneProjection x:Name="pp" RotationY="-90" />
  </Image.Projection>
 </Image>

We animate the plane projection from -90° to 90° (we will change image at the end of each elementary animation) :
 <Grid.Resources>
  <Storyboard x:Name="stb"  Completed="stb_Completed" >
   <DoubleAnimation x:Name="da" Storyboard.TargetName="pp" Storyboard.TargetProperty="RotationY" Duration="0:0:4" From="-90" To="90"  />
  </Storyboard>
 </Grid.Resources>

The DoubleAnimation line could be written, without giving a name (here pp) to the PlaneProjection :
 <DoubleAnimation x:Name="da" Storyboard.TargetName="img" Storyboard.TargetProperty="(Image.Projection).RotationY" Duration="0:0:4" From="-90" To="90" />

In the function that handles the Completed event (N being the index of the image being displayed) :
 private void stb_Completed(object sender, EventArgs e)
 {
  N = ++N % arImageNames.Length;
  img.Source = arImages[N].Source;
  stb.Begin();
 }
Really, nothing complicated !

And now another way to flip pages :

We use three panels and each panel is made of two images :
- a small image of the spirals (just half of it), inserted as a ressource,
- the displayed image (not always the same, for instance Amsterdam.jpg or the first or the last image), these images being kept on the web server (in the same folder as the xap file).

These three panels (all with CenterOfRotationX equal to 0) are :
- one panel for the left side : fixed, with RotationY of 180° (so, we can see a full spiral from two half-sized images) and image initially invisible,
- one panel for the right side : fixed, with RotationY of 0° and an image (title image) initially present,
- a moving panel, initially invisible (it will become visible when the users clicks the Next or Previous link button).

When the user clicks Next or Previous and the action is valid (they are more images to be displayed), we :
- prepare the moving panel (copy of an image and preparation of the storyboard),
- prepare the left panel (if click on Previous) or the right panel (if click on Next) with a copy of an image that will become more and more visible,
- make the moving panel visible and start the animation.

Whenever we flip page from left-to-right or right-to-left, the animation is performed in two steps : - for a right-to-left-flip (Next action), a first animation from 0° to 85° (we then change image in the moving panel) and then a second animation from 85° to 180° (the moving panel becomes then invisible),
- for a left-to-right flip (Previous action), a first animation from 180° to 85° (with then a change of image in the moving panel) and then a second animation from 85° to 0° (the moving panel becomes then invisible).

More details in the source code file available.
 

Flipping is not restricted to images. We can flip between data forms :

This animation is similar (even easier) to the previous one : we have again three panels. We just added :
- RotationX="-340" and RotationY="-40" to the PlaneProjection of the back panel
- RotationX="-20" and RotationY="-40" to the PlaneProjection of the front panel.

Since we accept to see the back side of data forms during animations, the animations can be performed in only one step (a RotationX from -20° to -340° for Next and -340° to -20° for Previous).

See soon for other effects.