ElasticEase
ElasticEase
ElasticEase
ElasticEase
Class
Definition
Represents an easing function that creates an animation that resembles a spring oscillating back and forth until it comes to rest.
public : sealed class ElasticEase : EasingFunctionBase, IElasticEasepublic sealed class ElasticEase : EasingFunctionBase, IElasticEasePublic NotInheritable Class ElasticEase Inherits EasingFunctionBase Implements IElasticEase// This API is not available in Javascript.
<ElasticEase .../>
- Inheritance
-
ElasticEaseElasticEaseElasticEaseElasticEase
- 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 applies an ElasticEase easing function to a DoubleAnimation to create an animation that resembles a spring oscillating back and forth until it comes to rest.
<StackPanel x:Name="LayoutRoot" >
<StackPanel.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation From="1" To="6" Duration="00:00:3"
Storyboard.TargetName="rectScaleTransform"
Storyboard.TargetProperty="ScaleY">
<DoubleAnimation.EasingFunction>
<!-- Elastic easing function assigned to From/To animation -->
<ElasticEase x:Name="myElasticEase" Oscillations="3"
Springiness="1" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</StackPanel.Resources>
<Rectangle PointerPressed="Pointer_Clicked"
Fill="Blue" Width="200" Height="30">
<Rectangle.RenderTransform>
<ScaleTransform x:Name="rectScaleTransform" />
</Rectangle.RenderTransform>
</Rectangle>
</StackPanel>
// When the user clicks the rectangle, the animation
// begins.
private void Pointer_Clicked(object sender, PointerRoutedEventArgs e)
{
myStoryboard.Begin();
}
' When the user clicks the rectangle, the animation
' begins.
Private Sub Pointer_Clicked(ByVal sender As Object, ByVal e As PointerRoutedEventArgs)
myStoryboard.Begin()
End Sub
Remarks
ElasticEase is one of the two easing functions that can produce a value outside of the normal From/To range. (The other is BackEase.) As the easing function begins, the value oscillates positive and negative around the From value until it reaches an eventual positive amplitude that is the To value. The Springiness property modifies the sinusoidal character of this oscillation. With Springiness of 0, the oscillation is basically sinusoidal and resembles a typical diagram of a spring's motion. With larger Springiness values, it's like dampening the spring's motion.
The Oscillations property declares how many times the function oscillates and crosses into values that are actually below the starting From value.
You might get best results by just experimenting with the Springiness, Oscillations and EasingMode properties until the animation is visually doing what you want for your animated property value scenario.
BounceEase is a similar easing function that works well for physics emulation in animations. The difference with ElasticEase is that a BounceEase won't ever go outside the From/To range. Another way to conceptualize the two easing functions is that ElasticEase is what you might use to animate the plucking of a string, whereas BounceEase is what you might use to show the bounce of a ball against a line or plane.
An easing function can be applied to the EasingFunction properties of From/To/By animations, or to the EasingFunction properties of key-frame types used for the Easing variants of key-frame animations. For more info, see Key-frame animations and easing function animations.
Constructors
ElasticEase() ElasticEase() ElasticEase() ElasticEase()
Initializes a new instance of the ElasticEase class.
public : ElasticEase()public ElasticEase()Public Sub New()// This API is not available in Javascript.
Properties
Oscillations Oscillations Oscillations Oscillations
Gets or sets the number of times the target slides back and forth over the animation destination.
public : int Oscillations { get; set; }public int Oscillations { get; set; }Public ReadWrite Property Oscillations As int// This API is not available in Javascript.
<ElasticEase Oscillations="int"/>
- Value
- int int int int
The number of times the target slides back and forth over the animation destination. This value must be greater than or equal to 0. The default is 3.
OscillationsProperty OscillationsProperty OscillationsProperty OscillationsProperty
Identifies the Oscillations dependency property.
public : static DependencyProperty OscillationsProperty { get; }public static DependencyProperty OscillationsProperty { get; }Public Static ReadOnly Property OscillationsProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Oscillations dependency property.
Springiness Springiness Springiness Springiness
Gets or sets the stiffness of the spring. The smaller the Springiness value is, the stiffer the spring and the faster the elasticity decreases in intensity over each oscillation.
public : double Springiness { get; set; }public double Springiness { get; set; }Public ReadWrite Property Springiness As double// This API is not available in Javascript.
<ElasticEase Springiness="double"/>
- Value
- double double double double
A positive number that specifies the stiffness of the spring. The default value is 3.
SpringinessProperty SpringinessProperty SpringinessProperty SpringinessProperty
Identifies the Springiness dependency property.
public : static DependencyProperty SpringinessProperty { get; }public static DependencyProperty SpringinessProperty { get; }Public Static ReadOnly Property SpringinessProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Springiness dependency property.