Skip to main content

Easing functions

Easing functions control the rate of change during an animation, giving motion a natural feel. Instead of animating at a constant speed (linear), easing functions accelerate, decelerate, or bounce values to create more engaging transitions.

Using easing functions​

Specify an easing function on a KeyFrame within a keyframe animation:

<Border Background="Blue" Width="50" Height="50">
    <Border.Styles>
        <Style Selector="Border">
            <Style.Animations>
                <Animation Duration="0:0:1" IterationCount="Infinite" PlaybackDirection="Alternate">
                    <KeyFrame Cue="0%" KeySpline="0.1,0.9,0.2,1.0">
                        <Setter Property="TranslateTransform.X" Value="0" />
                    </KeyFrame>
                    <KeyFrame Cue="100%">
                        <Setter Property="TranslateTransform.X" Value="300" />
                    </KeyFrame>
                </Animation>
            </Style.Animations>
        </Style>
    </Border.Styles>
</Border>

Or set the easing on the entire Animation:

<Animation Duration="0:0:0.5" Easing="CubicEaseOut">
    <KeyFrame Cue="0%">
        <Setter Property="Opacity" Value="0" />
    </KeyFrame>
    <KeyFrame Cue="100%">
        <Setter Property="Opacity" Value="1" />
    </KeyFrame>
</Animation>

Easing functions are also used in Transitions for property change animations:

<Border.Transitions>
    <DoubleTransition Property="Opacity" Duration="0:0:0.3" Easing="QuadraticEaseOut" />
</Border.Transitions>

Built-in easing functions​

Avalonia includes a comprehensive set of easing functions. Each function comes in three variants:

  • EaseIn: Starts slow, accelerates toward the end
  • EaseOut: Starts fast, decelerates toward the end
  • EaseInOut: Starts slow, speeds up in the middle, then slows down at the end

Linear​

NameBehavior
LinearEasingConstant speed. No acceleration or deceleration.

Sine​

Easing based on a sine curve. Produces gentle, smooth motion.

NameVariant
SineEaseInSlow start, accelerates
SineEaseOutFast start, decelerates
SineEaseInOutSlow start and end

Quadratic​

Easing based on a squared curve (t^2). Slightly more pronounced than sine.

NameVariant
QuadraticEaseInSlow start
QuadraticEaseOutFast start
QuadraticEaseInOutSlow start and end

Cubic​

Easing based on a cubed curve (t^3). More dramatic than quadratic.

NameVariant
CubicEaseInSlow start
CubicEaseOutFast start
CubicEaseInOutSlow start and end

Quartic​

Easing based on t^4. Even stronger acceleration than cubic.

NameVariant
QuarticEaseInSlow start
QuarticEaseOutFast start
QuarticEaseInOutSlow start and end

Quintic​

Easing based on t^5. The most aggressive polynomial easing.

NameVariant
QuinticEaseInSlow start
QuinticEaseOutFast start
QuinticEaseInOutSlow start and end

Exponential​

Easing based on an exponential curve. Produces a very sharp acceleration.

NameVariant
ExponentialEaseInVery slow start, sharp acceleration
ExponentialEaseOutSharp deceleration, very slow end
ExponentialEaseInOutSharp acceleration and deceleration

Circular​

Easing based on a circular curve. Produces a natural-feeling motion.

NameVariant
CircularEaseInSlow start
CircularEaseOutFast start
CircularEaseInOutSlow start and end

Back​

Overshoots the target before settling. Creates a "pull back" effect.

NameVariant
BackEaseInPulls back before accelerating forward
BackEaseOutOvershoots target, then settles back
BackEaseInOutPull back, overshoot, then settle

Bounce​

Simulates a bouncing effect at the boundary.

NameVariant
BounceEaseInBounces at the start
BounceEaseOutBounces at the end
BounceEaseInOutBounces at both ends

Elastic​

Simulates a spring or rubber band effect with oscillation.

NameVariant
ElasticEaseInOscillation at the start
ElasticEaseOutOscillation at the end
ElasticEaseInOutOscillation at both ends

Choosing an easing function​

Common use cases for each easing type:

ScenarioRecommended Easing
Fade in/outQuadraticEaseOut or CubicEaseOut
Slide a panel inCubicEaseOut
Slide a panel outCubicEaseIn
Button press feedbackQuadraticEaseInOut
Expand/collapseCubicEaseInOut
Notification pop-inBackEaseOut
Playful bouncingBounceEaseOut
Spring-like motionElasticEaseOut or SpringEasing
Subtle hover effectSineEaseOut

SplineEasing (Custom Cubic Bezier)​

For custom easing curves that do not match any built-in function, use SplineEasing with four control points that define a cubic bezier curve:

<Animation Duration="0:0:0.5">
    <Animation.Easing>
        <SplineEasing X1="0.25" Y1="0.1" X2="0.25" Y2="1.0" />
    </Animation.Easing>
    <KeyFrame Cue="0%">
        <Setter Property="Opacity" Value="0" />
    </KeyFrame>
    <KeyFrame Cue="100%">
        <Setter Property="Opacity" Value="1" />
    </KeyFrame>
</Animation>

You can also specify a spline easing inline using the KeySpline shorthand with comma-separated values:

<KeyFrame Cue="0%" KeySpline="0.25,0.1,0.25,1.0">
    <Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>

The four values (X1, Y1, X2, Y2) define two control points of a cubic bezier curve from (0,0) to (1,1). These match CSS cubic-bezier() values. Common presets:

CurveX1Y1X2Y2Equivalent
ease0.250.10.251.0CSS ease
ease-in0.4201.01.0CSS ease-in
ease-out000.581.0CSS ease-out
ease-in-out0.4200.581.0CSS ease-in-out

SpringEasing​

SpringEasing simulates physics-based spring motion. Unlike the built-in elastic easing functions, spring easing lets you control the physical properties of the spring:

<Animation Duration="0:0:1">
    <Animation.Easing>
        <SpringEasing Mass="1" Stiffness="100" Damping="10" InitialVelocity="0" />
    </Animation.Easing>
    <KeyFrame Cue="0%">
        <Setter Property="TranslateTransform.Y" Value="-50" />
    </KeyFrame>
    <KeyFrame Cue="100%">
        <Setter Property="TranslateTransform.Y" Value="0" />
    </KeyFrame>
</Animation>

Spring parameters​

ParameterDescriptionEffect of increasing
MassWeight of the object on the springSlower, heavier motion
StiffnessHow stiff the spring isFaster oscillation, snappier
DampingFriction that slows the springLess oscillation, settles faster
InitialVelocityStarting velocity of the motionStronger initial movement

Low damping produces more "bouncy" motion. High damping produces overdamped motion where the value approaches the target without oscillating.

Custom easing functions​

Create a custom easing function by subclassing Easing and overriding the Ease method:

using Avalonia.Animation.Easings;

public class StepEasing : Easing
{
    public int Steps { get; set; } = 4;

    public override double Ease(double progress)
    {
        return Math.Floor(progress * Steps) / Steps;
    }
}

Use the custom easing in XAML by referencing the namespace:

<Animation Duration="0:0:1">
    <Animation.Easing>
        <local:StepEasing Steps="8" />
    </Animation.Easing>
    <!-- keyframes -->
</Animation>

The Ease method receives a progress value from 0.0 to 1.0 representing the linear time progress, and returns a modified value (also typically 0.0 to 1.0, though overshooting is allowed for effects like BackEaseOut and ElasticEaseOut).

See also​

On this page