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.