Animations in WPF--(vi) storyboards

All described earlier is a single animation, which can only modify a single property. Sometimes we need to take a group of animations together, and for a button we may have the following requirements:

• When the button is selected, the button increases and changes color.
• When you click the button, the button shrinks and restores its original size.
• When the button becomes disabled, the zoom out and opacity is reduced to 50%.

Each operation is at the same time corresponding to two animation, at this time with we need to use the Timelinegroup, the previous introduction timeline time has introduced it, it can be multiple timeline packaged into a unified scheduling. But timeline is an abstract base class, and we typically use its sub-class storyboards (Storyboard).

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

????VarWidthanimation =NewDoubleAnimation() {to = +, Fillbehavior =Fillbehavior. Stop};
????VarOpacityanimation =NewDoubleAnimation() {from = 1, to = 0, Fillbehavior =Fillbehavior. Stop};

????VarStoryBoard =NewStoryboard () {Duration = timespan???? STORYBOARD.CHILDREN.ADD (widthanimation);
???? STORYBOARD.CHILDREN.ADD (opacityanimation);

???? storyboardnew propertypath (???? storyboardnew propertypath ( "Opacity"
???? Storyboard.begin (button);
/span>

This example simply demonstrates how to use storyboard, since storyboard is often used with XAML, here's how to do it in XAML:

????<StoryboardX:Key= "StoryBoard" >
????????<doubleanimation Storyboard.targetproperty= "Width" To= " Fillbehavior = "Stop"/>
???????? <doubleanimation Storyboard.targetproperty= "Opacity" from = "1" To= "0" Fillbehavior= "Stop"/>
???? </storyboard>

Use the following methods:

???? var storyBoard = this. FindResource ("StoryBoard") asstoryBoard;
???? Storyboard.begin (button);

Simpler than writing directly with code.

?

Two additional properties:

Storyboard.TargetProperty:

Because the storyboard corresponds to changes in multiple properties, it cannot be executed in uielement.beginanimation manner, but is written using the Storyboard.TargetProperty attached property.

Storyboard.TargetName:

Storyboard can also notify the control of multiple objects, at which point the object cannot be executed directly in the Storyboard.begin function, but is written by storyboard.targetproperty attached property.

???? <Storyboard x:Key= "Storyboard" >
???????? <doubleanimation storyboard.targetname= "button" Storyboard.TargetProperty= "Width" to= "Fillbehavior" = "Stop"/>
???????? <doubleanimation storyboard.targetname= "button" Storyboard.TargetProperty= "Opacity" from= "1" to= "0" fillbehavior= "Stop"/>
???? </Storyboard>

In this way, you don't have to pass in the object when you execute storyboard.

???? var storyBoard = this. FindResource ("StoryBoard") asstoryBoard;
???? StoryBoard. Begin () ;

?

Control Storyboard

As already mentioned, Storyboard, like the clock method, directly encapsulates several functions such as Begin, Seek, Stop, Pause,Resume,Remove , and so on. , which can be used directly in the code. In addition, in XAML, storyboard can be used directly in triggers (EventTrigger, DataTrigger, Trigger), as a simple example:

????<Window.Resources>
????????<StoryboardX:Key= "StoryBoard" >
????????????<DoubleAnimationStoryboard.TargetName= "button"Storyboard.TargetProperty= "Width"To= "250"Fillbehavior= "Stop"/>
????????????<DoubleAnimationStoryboard.TargetName= "button"Storyboard.TargetProperty= "Opacity"From= "1" To= "0" Fillbehavior= "Stop"/>
???????? </storyboard>
???? </window.resources>
???? <window.triggers>
???????? <eventtrigger Routedevent= "Loaded" >
???????????? < BeginStoryboard Storyboard= "{StaticResource Storyboard}"/>
???????? </EventTrigger>
???? </window.triggers>

As you can see, there is a system-supplied triggeraction called BeginStoryboard, which also provides Seekstoryboard, Stopstoryboard, Pausestoryboard, Resumestoryboard, Removestoryboard and several other triggeraction. A slightly more complex example is as follows:

????<Window.Resources>
????????<StoryboardX:Key= "StoryBoard" >
????????????<DoubleAnimationStoryboard.TargetName= "button"Storyboard.TargetProperty= "Width"To= "250"Fillbehavior= "Stop"/>
????????????<DoubleAnimationStoryboard.TargetName= "button"Storyboard.TargetProperty= "Opacity"From= "1"To= "0"Fillbehavior= "Stop"/>
????????</Storyboard>
????</Window.Resources>
????<Window.triggers>
????????<EventTriggerRoutedEvent= "MouseEnter" >
????????????<BeginStoryboardName= "Storybegin"Storyboard="{StaticResourceStoryBoard} "/>
???????? </eventtrigger>
???????? <eventtrigger Routedevent= "MouseLeave" >
???????????? <removestoryboard Beginstoryboardname= "Storybegin"/>
???????? </eventtrigger>
???? </window.triggers>

In addition, Microsoft-provided interaction can also perform storyboard control in XAML:

????<I:Interaction.triggers>
????????<I:EventTriggerEventName= "MouseEnter" >
????????????<Ei:ControlstoryboardactionStoryboard="{StaticResourceStoryBoard}"Controlstoryboardoption= "Play"/>
????????</I:EventTrigger>
????????<I:EventTriggerEventName= "MouseLeave" >
???????????? <ei: controlstoryboardaction Storyboard = "{staticresource Storyboard}" Span style= "color:red" > Controlstoryboardoption= "Stop"/>
???????? </i: eventtrigger>
???? </i: interaction.triggers>

Because Microsoft's interaction extension is very useful in MVVM mode, it's also very extensible, which is a lot more convenient. For information on how to use Interaction, please refer to this article in the garden: Interaction triggers in WPF

?

Resources:

Storyboards Overview

?

Animations in WPF--(vi) storyboards