WPF realizes animation effect (three) timeline (TimeLine)

WPF animation effect series

Basic concept of WPF to achieve animation effects (1)

WPF realizes animation effects (II) From/To/By animation

WPF implements animation effect (four) easing function

WPF realizes keyframe animation of animation effect (five)

WPF implements animation effect (VI) path animation

WPF achieves animation effects (7) demonstration board

text

Timeline (TimeLine) represents a time period. It provides properties that allow you to control the length of the time period, the start time, the number of repetitions, the speed of the time progress during the time period, and so on. The following TimeLines are built into WPF:

AnimationTimeline: As mentioned earlier, it is mainly used for the transition of attributes, which is the most common animation.
MediaTimeline: The timeline used to control the playback of media files.
ParallelTimeline：ParallelTimelineIt is a timeline that can group other timelines and can be used to implement more complex animations.
Storyboard: A specialParallelTimeline, can provide object and attribute target information for the timeline it contains. It is often used in XAML, and will be introduced later.
TimelineGroup: Can include otherTimelineThe object'sTimelineAbstract class of objects.

Common properties:

Duration: The length of animation playback time
RepeatBehavior: Repeat behavior (number of repetitions)
FillBehavior: behavior after the end of the animation (maintain the end state of the animation or restore to the initial state)
AutoReverse: Repeat animations in reverse order
SpeedRatio: Animation playback rate (for speeding up or decelerating playback)
BeginTime: The start time of animation playback

Timeline control:

So far, although we can create and execute animations, we can only perform the start animation through UIElement. BeginAnimation, and we cannot interact with the animation. In WPF, a series of control operations on the timeline are also provided, such as: start, stop, pause, etc. They are done through the Controller property of the Clock object. Here is a simple example:

    var widthAnimation = new DoubleAnimation()
    {
        From = 0,
        To = 320,
        Duration = (5),
    };

    var clock = ();
    (WidthProperty, clock);

    await (3000);
    ();

As can be seen from this code, the general steps to control the timeline are as follows:

Create clock object Clock through CreateClock function
Enable animations that support clock control via UIElement.ApplyAnimationClock function
Use Clock. Controller method to control animations

For more detailed examples, please refer to the MSDN documentation:Control clock interactively

In addition to providing interactive methods in the Controller, the Clock object also provides a series of properties and events to facilitate our state acquisition. Common ones include:

CurrentProgress Current Progress
CurrentState Current status
CurrentTime Current playback time
IsPaused Is it in a pause state
NaturalDuration Animation Duration

A series of events are also provided to actively notify status changes. Commonly used events are:

Completed: Notification at the end of the animation
CurrentGlobalSpeedInvalidated Notification when the playback rate changes,
CurrentStateInvalidated Notification when the status changes
CurrentTimeInvalidated Notification when the playback time changes
RemoveRequested Notification when animation is removed

These events are also available in TimeLine objects, so that these state changes can also be changed when the Clock object is not used. If you want to understand the working of the timing system more, you can take a lookAnimation and timing system overviewOne article.

In addition, some special TimeLine objects, such as Storyboard, encapsulates the control-related content of the animation, and can directly control the animation. There is a lot of content to introduce about Storyboard, and I will write a separate article to introduce it later.

References:

Overview of timing behavior
Timed Event Overview
Timeline Class
Clock class
Synchronous positioning clock

This is all about this article about the timeline (TimeLine) that implements animation effects in WPF. I hope it will be helpful to everyone's learning and I hope everyone will support me more.