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)
<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:
- red : EaseIn
- green : EaseOut
- blue : EaseInOut
III.2. Chronological events
to be continued …