I mentioned in a previous blog post that I’d posted a two part video on the new 3d capabilities in Silverlight 3. Since then I’ve had a few great conversations with Jeff Paries (who knows more about Silverlight Animation than most people on the planet) and I had the opportunity to think about other, perhaps even better ways to accomplish the same thing.
This has led me to re-focus my next tutorial (forthcoming) on how 3d Animation can be used to add real value to an application (as opposed to making a great demo or a cool but not very useful bit of sizzle).
In the meantime, I did want to point you to Jeff’s latest blog post on using Silverlight 3’s perspective 3d, in which he flips a playing card through two planes and along the way explores some of the finer points of managing (for example) bit-map drop-shadow effects in a perspective transform.
| In the small world department, Jeff begins his article by pointing to Corey Schuman’s excellent summary of the fundamentals. Now, Corey and I met only recently, but he is amazingly talented and enthusiastic, and he and I will co-author Programming Silverlight 3 (which is something I should be shouting from the rooftops.) |
The key change that I did go back and make to my demo code shown in the video (not required, but cleaner) is to remove the code that moves the “back” of the panel in and out of position using a translate transform and replaced it with a change of the visibility:
Revised Storyboard
<Storyboard x:Name=”FlipFrontToBack”>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”FormFront”
Storyboard.TargetProperty=”(UIElement.Projection).(PlaneProjection.RotationY)”>
<EasingDoubleKeyFrame KeyTime=”00:00:00″ Value=”0″/>
<EasingDoubleKeyFrame KeyTime=”00:00:01″ Value=”90″/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”FormFront”
Storyboard.TargetProperty=”(UIElement.Visibility)”>
<DiscreteObjectKeyFrame KeyTime=”00:00:00″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”00:00:01″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime=”00:00:00″
Storyboard.TargetName=”FormBack” Storyboard.TargetProperty=”(UIElement.Visibility)”>
<DiscreteObjectKeyFrame KeyTime=”00:00:00″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”00:00:01″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”FormBack”
Storyboard.TargetProperty=”(UIElement.Projection).(PlaneProjection.RotationY)”>
<EasingDoubleKeyFrame KeyTime=”00:00:01″ Value=”270″/>
<EasingDoubleKeyFrame KeyTime=”00:00:02″ Value=”360″/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
For those who find complex Xaml tedious to read, here it is in pseudocode:
< Create a storyboard named "FlipFrontToBack">
<The first object to target is the stackpanel FormFront />
<change the RotationY property of the PlaneProjection >
<When we begin the angle will be 0/>
<One second later the angle will be 90/>
<Also target the visibility property />
<As soon as we start, set it to visible />
<At one second, set it to collapsed />
<We're done with formFront now let's do the FormBack />
<Start by setting its visibility to collapsed />
<At 1 second change its visibility to visible />
<Also change PlaneProjection.RotationY>
<At one second we'll set its angle to 270/>
<One second later the angle will be 360/>
<we're done />
Not so bad that way.
Bottom line, we’re still doing our slight of hand when the front panel is at 90 degrees, but instead of bringing in the back panel from offstage, we just swap visibility, which means no matter how big you make your browser you won’t see the man behind the curtain.
The code to go with the new tutorial will build on this a bit.
