Silverlight Game development Tips: Skill cooling effects (cooldown)

So far, everyone has been very popular with the Technology of Warcraft cooling effect, that is, I remember the group also on this effect launched a discussion, in fact, it is not difficult to achieve, the key is the correct thinking, this Part I have to thank the pig stupid innocence, he came up with the solution, he is not willing to write a blog, I have to do it, haha, Provide the source code and preview later, do not miss.

Then we start making the first step of building a project if you are applying in your own project, go directly to the second step to create the icon.

Put an icon file in, so that looks more intuitive, at this time the Skillicon control width and height are set to 64x64, here is very important, I set to 64 wide is to facilitate the display, you need to make changes according to your own icon size.

Then the middle splits the layoutroot.

Add two grid to control LayoutRoot, each half, the effect is as follows, in order to facilitate the demo, I filled the color to make a distinction

Set two rectangle to two grid, 0.5.html "> size position is the same, and then use make clipping path to their corresponding grid crop.

At this point you will find that all internal objects are cropped, and then we can use this feature to make cool animations.

You can now add a rectangle to two grid, set the rectangle fill color to black, opacity to 30%, and set the layoutroot background to an image brush to add the icon image.

In fact, here is a detail, rectangle fill color can be directly with transparent effect, just will argb a modification can, according to our actual test, opacity as much as possible, and the use of color A-value performance consumes less.

The above figure is a grid with rectangle, please note that the rectangle parameters, just set the margin to 32, the size of the icon itself twice times, because we have to use its rotation to produce cooling effect.

Two rectangle alignment and the first difference, are done, you can do animation.

Until then, the central position of the icon control that needs to be set at the center point of the rotation, because it's left and right, it needs to be handled separately,

First select the rectangle on the right, set the center point in the transformation to 0, 0.5, and then rotate to see if there is a feeling?

OK, make a storyboard animation and then, at the specified time, rotate the rectangle 180 degrees.

Make an animation on the left side of the rectangle and rotate it 180 degrees, but note that the animation should be played after the first playback, so be aware of the location of the keyframe.

In the transfer of the painting, we may have to do some meticulous work, such as showing and disappearing relationship, after the rotation of fault tolerance, so the last timeline may be like this:

Well, an animation came out, and then we look at the results, the source code download the address is as follows: Click on the direct download