Perspective 3D Screen flip with PlaneProjection

joel — Tue, 07 Apr 2009 16:31:09 +0000

Almost a year ago I created a Silverlight 2 example that demonstrated how you could use a procedural animation to duplicate one of the transitions used on the iPhone. When a iPhone user goes to make a phone call, if you choose to display the keypad there is a cool 3D flip that occurs. Back in SL2 it was a pretty lengthy animation that never quite duplicated the correct amount of 3d perspective needed to make the flip look realistic.

Thankfully in Silverlight 3 we now have perspective 3D which allows us to take 2D objects and rotate them in 3D space. For this example I will use PlaneProjection to rotate a Grid with an extremely simple DoubleAnimationUsingKeyFrames.

My first DoubleAnimationUsingKeyFrames simply targets the RotateY property of Grid.Projection.PlaneProjection. The second two are used to fade the back from opacity 0 to 1 and the front from opacity 1 to 0.

To get my grid representing the back to start flipped 180 degrees I simply apply PlaneProject to it as well.

Here is the final example with nothing in the code behind except for the Flip button handler.

Code: ScreenFlipv3.zip

Silverlight 3D flip animation

joel — Fri, 25 Apr 2008 07:20:16 +0000

Up until now I have not had an opportunity to create any Silverlight procedural animations that were more complicated then positioning an object with some simple easing. I thought it would be fun to attempt to duplicate one of the transitions used on the iPhone. While making a phone call, if you choose to display the keypad there is a cool 3D flip that occurs. Here is a quick video of the transition. [[VIDEO]] In hopes not to reinvent the wheel, I embarked on an endless search of the Internet for anything resembling a flip. After some quality time on Google, I stumbled upon a great Flash site called reflektions by Paul Ortchanian. This site has a ton of Flash examples that highlight 2D and 3D effects done in flash. Those of us new to interactive development can learn a ton from the techniques Flash and Flex developers have used for years. To get started I created a simple page that contained two Grid controls, one for the front of the flip and one for the back. Both were placed inside of a single canvas named “screens”.

The guts of this effect has been encapsulated in a method called “AnimateFlip”. The result of this method is a DobuleAnimation with approximately 48 descreate keys frames.

private TimeSpan AnimateFlip(Storyboard sb, ScaleTransform scale, 
out TimeSpan tsLastFrame)
{
    double speed = 4;
    double flipRotation = 0;
    double flipped = 2;
    tsLastFrame = new TimeSpan();
    TimeSpan tsSideFlipped = new TimeSpan();
 
    int frames = 1;
    DoubleAnimationUsingKeyFrames daX = 
	new DoubleAnimationUsingKeyFrames();
    tsLastFrame = new TimeSpan();
    while (flipRotation != flipped * 180)
    {
        flipRotation += speed;
        double flipRadian = flipRotation * (Math.PI / 180);
        double size = Math.Cos(flipRadian);
        double scalar = (1 / (1 / size));
 
        DiscreteDoubleKeyFrame ddkfX = new DiscreteDoubleKeyFrame();
        ddkfX.Value = (size * scalar) ;
 
        tsLastFrame = TimeSpan.FromMilliseconds(frames * 7);
 
        //the first time we flip to negative capture the 
	//tsLastFrame so we know when we will need to
        //visualize the flip side
        flipped = (size < 0) ? +1 : +0;
        if (flipped == 1 && tsSideFlipped.Ticks == 0)
        {
            tsSideFlipped = tsLastFrame;
        }
 
        ddkfX.KeyTime = KeyTime.FromTimeSpan(tsLastFrame);
 
        //add the DiscreteDoubleKeyFrame to the 
	//DoubleAnimationUsingKeyFrames
        daX.KeyFrames.Add(ddkfX);
 
        flipRotation %= 360;
        frames++;
    }
 
    Storyboard.SetTarget(daX, scale);
    Storyboard.SetTargetProperty(daX, "ScaleX");
    sb.Children.Add(daX);
 
    VisualizeSide(sb, tsSideFlipped, 0, TimeSpan.FromMilliseconds
		((tsSideFlipped.Milliseconds + 100)), 
		back.Opacity, this.back);
    VisualizeSide(sb, TimeSpan.FromMilliseconds((
		tsSideFlipped.Milliseconds - 100)), front.Opacity, 
		tsSideFlipped, 0, this.front);
    back.Opacity = 0;
    return tsLastFrame;
}

At the very bottom of the above method their is two calls to “VisualizeSide”. This method is responsible for visualizing the second side when the screen has rotated 180 degrees (Flipped).

My animation is by no means exact, but a pretty good first attempt. If you watch the video very slowly you might notice that on the iPhones rotation it looks like it rotates in perspective. I would love to add this, but am at a lost

Code: ScreenFlip.zip

Silverlight | WPF | Microsoft.Net » DoubleAnimationUsingKeyFrames

Perspective 3D Screen flip with PlaneProjection

Silverlight 3D flip animation