DoubleAnimation.EasingFunction Property


Gets or sets the easing function applied to this animation.

 property EasingFunctionBase ^ EasingFunction { EasingFunctionBase ^ get(); void set(EasingFunctionBase ^ value); };
EasingFunctionBase EasingFunction();

void EasingFunction(EasingFunctionBase value);
public EasingFunctionBase EasingFunction { get; set; }
var easingFunctionBase = doubleAnimation.easingFunction;
doubleAnimation.easingFunction = easingFunctionBase;
Public Property EasingFunction As EasingFunctionBase

Property Value

The easing function applied to this animation.


This XAML example applies a BounceEase easing function to a DoubleAnimation to create a bouncing effect.

<StackPanel x:Name="LayoutRoot" Background="White">
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                    <BounceEase Bounces="4" EasingMode="EaseOut" 
                                Bounciness="1.8" />

    <Ellipse x:Name="ball" MouseLeftButtonDown="Clicked" 
     Fill="Blue" Width="100" Height="100">
// When the user clicks the object, the animation begins. 
private void Clicked(object sender, PointerRoutedEventArgs e)


Easing functions allow you to apply custom mathematical formulas to your animations. Mathematical operations are often useful to produce animations that simulate real-world physics in a 2-D coordinate system. For example, you may want an object to realistically bounce or behave as though it were on a spring. For a list of easing functions and info on how to use them, see Key-frame animations and easing function animations.

Applies to

See also