Creating Custom Easing Functions in WPF 4 (and Silverlight)

In a previous post and video, I went through how to use the stock easing functions in your WPF 4 applications. Now, let’s look at how to create your own easing functions.

Once you know the formula you want to use, the mechanics of creating custom easing functions is pretty simple.

Example Project

We’ll use something almost identical to what was used in the easing function post and video. Create a standard WPF project, and set up the MainWindow so it looks like this:

Here’s the xaml

<Window x:Class="CustomEasingDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="600" Width="825">
    <Window.Resources>
        <Storyboard x:Key="AnimateTarget">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
                                           Storyboard.TargetProperty="X">
                <EasingDoubleKeyFrame KeyTime="0:0:0"
                                      Value="0.0" />
                <EasingDoubleKeyFrame KeyTime="0:0:3"
                                      Value="202.0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <ElasticEase EasingMode="EaseOut"
                                     Oscillations="3"
                                     Springiness="8" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
                                           Storyboard.TargetProperty="Y">
                <EasingDoubleKeyFrame KeyTime="0:0:0"
                                      Value="0.0" />
                <EasingDoubleKeyFrame KeyTime="0:0:3"
                                      Value="202.0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <ElasticEase EasingMode="EaseOut"
                                     Oscillations="3"
                                     Springiness="8" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
 
    <Grid>
        <Rectangle Height="20"
                   Width="20"
                   RenderTransformOrigin="0.5,0.5"
                   Fill="BlueViolet">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="Transform" />
            </Rectangle.RenderTransform>
        </Rectangle>
 
        <Button x:Name="StartAnimation"
                Click="StartAnimation_Click"
                Content="Start"
                Width="100"
                Height="40"
                HorizontalAlignment="Center"
                VerticalAlignment="Bottom"
                Margin="5" />
    </Grid>
 
</Window>

And here’s the code-behind

public  partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
 
    private void StartAnimation_Click(object sender, RoutedEventArgs e)
    {
        ((Storyboard)this.Resources["AnimateTarget"]).Begin();
    }
}

If you run that project, you’ll see how the ElasticEase works on the position of the cube. We’ll replace that elastic ease with a function of our own.

Custom Easing Basics

The WPF and Silverlight teams put together a pretty comprehensive set of standard easing functions. Most folks will never need or want to write one of their own.

That said, you may come up with a specialized function and want to package that in a way that enables others to use it from xaml or code in their own animation.

To create your own easing function, you derive from EasingFunctionBase and override both EaseInCore and CreateInstanceCore.

EasingFunctionBase.CreateInstanceCore

This method is WPF-specific, and wouldn’t be used in Silverlight as Silverlight has no concept of Freezables. In WPF, this function is used to return a new instance of the Freezable class.

EasingFunctionBase.EaseInCore

This is where your easing code goes. You provide the implementation for EaseIn, and the runtime will figure out how to derive EaseOut and EaseInOut.

EaseInCore takes a double representing normalized time, and expects you to return the progress for that point in time. If you think of time as the x-axis on a graph and progress as the y-axis, you’re taking in x and returning y.

A standard linear ease would return the value passed in. f(x) = x . Instantaneous movement would be f(x) = 1. No movement (ever) would be f(x) = 0. The interesting stuff happens when the result is between those numbers.

Custom Easing Functions

I created two simple easing functions to demonstrate the process. If you come up with your own functions (that are more useful than these) comment here and let us know about them.

PowerOfSixEase

Here’s the code for a simple “Power of 6” ease. This uses the built-in math library and simply calls the Pow function on the normalized time.

class  PowerOfSixEase : EasingFunctionBase
{
    protected override double EaseInCore(double normalizedTime)
    {
        return Math.Pow(normalizedTime, 6);
    }
 
    protected override System.Windows.Freezable CreateInstanceCore()
    {
        return new PowerOfSixEase();
    }
}

To use this in xaml, we first need to set up a namespace to refer to our local code.

xmlns:local="clr-namespace:CustomEasingDemo"

Then replace the ElasticEase with our own function

<EasingDoubleKeyFrame.EasingFunction>
    <local:PowerOfSixEase EasingMode=”EaseIn”/>
</EasingDoubleKeyFrame.EasingFunction>

When you run it, you see the block move smoothly to the right bottom, but with a delay while the numbers build up enough to actually move the block. Of course, we could simply have used the built-in PowerEase and supplied a parameter of 6, but that wouldn’t have demonstrated creating your own function.

RandomEase

Now let’s try something a little crazier. Why not return a random number? At the same time, let’s see how to add parameters to the easing function.

class  RandomEase : EasingFunctionBase
{
    Random _random;
 
    public RandomEase()
        : base()
    {
        _random = new Random();
    }
 
    private int _seed;
    public int Seed
    {
        get { return _seed; }
        set { _seed = value; _random = new Random(value); }
    }
 
    private int _randomness = 5;
    public int Randomness
    {
        get { return _randomness; }
        set { _randomness = value; }
    }
     
 
    protected override double EaseInCore(double normalizedTime)
    {
        return ((double)_random.Next(-10000, 10000) / 10000) * (double)_randomness/100 + normalizedTime;
    }
 
    protected override System.Windows.Freezable CreateInstanceCore()
    {
        return new RandomEase();
    }
}

We’ll use different easing function parameters for X and Y. The Seed parameter provides the seed to the random number generator. The Randomness parameter helps control how wild the jittering is. A low number like 1 just looks like choppy animation. After about 2-4, it jitters, and a number like 100 animates all over the map.

The Seed doesn’t do much other than demonstrate using a parameter (and let me work in some trivia-based numbers *)

<Storyboard x:Key="AnimateTarget">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
                                   Storyboard.TargetProperty="X">
        <EasingDoubleKeyFrame KeyTime="0:0:0"
                              Value="0.0" />
        <EasingDoubleKeyFrame KeyTime="0:0:3"
                              Value="202.0">
            <EasingDoubleKeyFrame.EasingFunction>
                <local:RandomEase EasingMode="EaseIn" Seed="3263827" Randomness="100"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
                                   Storyboard.TargetProperty="Y">
        <EasingDoubleKeyFrame KeyTime="0:0:0"
                              Value="0.0" />
        <EasingDoubleKeyFrame KeyTime="0:0:3"
                              Value="202.0">
            <EasingDoubleKeyFrame.EasingFunction>
                <local:RandomEase EasingMode="EaseIn" Seed="8675309" Randomness="5"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
   </DoubleAnimationUsingKeyFrames>
</Storyboard>

* 3263827 was the Novell Netware IPX address of the server for the first network I ever set up. Given the junk files that people put on that box, the number was fitting :)

That’s it for creating your own easing functions. As you can see, the hardest part is coming up with a formula that represents some interesting movement, and hasn’t already been included in the base class library. The plumbing code itself couldn’t get much simpler.

Source code and a video version of this example will be up on windowsclient.net soon. I’ll update this post with links at that time.