Funky Popups in Silverlight 3

An old post of mine, Funky Popups using Tweener, showed how you could use the Tweener library in SilverlightContrib to make some interesting transitions.

When Silverlight 3 was released, they added these kinds of tweening functions into the core runtime, so it’s probably time to look at how to use them.

In the original code, our storyboard for one of the items looked like this:


<DoubleAnimationUsingKeyFrames
 Storyboard.TargetName="bounceScaleTransform"
 Storyboard.TargetProperty="ScaleX"
 tween:Tween.From="0.6"
 tween:Tween.To="1"
 tween:Tween.Fps="10"
 tween:Tween.TransitionType="EaseOutBounce"
 Duration="0:0:0.5"/>

Here’s how the equivalent using Silverlight 3’s easing functions. One important different is that we’re not forced to use a keyframe animation any more.


<DoubleAnimation
 Storyboard.TargetName="bounce3ScaleTransform"
 Storyboard.TargetProperty="ScaleX"
 From="0.6"
 To="1"
 Duration="0:0:0.5">
 <DoubleAnimation.EasingFunction>
 <BounceEase EasingMode="EaseOut" Bounces="1" Bounciness="4"/>
 </DoubleAnimation.EasingFunction>
 </DoubleAnimation>

In place of the tweener attributes is the EasingFunction which can be one of several kinds. To simulate the old bounce behaviour we’ve used a BounceEase function and set EaseOut for the easing mode. The attributes Bounces and Bounciness can adjust the amount of bounce. These values get close to the Tweener behaviour and are fine for our behaviour.

The Swish animation can be similarly replaced by BounceEase animations.

The updated project can be downloaded from here.

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s