Windows.UI.Xaml.Media.Animation.ElasticEase

-description

Represents an easing function that creates an animation that resembles a spring oscillating back and forth until it comes to rest.

-xaml-syntax

<ElasticEase .../>

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

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

[!code-xamlElasticEase]

[!code-csharpElasticEase_code]

[!code-vbElasticEase_code]

-see-also

Storyboarded animations, Key-frame animations and easing function animations, PowerEase, BackEase, BounceEase, CircleEase, CubicEase, ExponentialEase, QuadraticEase, QuarticEase, QuinticEase, SineEase, QuinticEase, SineEase