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
| 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>
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.
The identifier for the EasingFunction dependency property.