Stone_Red/docs-desktop
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/docs-desktop.git synced 2026-09-04 17:16:03 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
live
docs-desktop/dotnet-desktop-guide/framework/wpf/graphics-multimedia/easing-functions.md
T
Andy De George da363692ff Initial WPF content migrated (#17) 
* Reset branch for WPF changes

* Convert BMP to PNG; fix link-out-of-scope err

* Add snippets for WPF... 6794 files!!!!

* Add missing snippets

* update file updated between migration

* Fix paths to include

* update breadcrumb and toc

* fix index links

* fix index links

* fix index links

* fix markdown
2020-09-04 09:46:28 -07:00

8.2 KiB
Raw Permalink Blame History

title, ms.date, dev_langs, helpviewer_keywords, ms.assetid
title ms.date dev_langs helpviewer_keywords ms.assetid
Easing Functions 03/30/2017
csharp
vb
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
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 xref:System.Windows.Media.Animation.EasingFunctionBase, you can use one of several easing functions provided by the runtime to create common effects.

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 xref:System.Windows.Media.Animation.BounceEase easing function to a xref:System.Windows.Media.Animation.DoubleAnimation to create a bouncing effect.

[!code-xamlBounceEase_snippet#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-xamlEasingFunctionDoubleKeyFrame_snippet#EasingFunctionDoubleKeyFrame]

You can use the xref:System.Windows.Media.Animation.EasingFunctionBase.EasingMode%2A property to alter how the easing function behaves, that is, change how the animation interpolates. There are three possible values you can give for xref:System.Windows.Media.Animation.EasingFunctionBase.EasingMode%2A:

The graphs below demonstrate the different values of xref:System.Windows.Media.Animation.EasingFunctionBase.EasingMode%2A where f(x) represents the animation progress and t represents time.

xref:System.Windows.Media.Animation.BackEase

BackEase EasingMode graphs.

xref:System.Windows.Media.Animation.BounceEase

BounceEase EasingMode graphs.

xref:System.Windows.Media.Animation.CircleEase

CircleEase EasingMode graphs.

xref:System.Windows.Media.Animation.CubicEase

CubicEase EasingMode graphs.

xref:System.Windows.Media.Animation.ElasticEase

ElasticEase with graphs of different easingmodes.

xref:System.Windows.Media.Animation.ExponentialEase

ExponentialEase graphs of different easingmodes.

xref:System.Windows.Media.Animation.PowerEase

QuarticEase with graphs of different easingmodes.

xref:System.Windows.Media.Animation.QuadraticEase

QuadraticEase with graphs of different easingmodes

xref:System.Windows.Media.Animation.QuarticEase

QuarticEase with graphs of different easingmodes.

xref:System.Windows.Media.Animation.QuinticEase

QuinticEase with graphs of different easingmodes.

xref:System.Windows.Media.Animation.SineEase

SineEase for different EasingMode values

Note

You can use xref:System.Windows.Media.Animation.PowerEase to create the same behavior as xref:System.Windows.Media.Animation.CubicEase, xref:System.Windows.Media.Animation.QuadraticEase, xref:System.Windows.Media.Animation.QuarticEase, and xref:System.Windows.Media.Animation.QuinticEase by using the xref:System.Windows.Media.Animation.PowerEase.Power%2A property. For example, if you want to use xref:System.Windows.Media.Animation.PowerEase to substitute for xref:System.Windows.Media.Animation.CubicEase, specify a xref:System.Windows.Media.Animation.PowerEase.Power%2A 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 xref:System.Windows.Media.Animation.EasingFunctionBase. 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 xref:System.Windows.Media.Animation.EasingFunctionBase.EaseInCore%2A method.

[!code-csharpCustomEasingFunction#CustomEasingFunction] [!code-vbCustomEasingFunction#CustomEasingFunction] [!code-xamlCustomEasingFunction#CustomEasingFunction]

Reference in New Issue View Git Blame Copy Permalink