WPF achieves animation effects (7) demonstration board

WPF animation effect series

Basic concept of WPF to achieve animation effects (1)

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

WPF realizes animation effect (three) timeline (TimeLine)

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

All the above mentioned are single animations, which can only modify a single attribute. Sometimes, we need to perform a set of animations together. For a button, we may have the following requirements:

• When the button is selected, the button increases and changes the color.

• When the button is clicked, the button shrinks and returns to its original size.

• When this button becomes disabled, it shrinks and reduces opacity to 50%.

Each operation has two animations at the same time. We need to use it at this time.TimelineGroup, I have already introduced it when introducing TimeLine in the previous article. It can encapsulate multiple TimeLines into a unified scheduling. But TimeLine is an abstract base class, and we usually use its subclass Storyboard.

A Storyboard is a container timeline that provides target information for the timeline it contains. The demo board can contain any type of Timeline, including other container timelines and animations.

    var widthAnimation = new DoubleAnimation() { To = 250, FillBehavior =  };
    var opacityAnimation = new DoubleAnimation() { From = 1, To = 0, FillBehavior =  };

    var storyBoard = new Storyboard() { Duration = (2) };
    (widthAnimation);
    (opacityAnimation);

    (widthAnimation, new PropertyPath("Width"));
    (opacityAnimation, new PropertyPath("Opacity"));

    (button);

This example briefly demonstrates how to use StoryBoard. Since Storyboard is often used with XAML, I will also introduce the writing method in XAML:

    <Storyboard x:Key="storyBoard">
        <DoubleAnimation ="Width" To="250" FillBehavior="Stop"/>
        <DoubleAnimation ="Opacity" From="1" To="0" FillBehavior="Stop"/>
    </Storyboard>

How to use it is as follows:

    var storyBoard = ("storyBoard") as Storyboard;
    ();

Control Storyboard

As mentioned earlier, Storyboard, like the Clock method, directly encapsulates several functions such as Begin, Seek, Stop, Pause, Resume, Remove, etc., and can be used directly in the code. In addition, in XAML, Storyboard can be directly in the trigger (EventTrigger、DataTrigger、Trigger) Used, as follows:

    <>
        <Storyboard x:Key="storyBoard">
            <DoubleAnimation ="button" ="Width" To="250" FillBehavior="Stop"/>
            <DoubleAnimation ="button" ="Opacity" From="1" To="0" FillBehavior="Stop"/>
        </Storyboard>
    </>
    <>
        <EventTrigger RoutedEvent="Loaded" >
            <BeginStoryboard Storyboard="{StaticResource storyBoard}" />
        </EventTrigger>
    </>

You can see that a system provided by the name is used hereBeginStoryboardThe TriggerAction also provides several TriggerActions such as SeekStoryboard, StopStoryboard, PauseStoryboard, ResumeStoryboard, RemoveStoryboard, etc. An example of a slightly more complex one is as follows:

    <>
        <Storyboard x:Key="storyBoard">
            <DoubleAnimation ="button" ="Width" To="250" FillBehavior="Stop"/>
            <DoubleAnimation ="button" ="Opacity" From="1" To="0" FillBehavior="Stop"/>
        </Storyboard>
    </>
    <>
        <EventTrigger RoutedEvent="MouseEnter" >
            <BeginStoryboard Name="storyBegin" Storyboard="{StaticResource storyBoard}" />
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave" >
            <RemoveStoryboard BeginStoryboardName="storyBegin" />
        </EventTrigger>
    </>

In addition, the Interaction provided by Microsoft can also execute Storyboard control in XAML:

    <i:>
        <i:EventTrigger EventName="MouseEnter">
            <ei:ControlStoryboardAction Storyboard="{StaticResource storyBoard}" ControlStoryboardOption="Play" />
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseLeave">
            <ei:ControlStoryboardAction Storyboard="{StaticResource storyBoard}" ControlStoryboardOption="Stop" />
        </i:EventTrigger>
    </i:>

Since Microsoft's Interaction extension is very useful in MVVM mode and has very good scalability, this method is often more convenient. For how Interaction is used, please refer to this article:Interaction triggers in WPF

References:

Demo board overview

This is all about this article about WPF's animation effect demonstration board. I hope it will be helpful to everyone's learning and I hope everyone will support me more.