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
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 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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Springiness dependency property.

See Also