WPF and easing (i) N-time easing

If we want to make the animation effect as smooth as the real life movement, such as car start and stop there is always a process of acceleration or deceleration, then we need to study the "easing"

The process of increasing speed, such as the start-up of a car.

If we use the slope of the point on the curve to express the velocity, then mathematically it corresponds to the following curve:

The process of decreasing speed, such as the stopping of a car.

In mathematics, it corresponds to the following curve.

In the case of accelerated motion, according to the following formulas such as position and acceleration

We can get that the speed of any moment equals the total distance multiplied by the ratio of the current time to the total time, and the total distance will actually be quite the difference from the to and from animation in WPF, The ratio between the current time and the total time is actually equivalent to the AnimationClock.CurrentProgress.Value value in WPF.

In addition, we find that the larger the exponential of the curve, the faster the slope of the point changes, and the greater the acceleration.

With this knowledge, we can simulate the acceleration movement very well.

Refer to the following code

Using System;
Using System.Collections.Generic;
Using System.Text;
Using System.Windows.Media.Animation;
Using System.Windows;

Namespace Easemovedemo
{
public class Easemoveanimation:doubleanimationbase
{

public static readonly DependencyProperty Fromproperty = Dependencyproperty.register (
"From", typeof (Double), typeof (Easemoveanimation), new PropertyMetadata (null));

public static readonly DependencyProperty Toproperty = Dependencyproperty.register (
"To", typeof (Double), typeof (Easemoveanimation), new PropertyMetadata (null));

public static readonly DependencyProperty Powerproperty = Dependencyproperty.register (
"Power", typeof (Double), typeof (Easemoveanimation), new PropertyMetadata (null));

Public double? From
{
Get
{
Return (double?) This. GetValue (Easemoveanimation.fromproperty);
}
Set
{
This. SetValue (easemoveanimation.fromproperty, value);
}
}

Public double? To
{
Get
{
Return (double?) This. GetValue (Easemoveanimation.toproperty);
}
Set
{
This. SetValue (easemoveanimation.toproperty, value);
}
}

/**////<summary>
Power exponent, the greater the value, the greater the slope of the point on the curve, the greater the acceleration, set to 5 o'clock the effect is better
</summary>
Public double? Power
{
Get
{
Return (double?) This. GetValue (Easemoveanimation.powerproperty);
}
Set
{
This. SetValue (easemoveanimation.powerproperty, value);
}
}

protected override double GetCurrentValueCore (double defaultoriginvalue, double defaultdestinationvalue, AnimationClock AnimationClock)
{
Double from = (this. From==null?defaultdestinationvalue: (double) this. from);
Double to = (this. To==null?defaultoriginvalue: (double) this. To);
Double delta = to-from;
Double power = this. Power = null? 2: (double) this. Power;

Accelerated
Return Delta * MATH.POW (AnimationClock.CurrentProgress.Value, Power) + from;
Return Delta * MATH.POW (AnimationClock.CurrentProgress.Value, 1/power) + from;

Accelerate and slow down first.
if (AnimationClock.CurrentProgress.Value < 0.5)
//{
Return DELTA/2 * MATH.POW (AnimationClock.CurrentProgress.Value * 2, Power) + from;
/

This article supporting source code