Animate under WPF via C # extension methods – Part 1

The animation is an important part of user experience in modern interfaces, whether Web or Desktop. WPF responds to this problem in a very complete way by providing in the .NET framework classes of time management (timers, editing table) and synchronization of controls (calculation and updating of properties).

In this article we will see a way to build a short and flexible syntax in C # to animate the controls of the UI in WPF, without resorting to a lot of XAML, which is certainly a very complete (and powerful) description language but which tends to be very verbose, where the slightest element declaration quickly occupies a large number of lines.

I. The different types of animation

There are different types of animation:

• From/To/By animation
  • animation of a property value between a start and destination value, with an offset value
  • classes with standardized names: {nomDeType}Animation
• animation that uses keyframes (AnimationUsingKeyFrames)
  • allows to define a multiple number of target values ​​and to control their interpolation method
• animation that uses a path (AnimationUsingPath)
  • plot animation, to animate values ​​along a generic path
• base animation for making custom animations (AnimationBase)
  • abstract class for Animation and AnimationUsingKeyFrames

II. Fom/To/By animations

The methods proposed in this article focus on From / to / By animations at first.

Because animations generate property values, different types of animation exist for different property types. To animate a property that accepts one Double, such as the width or length properties of an element, you should use an animation that produces type values Double. To animate a property that accepts a Point, we use an animation that produces type values Point, etc. Due to the number of different types of properties, there are several classes of animations in the namespace System.Windows.Media.Animation :

about animatable properties:

• In XAML, the object StoryBoard provides the attached properties TargetName and TargetProperty to indicate the properties to animate via animation. the object targeted by the animation must be named
• attached properties are a specialization of dependency properties (DependencyProperty)

<DockPanel>
    <Label DockPanel.Dock="Top">...</Label>
</DockPanel>

In C#, we will use the ClassName.DependencyName Property fields to tell animation classes which properties to animate.
For example, ScaleTransform class is told the ScaleTransform.ScaleX dependency property on the BeginAnimation method call to specify the property that should be animated by the DoubleAnimation Timeline (class AnimationTimeline).
The timer system then builds a clock for the DoubleAnimation and applies to the object and property that are specified by the parameters and property that are specified by the parameters TargetName and TargetProperty fore the DoubleAnimation.

III. The animation timeline

The animations are chronologies. All animation types inherited from the Chronology class . A chronology corresponds to a segment of time.

The properties of a timeline segment are as follows:

• duration : length of a time segment (a timeline), expressed by a `TimeSpan`. Corresponds to an iteration of the animation. Default is 1 second
• number of repetitions : indicates how often a timeline is read or read indefinitely. Default is 1
• auto reverse : indicates that the timeline repards back after reaching the end of its duration. Default is false
• speed of progression : By default the animation value is linear and calculated to cover the range of values ​​indicated (from / to) in the allotted time (duration of the segment). It is possible to define and apply mathematical formulas ( easing functions ) to modify the progression of the animation

III.1. Easing functions

Easing functions also called acceleration functions are mathematical formulas that calculate the progression of animation on the animation path, such as the progression of values ​​from from to to in an animation from / to / by .

The easing function can be applied in 3 interpolation modes:

• EaseIn: the interpolation follows the mathematical formula of the easing function
• EaseOut: the interpolation follows 100% interpolation minus the value of the easing function (symmetric function)
• EaseInOut: interpolation uses EaseIn on the first half of the animation and EaseOut for the second half

It is possible to define its own function, although WPF defines as a standard the functions listed below:

easing function	description
BackEase	slightly retracts the movement at the beginning of the animation
BounceEase	bouncing effect
CircleEase	slows / accelerates the movement according to a circular function
CubicEase	slows / accelerates the movement according to the functionf(t)=t3
ElasticEase	produces an animation that looks like an oscillating spring until the complete damping of the oscillation
ExponentialEase	slows / accelerates the movement according to an exponential function
PowerEase	slows / accelerates the movement according to the function f(t)=tp where p is the Power property of the ease function
QuadraticEase	slows / accelerates the movement according to the function f(t)=t2
QuarticEase	slows / accelerates the movement according to the function f(t)=t4
QuinticEase	slows / accelerates the movement according to the function f(t)=t5
SineEase	produces an animation that slows / accelerates according to the sinus formula

III.2. Chronological events

to be continued …