DoubleAnimation.EasingFunction Property

Reference

Definition

Namespace:: Windows.UI.Xaml.Media.Animation

Important

Some information relates to prerelease product that may be substantially modified before it’s released. Microsoft makes no warranties, express or implied, with respect to the information provided here.

Edit

Gets or sets the easing function applied to this animation.

public:
 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

<DoubleAnimation>
  <DoubleAnimation.EasingFunction>
    singleEasingFunction
  </DoubleAnimation.EasingFunction>
</DoubleAnimation>

Property Value

EasingFunctionBase

The easing function applied to this animation.

Examples

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

<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                Storyboard.TargetName="ball" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="4" EasingMode="EaseOut" 
                                Bounciness="1.8" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

    <Ellipse x:Name="ball" MouseLeftButtonDown="Clicked" 
     Fill="Blue" Width="100" Height="100">
      <Ellipse.RenderTransform>
        <TranslateTransform/>
      <Ellipse.RenderTransform>
    <Ellipse
</StackPanel>

// When the user clicks the object, the animation begins. 
private void Clicked(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

Remarks

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