ExponentialEase Class

You can control whether the animation accelerates, decelerates or both by specifying the EasingMode. The following graph demonstrates the different values of EasingMode where f(t) represents the animation progress and t represents time.

The formula used for this function is the following.

Using the formula above, the following graph illustrates the effect of several different values for the Exponent property:

There are several other easing functions besides ExponentialEase which you can explore using the following sample.

Run this sample

In addition to using the easing functions included in the run-time, you can create your own custom easing functions by inheriting from EasingFunctionBase.

The following example applies a ExponentialEase easing function to a DoubleAnimation to create a decelerating animation.

Run this sample

<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                Storyboard.TargetName="myRectangle" 
                Storyboard.TargetProperty="Height">
                <DoubleAnimation.EasingFunction>
                    <ExponentialEase Exponent="6" EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

    <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" 
     Fill="Blue" Width="200" Height="30" />

</StackPanel>

// When the user clicks the rectangle, the animation
// begins. 
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}

Silverlight

Silverlight for Windows Phone

For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.

Reference

Other Resources