Silverlight 3 Quick Tip #3: Creating custom easing for Silverlight animations
This time I’ll show how to use new easing functions for animations. In Silverlight 3 we could apply one of existing easing functions to our animation (storyboard) or create our own.
First, let’s apply existing easing function.
On my sample page I have a bunch of buttons to control UI, a stack panel with some path that looks like a spring and a ball attached to it. Also I created a storyboard to animate the Width property:
<StackPanel x:Name="LayoutRoot" Background="LightGray">
<StackPanel.Resources>
<BeginStoryboard x:Name="sb1">
<Storyboard >
<DoubleAnimation x:Name="springAnim" RepeatBehavior="Forever" AutoReverse="True" Duration="0:0:3"
From="50" To="300" Storyboard.TargetName="spring" Storyboard.TargetProperty="Width"/>
</Storyboard>
</BeginStoryboard>
</StackPanel.Resources>
<StackPanel Orientation="Horizontal">
<Button x:Name="btnAnimate" Content="No Ease" Click="btnAnimate_Click_1" Width="100" Height="25" Margin="10"/>
<Button x:Name="btnAnimate1" Content="Predefined Ease" Click="btnAnimate_Click" Width="100" Height="25" Margin="10"/>
<Button x:Name="btnAnimate2" Content="Custom Ease" Click="btnAnimate2_Click" Width="100" Height="25" Margin="10"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Path x:Name="spring" Width="100" Fill="Transparent" Stretch="Fill" Stroke="Black" StrokeThickness="2" Data="M49,306 L75,266 L91.5,303.5 L116.70348,265.5 L132.89345,300.56708 L151.9158,268.95731 L165.57288,297.60367 L175.32793,282.78659 L183.58783,281.79877" RenderTransformOrigin="0.5,0" VerticalAlignment="Center" HorizontalAlignment="Left" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Ellipse x:Name="ball" Width="30" Height="30" Fill="Red" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</StackPanel>
</StackPanel>
Now let’s see the the code behind those buttons…
No ease is simple – just assign NULL to easing function property of the storyboard:
private void btnAnimate_Click_1(object sender, RoutedEventArgs e)
{
springAnim.EasingFunction = null;
}
Using existing easing is also very simple task – just select one on existing ease function in System.Windows.Media.Animiation namespace, tweak the function parameters (optional) and assign it as EasingFunction of the storyboard:
private void btnAnimate_Click(object sender, RoutedEventArgs e)
{
ElasticEase ease = new ElasticEase();
ease.EasingMode = EasingMode.EaseOut;
ease.Springiness = 5;
ease.Oscillations = 10;
springAnim.EasingFunction = ease;
}
Now the interesting one – I’ll create my simple easing function. To do it, I have to create a new class, which derives from EasingFunctionBase class (the base class in from System.Windows.Media.Animiation namespace):
public class CustomSquareRootEase : EasingFunctionBase
{
public CustomSquareRootEase()
: base()
{
}
protected override double EaseInCore(double normalizedTime)
{
return Math.Sqrt(normalizedTime);
}
}
My math was very simple, but still not standard easing. Now the usage of this one is exactly like any other existing easing function:
private void btnAnimate2_Click(object sender, RoutedEventArgs e)
{
springAnim.EasingFunction = new CustomSquareRootEase();
}
Sample code is here.
Stay tuned to more tips and enjoy,
Alex