Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

Creating Custom Easing Functions in WPF 4 (and Silverlight)

Pete Brown - 04 November 2009

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:

image

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.

Using a static image to show an example of easing is ... clever :) 

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.

Update 11/25/2009 The video is located here.

       
posted by Pete Brown on Wednesday, November 4, 2009
filed under:        

4 comments for “Creating Custom Easing Functions in WPF 4 (and Silverlight)”

  1. Pete Brownsays:
    Correction to the above. If you want to use your own custom properties, they need to be declared as DependencyProperty.

    Example:
    public int Randomness
    {
    get { return (int)GetValue(RandomnessProperty); }
    set { SetValue(RandomnessProperty, value); }
    }

    public static readonly DependencyProperty RandomnessProperty =
    DependencyProperty.Register("Randomness", typeof(int), typeof(RandomEase), new UIPropertyMetadata(5));
  2. John Rahnsays:
    Very good explanation and video.

    However, I could not get the Example Project to run using VS 2010. The Begin() statement, "((Storyboard)this.Resources["AnimateTarget"]).Begin();", was the problem that the Debugger found. The statement was "Cannot resolve all property references in the property path 'X'. Verify that applicable objects support the properties.". I wondered if Canvas.LeftProperty would work instead of "X". But gave the same error message.

    Thanks in advance.

Comment on this Post

Remember me

4 trackbacks for “Creating Custom Easing Functions in WPF 4 (and Silverlight)”

  1. POKE 53280,0: Pete Brown's Blog : Creating Custom Easing Functions in WPF 4 (and Silverlight)says:
    PingBack from http://community.irritatedvowel.com/blogs/pete_browns_blog/archive/2009/11/04/Creating-Custom-Easing-Functions-in-WPF-4-_2800_and-Silverlight_2900_.aspx
  2. POKE 53280,0: Pete Brown's Blog : Creating Custom Easing Functions in WPF 4 (and Silverlight)says:
    PingBack from http://community.irritatedvowel.com/blogs/pete_browns_blog/archive/2009/11/04/Creating-Custom-Easing-Functions-in-WPF-4-_2800_and-Silverlight_2900_.aspx
  3. uberVU - social commentssays:
    This post was mentioned on Twitter by Pete_Brown: Blogged: Creating Custom easing Functions in WPF 4 (and Silverlight) http://bit.ly/1cWlyV
  4. Windows Client Newssays:
    A walkthrough of creating your own custom easing functions in WPF 4 and Visual Studio 2010. Pete Brown