Msdn Teaching Short Film WPF 14 (2D animation-trigger)

2D animation-trigger

We know that a trigger is a trigger that applies attribute values or performs operations based on conditions.

Note: To make the trigger meaningful, you must specify both the property and value Attributes on the trigger. If either of these two attributes is not set, an exception is thrown.

In addition, there are other types of triggers. Multitrigger is used to apply changes based on the status of multiple attributes. Eventtrigger is used to specify the application changes when an event occurs. Datatrigger and multitrigger are used to bind data attributes.

The following example shows how to use a powerful trigger.

First, we will draw a rectangle on the panel and set a rotatetransform for it. We will then perform an animation on this rotatetransform.

<Rectangle width ="60"Height ="60"Fill ="Bluevilet"> <Rectangle. rendertransform> <rotatetransform X: Name ="Rotate1"Angle ="0"Centerx ="30"Centery ="30"/> </Rectangle. rendertransform> </rectangle>
 

Place the four buttons to start rotating the rectangle, pause, continue, and stop.

<Button content ="Start"Margin ="88,234,365, 51"Name ="Btnstart"/> <Button content ="Pause"Margin ="162,234,291, 51"Name ="Tnpause"/> <Button content ="Resume"Margin ="233,234,220, 51"Name ="Btnresume"/> <Button content ="Stop"Margin ="320,234,133, 51"Name ="Btnstop"/>
 

Set the trigger of the four buttons to implement the corresponding functions.

 <Grid. triggers> <eventtrigger sourcename =" Btnstart "Routedevent =" Button. Click "> <Eventtrigger. Actions> <beginstoryboard X: Name =" BS "> <Storyboard repeatbehavior =" Forever "> <Doubleanimation storyboard. targetname =" Rotate1 "Storyboard. targetproperty =" Angle "From =" 0 "To =" 360 "Duration =" 0: 0: 5 "/> </Storyboard> </beginstoryboard> </eventtrigger. Actions> </eventtrigger> <eventtrigger sourcename =" Btnpause "Routedevent =" Button. Click "> <Eventtrigger. Actions> <pausestoryboard beginstoryboardname =" BS "/> </Eventtrigger. Actions> </eventtrigger> <eventtrigger sourcename =" Btnresume "Routedevent =" Button. Click "> <Eventtrigger. Actions> <resumestoryboard beginstoryboardname =" BS "/> </Eventtrigger. Actions> </eventtrigger> <eventtrigger sourcename =" Btnstop "Routedevent =" Button. Click "> <Eventtrigger. Actions> <stopstoryboard beginstoryboardname =" BS "/> </Eventtrigger. Actions> </eventtrigger> </grid. triggers>

Beginstoryboard is used here. Its meaning is:

A trigger operation that starts a storyboard and distributes its animation to the target object and attributes of the animation.

The doubleanimation here is:

Use linear interpolation in the specified duration to animation the double attribute values between two target values.

Pausestoryboard, resumestoryboard, and stopstoryboard indicate the pause, continue, and stop operations respectively.

Running effect: