EasingFunction property

DoubleAnimation.EasingFunction property

Gets or sets the easing function applied to this animation.

Syntax


public EasingFunctionBase EasingFunction { get; set; }


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

XAML Values

singleEasingFunction

A single object element for an easing function type that derives from EasingFunctionBase, for example, <PowerEase/>.

Property value

Type: EasingFunctionBase

The easing function applied to this animation.

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.

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();
        }

Requirements (Windows 10 device family)

Device family

Universal, introduced version 10.0.10240.0

API contract

Windows.Foundation.UniversalApiContract, introduced version 1.0

Namespace

Windows.UI.Xaml.Media.Animation
Windows::UI::Xaml::Media::Animation [C++]

Metadata

Windows.Foundation.UniversalApiContract.winmd

Requirements (Windows 8.x and Windows Phone 8.x)

Minimum supported client

Windows 8

Minimum supported server

Windows Server 2012

Minimum supported phone

Windows Phone 8.1 [Windows Runtime apps only]

Namespace

Windows.UI.Xaml.Media.Animation
Windows::UI::Xaml::Media::Animation [C++]

Metadata

Windows.winmd

See also

DoubleAnimation
Storyboarded animations
Key-frame animations and easing function animations
XAML animation sample

 

 

Show:
© 2016 Microsoft