Skip to main content

Animation settings

This section describes how Animation playback can be customized.

Easing functions

Easing functions describe how quickly an animated property changes from its starting value into its ending value across the animation time. Avalonia.Animation.Easings contains the following easings:

Default
LinearEasing
Graph showing linear easing curve
Ease-InEase-OutEase-In-Out
SineEaseIn
Graph showing SineEaseIn curve
SineEaseOut
Graph showing SineEaseOut curve
SineEaseInOut
Graph showing SineEaseInOut curve
QuadraticEaseIn
Graph showing QuadraticEaseIn curve
QuadraticEaseOut
Graph showing QuadraticEaseOut curve
QuadraticEaseInOut
Graph showing QuadraticEaseInOut curve
CubicEaseIn
Graph showing CubicEaseIn curve
CubicEaseOut
Graph showing CubicEaseOut curve
CubicEaseInOut
Graph showing CubicEaseInOut curve
QuarticEaseIn
Graph showing QuarticEaseIn curve
QuarticEaseOut
Graph showing QuarticEaseOut curve
QuarticEaseInOut
Graph showing QuarticEaseInOut curve
QuinticEaseIn
Graph showing QuinticEaseIn curve
QuinticEaseOut
Graph showing QuinticEaseOut curve
QuinticEaseInOut
Graph showing QuinticEaseInOut curve
ExponentialEaseIn
Graph showing ExponentialEaseIn curve
ExponentialEaseOut
Graph showing ExponentialEaseOut curve
ExponentialEaseInOut
Graph showing ExponentialEaseInOut curve
CircularEaseIn
Graph showing CircularEaseIn curve
CircularEaseOut
Graph showing CircularEaseOut curve
CircularEaseInOut
Graph showing CircularEaseInOut curve
BackEaseIn
Graph showing BackEaseIn curve
BackEaseOut
Graph showing BackEaseOut curve
BackEaseInOut
Graph showing BackEaseInOut curve
ElasticEaseIn
Graph showing ElasticEaseIn curve
ElasticEaseOut
Graph showing ElasticEaseOut curve
ElasticEaseInOut
Graph showing ElasticEaseInOut curve
BounceEaseIn
Graph showing BounceEaseIn curve
BounceEaseOut
Graph showing BounceEaseOut curve
BounceEaseInOut
Graph showing BounceEaseInOut curve

Additionally, you can provide your own easing by deriving from Easing or by providing parameters to SplineEasing or SpringEasing.

FillModes

The FillMode attribute of an Animation defines how the animated property persists after an animation completes and during delays in-between runs.

The following table describes the supported behaviors:

ValueDescription
NoneValue will not persist after animation nor the first value will be applied when the animation is delayed.
ForwardThe last interpolated value will be persisted to the target property.
BackwardThe first interpolated value will be displayed on animation delay.
BothBoth Forward and Backward behaviors will be applied.

PlaybackDirection

PlaybackDirection defines how the Animation will be played. The following table describes the possible settings:

ValueDescription
NormalThe animation is played normally.
ReverseThe animation is played in reverse direction.
AlternateThe animation is played forwards first, then backwards.
AlternateReverseThe animation is played backwards first, then forwards.

IterationCount

The IterationCount on an Animation element sets how many times it is to be replayed. There are two formats for this setting:

ValueDescription
N(N is an integer) - play N times. N can be zero.
InfiniteRepeats forever

See also