WPF controls animation start, stop, pause, and resume

1, gossip

Haven't updated a blog for a long time, I am a bit lazy, and indeed these months have been a bit busy. Fan monitoring software, the project, there is such a small demand: the normal fan in the rotation, the upper computer soft to do a picture of the fan, let it constantly rotating, one but detected below the fan stopped, the upper computer software interface fan picture also to be followed by the stop, And the speed of rotation of the fan picture is best to be able to be proportional to the real speed, so that the software is more force lattice point. is to achieve such an effect, look at 1, the left is a status indicator, did not do animation, just do a picture of the switch, the effect also see the past it.

Figure 1 Wind turbine rotation animation

2, animation production

Before WPF does animation, there are 3 things you can do first: what kind of animation you want to do (basic rotation, panning, scaling, etc.), what type of animations lasts (a certain value change, color change, 3D change, etc.), and finally a storyboard. This is the equivalent of our developers to be a director, and the interface of the control is our invited actors, all the form is our site. The storyboard is the play, and when everything is ready, you can start to ask the actors to do something (here, I want it to turn, and it's a 360-degree turn, cruel).

3 Things to prepare under the corresponding code:

1 Private New RotateTransform ();   // do the rotary move 2 Private New DoubleAnimation ();   // Numeric Type 3 Private New Storyboard ();             // Story Board

The next step is to arrange the rotation action, the code is as follows:

1 2;     // Rotation Center 2 2 ; 3 img_fanrotate.rendertransform = rt_fanrotate;       // assign this rotation transform to the fan picture control

The action arrangement looks good, must begin prepares to this movement how to do, how long has been done. Usually we spin, there is a turn 90 degrees, there is a turn 180 degrees, and turn 720 degrees (this guy may be jerking off). And there is the time to specify this rotation, sometimes it has to be done slowly, sometimes it is instantaneous to complete, here I want this fan picture from 0 degrees to start, turn 360 degrees, time 300ms, the code is as follows:

1 New Duration (Timespan.frommilliseconds ()); 2 0 ; 3 ;

The action is arranged, how to move the movement, how long the movement is also specified, you can let the fan picture play. This time, the director began to call people, the code is as follows:

1dependencyproperty[] Propertychain =Newdependencyproperty[]2 {3 Image.rendertransformproperty,4 Rotatetransform.angleproperty5 };6 7 storyboard.settargetname (Da_fanrotate, img_fanrotate.name);8Storyboard.settargetproperty (Da_fanrotate,NewPropertyPath ("(0). (1)", Propertychain));9SB_FANROTATE.CHILDREN.ADD (da_fanrotate);

This code understanding is slightly more difficult than the previous one, not afraid, we step-by-step analysis. The line is defined as a dependency property chain: The change attribute of the image, and the angle attribute of the rotation change, it will be the property that we animate to control. To put it simply, we're going to make the picture rotate and change. As a rule, we have already specified the rotation of the image, and its time, why should we specify it on the storyboard? Because the storyboard can control more than one object, it can control multiple. This is a good solution, our film and television can not always be a person to play it (as if there is such a movie, Evil!) ）。 So when our fan pictures on the stage, it should be to the director said, I am xxx, to play xx . So there are 7, 8 lines of code. Personal expression Ability is limited, if you say, please come and hit me!!

This time everything is ready, please start our show. But don't worry, we have to set up, how long this scenario will last, that is, how long one of our borders, the code is as follows:

1 New Duration (Timespan.frommilliseconds ()); 2 sb_fanrotate.repeatbehavior = Repeatbehavior.forever;

The above code is set to the story of the time of 600ms, nonstop cycle (childhood watch TV drama "Journey to The Post" there is a similar lens, Monkey King take a stick to fight and fight!! ）。

This time is really all ready, the director began to shout, action!! The code is as follows:

Sb_fanrotate.begin (img_fanrotate);

This time, generation start run your VS, you can be happy to find in your designated object began to turn, should be very happy, when the director, a little excited.

3, control animation ① start animation

In theory, the 2nd section has already explained how to start the animation, is not the begin? But if this is simply the begin, the animation cannot be stopped. Some guys play a little bit more, and they can't stop at all. There are a lot of people on the Internet, such as this is the CSDN blog on the summary of a Bo friend method. Have to say this Bo friend is very rough, others are not stop it, directly to the others kicked away (Remove). Of course we are civilized, not like him.

Figure 2 Bo Friends animation stop

workaround : When we start the animation, we will use the following method of begin:

true); /If there is only one animation, Img_fanrotate can write this

The next true parameter is to let the animation be controlled. The problem is solved in this way.

② stop, pause, and resume animations

With the instructions to start the animation on the face, stopping, pausing, and resuming the animation is simple enough to call the official function, as follows:

1 // Pause Animation 2 sb_fanrotate.resume (img_fanrotate); // resuming animations 3 sb_fanrotate.stop (img_fanrotate);  // Stop Animation

Baidu know on someone to ask a similar question, but this buddy was trampled 15 times, we are really ruthless. This guy actually quite injustice, not stop method has a problem, but those who trample the person with the Begin method is incorrect, here to this friend flat injustice, hope to receive his thank-you letter two days.

Figure 300 degrees know stop animation

③ Controlling animation speed

This is also very easy, the official has its own method, as follows:

);

Summarize

Usually encountered problems, we can Baidu, but Baidu is not, do not lose heart, we can also check MSDN, or Google. Another: I beginner WPF, as above, there is an improper understanding, please correct me, and will accept it humbly. If there is something wrong with the words, please understand. Code from the project, so the source can not be shared, please forgive me!

WPF controls animation start, stop, pause, and resume