BackEase BackEase BackEase BackEase Class

Definition

Represents an easing function that changes a value in the opposite direction of the main function during part of a duration, then reverses and finishes the function-over-time behavior in a conventional way.

public : sealed class BackEase : EasingFunctionBase, IBackEasepublic sealed class BackEase : EasingFunctionBase, IBackEasePublic NotInheritable Class BackEase Inherits EasingFunctionBase Implements IBackEase// This API is not available in Javascript.
<BackEase .../>
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

The following example applies a BackEase easing function to a DoubleAnimation to create an animation that retracts slightly at the beginning and end of the animation.

<StackPanel x:Name="LayoutRoot" >
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
                <DoubleAnimation From="1" To="2" Duration="00:00:1" 
                Storyboard.TargetName="myScaleTransform" 
                Storyboard.TargetProperty="ScaleX">
                <DoubleAnimation.EasingFunction>
                    <BackEase Amplitude="0.3" EasingMode="EaseInOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

    <Rectangle Margin="60" x:Name="myRectangle" PointerPressed="Pointer_Clicked" 
     Fill="Blue" Width="50" Height="50" >
        
        <Rectangle.RenderTransform>
            <ScaleTransform x:Name="myScaleTransform" />
        </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

BackEase is one of the two easing functions that can produce a value outside of the normal From/To range. (The other is ElasticEase.)

  • If EasingMode is EaseIn (the default) then the function starts by changing the value in the opposite direction of the value change that From and To indicate, in other words it initially produces a value that's less than the From value.
  • If EasingMode is EaseOut then the function starts in a typical way, but near the end will exceed the To value and then come back to the To value at the end.
  • If EasingMode is EaseInOut then the function gives values that are less than From at the beginning and greater than To near the end. This illustration shows a function-over-time graph approximation for a BackEase for each of the three possible EasingMode values, with Amplitude as its default value.Illustration of function-over-time graph for the BackEase easing function. The graph shows curves where the x axis is time t and the y axis is function-over-time f(t)

You might get best results by just experimenting with the Springiness and EasingMode properties until the animation is visually doing what you want for your animated property value scenario.

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

BackEase() BackEase() BackEase() BackEase()

Initializes a new instance of the BackEase class.

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

Properties

Amplitude Amplitude Amplitude Amplitude

Gets or sets the amplitude of retraction associated with a BackEase animation.

public : double Amplitude { get; set; }public double Amplitude { get; set; }Public ReadWrite Property Amplitude As double// This API is not available in Javascript.
<BackEase Amplitude="double" .../>

Value
double double double double

The amplitude of retraction associated with a BackEase animation. This value must be greater than or equal to 0. The default is 1.

Examples

The following example applies a BackEase easing function to a DoubleAnimation to create an animation that retracts slightly at the beginning and end of the animation.

<StackPanel x:Name="LayoutRoot" >
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
                <DoubleAnimation From="1" To="2" Duration="00:00:1" 
                Storyboard.TargetName="myScaleTransform" 
                Storyboard.TargetProperty="ScaleX">
                <DoubleAnimation.EasingFunction>
                    <BackEase Amplitude="0.3" EasingMode="EaseInOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

    <Rectangle Margin="60" x:Name="myRectangle" PointerPressed="Pointer_Clicked" 
     Fill="Blue" Width="50" Height="50" >
        
        <Rectangle.RenderTransform>
            <ScaleTransform x:Name="myScaleTransform" />
        </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

AmplitudeProperty AmplitudeProperty AmplitudeProperty AmplitudeProperty

Identifies the Amplitude dependency property.

public : static DependencyProperty AmplitudeProperty { get; }public static DependencyProperty AmplitudeProperty { get; }Public Static ReadOnly Property AmplitudeProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Amplitude dependency property.

See Also