Easing​Double​Key​Frame Easing​Double​Key​Frame Easing​Double​Key​Frame Easing​Double​Key​Frame Class


Associates an easing function with a DoubleAnimationUsingKeyFrames key-frame animation.

public : sealed class EasingDoubleKeyFrame : DoubleKeyFrame, IEasingDoubleKeyFramepublic sealed class EasingDoubleKeyFrame : DoubleKeyFrame, IEasingDoubleKeyFramePublic NotInheritable Class EasingDoubleKeyFrame Inherits DoubleKeyFrame Implements IEasingDoubleKeyFrame// This API is not available in Javascript.
<EasingDoubleKeyFrame .../>
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited methods

Inherited properties


This XAML example shows how to use key frames that have easing functions associated with them to create an animation of a rectangle that contracts upward, slows down, then expands downward (as though falling), and then bounces to a stop.

<StackPanel x:Name="LayoutRoot" >
        <Storyboard x:Name="myStoryboard">
             Storyboard.TargetName="myRectangle" EnableDependentAnimation="true">

                <!-- This keyframe animates the ellipse up to the crest 
                     where it slows down and stops. -->
                <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                        <CubicEase EasingMode="EaseOut"/>

                <!-- This keyframe animates the ellipse back down and makes
                     it bounce. -->
                <EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
                        <BounceEase Bounces="5" EasingMode="EaseOut"/>


    <Rectangle x:Name="myRectangle" PointerPressed="Pointer_Clicked" 
     Fill="Blue" Width="200" Height="200" />
// When the user clicks the rectangle, the animation
// begins. 
private void Pointer_Clicked(object sender, PointerRoutedEventArgs e)
' When the user clicks the rectangle, the animation
' begins. 
Private Sub Pointer_Clicked(ByVal sender As Object, ByVal e As PointerRoutedEventArgs)
End Sub


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.


EasingDoubleKeyFrame() EasingDoubleKeyFrame() EasingDoubleKeyFrame() EasingDoubleKeyFrame()

Initializes a new instance of the EasingDoubleKeyFrame class.

public : EasingDoubleKeyFrame()public EasingDoubleKeyFrame()Public Sub New()// This API is not available in Javascript.


EasingFunction EasingFunction EasingFunction EasingFunction

Gets or sets the easing function that is applied to the key frame.

public : EasingFunctionBase EasingFunction { get; set; }public EasingFunctionBase EasingFunction { get; set; }Public ReadWrite Property EasingFunction As EasingFunctionBase// This API is not available in Javascript.
  </EasingPointKeyFrame.EasingFunction >
EasingFunctionBase EasingFunctionBase EasingFunctionBase EasingFunctionBase

The easing function that is applied to the key frame.

EasingFunctionProperty EasingFunctionProperty EasingFunctionProperty EasingFunctionProperty

Identifies the EasingFunction dependency property.

public : static DependencyProperty EasingFunctionProperty { get; }public static DependencyProperty EasingFunctionProperty { get; }Public Static ReadOnly Property EasingFunctionProperty As DependencyProperty// This API is not available in Javascript.

See Also