--- title: "Easing Functions" ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "applying mathematical formulas to animations [WPF]" - "applying easing functions to animations [WPF]" - "mathematical formulas [WPF], applying to animations" - "animations [WPF], realistic movement" - "easing functions [WPF]" - "customizing easing functions [WPF]" - "easing functions [WPF], definition" - "easing functions [WPF], customizing" - "animations [WPF], applying" ms.assetid: 075b9c2b-82c4-43fa-b3cd-de0b6236eb38 --- # Easing Functions Easing functions allow you to apply custom mathematical formulas to your animations. For example, you may want an object to realistically bounce or behave as though it were on a spring. You could use Key-Frame or even From/To/By animations to approximate these effects but it would take a significant amount of work and the animation would be less accurate than using a mathematical formula. Besides creating your own custom easing function by inheriting from , you can use one of several easing functions provided by the runtime to create common effects. - : Retracts the motion of an animation slightly before it begins to animate in the path indicated. - : Creates a bouncing effect. - : Creates an animation that accelerates and/or decelerates using a circular function. - : Creates an animation that accelerates and/or decelerates using the formula *f*(*t*) = *t*³. - : Creates an animation that resembles a spring oscillating back and forth until it comes to rest. - : Creates an animation that accelerates and/or decelerates using an exponential formula. - : Creates an animation that accelerates and/or decelerates using the formula *f*(*t*) = *t*^p where p is equal to the property. - : Creates an animation that accelerates and/or decelerates using the formula *f*(*t*) = *t*². - : Creates an animation that accelerates and/or decelerates using the formula *f*(*t*) = *t*⁴. - : Create an animation that accelerates and/or decelerates using the formula *f*(*t*) = *t*⁵. - : Creates an animation that accelerates and/or decelerates using a sine formula. To apply an easing function to an animation, use the `EasingFunction` property of the animation specify the easing function to apply to the animation. The following example applies a easing function to a to create a bouncing effect. [!code-xaml[BounceEase_snippet#BounceEase](~/samples/snippets/csharp/VS_Snippets_Wpf/bounceease_snippet/CS/window1.xaml#bounceease)] In the previous example, the easing function was applied to a From/To/By animation. You can also apply these easing functions to Key-Frame animations. The following example shows how to use key frames with easing functions associated with them to create an animation of a rectangle that contracts upward, slows down, then expands downward (as though falling) and then bounces to a stop. [!code-xaml[EasingFunctionDoubleKeyFrame_snippet#EasingFunctionDoubleKeyFrame](~/samples/snippets/csharp/VS_Snippets_Wpf/easingfunctiondoublekeyframe_snippet/CS/window1.xaml#easingfunctiondoublekeyframe)] You can use the property to alter how the easing function behaves, that is, change how the animation interpolates. There are three possible values you can give for : - : Interpolation follows the mathematical formula associated with the easing function. - : Interpolation follows 100% interpolation minus the output of the formula associated with the easing function. - : Interpolation uses for the first half of the animation and for the second half. The graphs below demonstrate the different values of where *f*(*x*) represents the animation progress and *t* represents time. ![BackEase EasingMode graphs.](./media/backease-graph.png "BackEase_Graph") ![BounceEase EasingMode graphs.](./media/bounceease-graph.png "BounceEase_Graph") ![CircleEase EasingMode graphs.](./media/circleease-graph.png "CircleEase_Graph") ![CubicEase EasingMode graphs.](./media/cubicease-graph.png "CubicEase_Graph") ![ElasticEase with graphs of different easingmodes.](./media/elasticease-graph.png "ElasticEase_Graph") ![ExponentialEase graphs of different easingmodes.](./media/exponentialease-graph.png "ExponentialEase_Graph") ![QuarticEase with graphs of different easingmodes.](./media/quarticease-graph.png "QuarticEase_Graph") ![QuadraticEase with graphs of different easingmodes](./media/quadraticease-graph.png "QuadraticEase_Graph") ![QuarticEase with graphs of different easingmodes.](./media/quarticease-graph.png "QuarticEase_Graph") ![QuinticEase with graphs of different easingmodes.](./media/quinticease-graph.png "QuinticEase_Graph") ![SineEase for different EasingMode values](./media/sineease-graph.png "SineEase_Graph") > [!NOTE] > You can use to create the same behavior as , , , and by using the property. For example, if you want to use to substitute for , specify a value of 3. In addition to using the easing functions included in the run-time, you can create your own custom easing functions by inheriting from . The following example demonstrates how to create a simple custom easing function. You can add your own mathematical logic for how the easing function behaves by overriding the method. [!code-csharp[CustomEasingFunction#CustomEasingFunction](~/samples/snippets/csharp/VS_Snippets_Wpf/customeasingfunction/csharp/customlog10easingfunction.cs#customeasingfunction)] [!code-vb[CustomEasingFunction#CustomEasingFunction](~/samples/snippets/visualbasic/VS_Snippets_Wpf/customeasingfunction/visualbasic/customlog10easingfunction.vb#customeasingfunction)] [!code-xaml[CustomEasingFunction#CustomEasingFunction](~/samples/snippets/csharp/VS_Snippets_Wpf/customeasingfunction/csharp/window1.xaml#customeasingfunction)]