DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Create a WPF Application

Trending

  • Five Free AI Tools for Programmers to 10X Their Productivity
  • A Better Web3 Experience: Account Abstraction From Flow (Part 1)
  • Creating a Custom Starter With Spring Boot 3
  • Information Security: AI Security Within the IoT Industry

Creating Custom Easing Functions in WPF 4 (and Silverlight)

Pete Brown user avatar by
Pete Brown
·
Nov. 10, 09 · News
Like (0)
Save
Tweet
Share
10.55K Views

Join the DZone community and get the full member experience.

Join For Free

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.

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.

 

Windows Presentation Foundation

Published at DZone with permission of Pete Brown. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Create a WPF Application

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: