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 :

classe description
DoubleAnimation double type value, for example Width and Height of FrameworkElement
DecimalAnimation decimal value
Int16Animation 16-bit integer value
Int32Animation 32-bit integer value
Int64Animation 64-bit integer value
ColorAnimation Color value of a Brush such as a SolidGradientBrush or a GradientStop for example, properties like Background, Foreground and BorderBrush of a Control
PointAnimation Point value (double X, double Y) as the Center property of an EllipseGeometry
Point3DAnimation Point3D (Double X, Double Y, Double Z) value as the ViewPort3D Camera Position property
QuaternionAnimation a quaternion represents a rotation in a 3-dimensional space (Double W, Double X, Double Y, Double Z), for example the rotation property of RotateTransform3D
RectAnimation Rect value (Double Left, Double Top, Double Width, Double Height) for example the Rect property of RectangleGeometry
Rotation3DAnimation animates the RotateTransform3D Rotate property
SingleAnimation Single type value
SizeAnimation value of type Size, like the Size property of ArcSegment
ThicknessAnimation Thickness type value, like Border’s BorderThickness
Vector3DAnimation Value of type Vector3D (double X, double Y, double Z, double Length), for example the AxisAngleRotation3D Axis property
VectorAnimation value of type Vector (double X, double y, double Length)

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)
note: the purpose of attached properties is to allow different child elements to specify a single value for a property that is actually in a parent element, because these properties are designed to be initialized by the child elements and not by the element parent. For example, the property Dock of DockPanel : the DockPanel class defines a DependencyProperty named DockProperty and provides initialization methods GetDoc and SetDock . It’s a child element that sets the Dock property:

<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:

note: the graphs represent easing function values. Each chart contains the 3 versions of the functions according to the easing mode:

  • red : EaseIn
  • green : EaseOut
  • blue : EaseInOut
easing function description
BackEase slightly retracts the movement at the beginning of the animation easing function BackEase
BounceEase bouncing effecteasing function bounce ease
CircleEase slows / accelerates the movement according to a circular functioneasing function circle ease
CubicEase slows / accelerates the movement according to the functionf(t)=t3easing function cubic ease
ElasticEase produces an animation that looks like an oscillating spring until the complete damping of the oscillationeasing function Elastic ease
ExponentialEase slows / accelerates the movement according to an exponential functioneasing function Exponential ease
PowerEase slows / accelerates the movement according to the function f(t)=tp where p is the Power property of the ease functioneasing function Power ease
QuadraticEase slows / accelerates the movement according to the function f(t)=t2easing function Quadratic ease
QuarticEase slows / accelerates the movement according to the function f(t)=t4easing function Quartic ease
QuinticEase slows / accelerates the movement according to the function f(t)=t5easing function Quintic ease
SineEase produces an animation that slows / accelerates according to the sinus formulaeasing function Sine ease

III.2. Chronological events

to be continued …