Skip to content

Latest commit

 

History

History
74 lines (58 loc) · 2.93 KB

doubleanimation_easingfunction.md

File metadata and controls

74 lines (58 loc) · 2.93 KB
Raw
-api-id -api-type
P:Windows.UI.Xaml.Media.Animation.DoubleAnimation.EasingFunction
winrt property

Windows.UI.Xaml.Media.Animation.DoubleAnimation.EasingFunction

-description

Gets or sets the easing function applied to this animation.

-xaml-syntax

<DoubleAnimation>
  <DoubleAnimation.EasingFunction>
    singleEasingFunction
  </DoubleAnimation.EasingFunction>
</DoubleAnimation>

-xaml-values

singleEasingFunction
singleEasingFunctionA single object element for an easing function type that derives from EasingFunctionBase, for example, <PowerEase/>.
## -property-value The easing function applied to this animation.

-remarks

Easing functions allow you to apply custom mathematical formulas to your animations. Mathematical operations are often useful to produce animations that simulate real-world physics in a 2-D coordinate system. For example, you may want an object to realistically bounce or behave as though it were on a spring. For a list of easing functions and info on how to use them, see Key-frame animations and easing function animations.

-examples

This XAML example applies a BounceEase easing function to a DoubleAnimation to create a bouncing effect.

    <StackPanel x:Name="LayoutRoot" Background="White">
        <StackPanel.Resources>
            <Storyboard x:Name="myStoryboard">
                <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                    Storyboard.TargetName="ball" 
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
                    <DoubleAnimation.EasingFunction>
                        <BounceEase Bounces="4" EasingMode="EaseOut" 
                                    Bounciness="1.8" />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
        </StackPanel.Resources>

        <Ellipse x:Name="ball" MouseLeftButtonDown="Clicked" 
         Fill="Blue" Width="100" Height="100">
          <Ellipse.RenderTransform>
            <TranslateTransform/>
          <Ellipse.RenderTransform>
        <Ellipse
    </StackPanel>
        // When the user clicks the object, the animation begins. 
        private void Clicked(object sender, PointerRoutedEventArgs e)
        {
            myStoryboard.Begin();
        }

-see-also

Storyboarded animations, Key-frame animations and easing function animations, XAML animation sample