EasingPointKeyFrame EasingPointKeyFrame EasingPointKeyFrame EasingPointKeyFrame Class

Definition

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

public : sealed class EasingPointKeyFrame : PointKeyFrame, IEasingPointKeyFramepublic sealed class EasingPointKeyFrame : PointKeyFrame, IEasingPointKeyFramePublic NotInheritable Class EasingPointKeyFrame Inherits PointKeyFrame Implements IEasingPointKeyFrame// This API is not available in Javascript.
<EasingPointKeyFrame .../>
Inheritance
EasingPointKeyFrameEasingPointKeyFrameEasingPointKeyFrameEasingPointKeyFrame
Attributes
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

Examples

This XAML example shows how to use key frames that have easing functions associated with them to create an animation that simulates an oval going up in the air and falling back down, where it bounces to a stop.

<Canvas Width="400" Height="300">
    <Canvas.Resources>
        <Storyboard x:Name="myStoryboard">

            <PointAnimationUsingKeyFrames
             Storyboard.TargetProperty="Center"
             Storyboard.TargetName="MyAnimatedEllipseGeometry"
             EnableDependentAnimation="True">

                <!-- This keyframe animates the ellipse up to the crest 
                     where it slows down and stops. -->
                <EasingPointKeyFrame Value="50,20" KeyTime="00:00:02">
                    <EasingPointKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </EasingPointKeyFrame.EasingFunction>
                </EasingPointKeyFrame>
                
                <!-- This keyframe animates the ellipse back down and makes
                     it bounce. -->
                <EasingPointKeyFrame Value="50,200" KeyTime="00:00:06">
                    <EasingPointKeyFrame.EasingFunction>
                        <BounceEase Bounces="5" EasingMode="EaseOut"/>
                    </EasingPointKeyFrame.EasingFunction>
                </EasingPointKeyFrame>

            </PointAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Path PointerPressed="Pointer_Clicked" Fill="Blue">
        <Path.Data>

            <!-- Describes an ellipse. -->
            <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
             Center="50,200" RadiusX="15" RadiusY="15" />
        </Path.Data>
    </Path>
</Canvas>
// When the user clicks the ellipse, the animation
// begins. 
private void Pointer_Clicked(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}
' When the user clicks the ellipse, the animation
' begins. 
Private Sub Pointer_Clicked(ByVal sender As Object, ByVal e As PointerRoutedEventArgs)
    myStoryboard.Begin()
End Sub

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.

Constructors

EasingPointKeyFrame() EasingPointKeyFrame() EasingPointKeyFrame() EasingPointKeyFrame()

Initializes a new instance of the EasingPointKeyFrame class.

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

Properties

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>
  <EasingPointKeyFrame.EasingFunction>
    easingFunction
  </EasingPointKeyFrame.EasingFunction >
</EasingPointKeyFrame> 

Value
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