The last time we completed some animation effects together, we finally gave a row of random fan operations of butterflies. This time we studied the creation of interaction elements to complete the initial interaction process, these processes are done with Blend, which is very fast and easy. This time we will work together to learn how to use Blend to create Silverlight events to achieve our desired selection and disrupt animation needs.
Now, first adjust the previous project, complete the interface layout, and put a butterfly control named Target to identify which Target is to be selected.
Now we can arrange the butterflies and place them all in a Canvas. We can also use the Grid and name them ButterflyGoup. We will use it later to complete all the butterfly fan effects, for object retrieval, put all the Butterfly controls in this container.
Adding the following code to MainPage. xaml. cs is simple. It is just a timer and a loop. This loop is used to generate random fan effects.
The code above is detailed as follows:
The above code
Public MainPage ()
{
// Required for variable Initialization
InitializeComponent ();
DispatcherTimer Loop = new DispatcherTimer ();
Loop. Tick + = new EventHandler (Loop_Tick );
Loop. Interval = TimeSpan. FromSeconds (4 );
Loop. Start ();
RandomTarget ();
}
Void Loop_Tick (object sender, EventArgs e)
{
Random rm = new Random (int) DateTime. Now. Ticks );
Int I = 0;
While (I <5)
{
I ++;
Int j = rm. Next (0, ButterflyGroup. Children. Count );
Butterfly tmp = ButterflyGroup. Children [j] as Butterfly;
Tmp. FlapAnimation ();
}
}
For a brief explanation, we use a random number ranging from 1 to 12, and then cyclically 5 times to get one of the Children of the ButterflyGroup container each time. (Note that only the Butterfly control is available here ), activate the Flap animation, Which is randomly generated every 4 seconds for the desired effect. The running result is consistent with the final Silverlight effect in the previous section.
We need some interactive links, such as the mouse selection. Next, let's start the mouse moving and removing effects.
Open the butterfly control and select LayoutRoot to add a projection effect to set the effect.
Create an animation with a casual name. I use Ani_MouseEnter and Ani_MouseLeave to adjust the timeline, change the BlurRadius value, and create an outer ring diffuse aperture. Note that moving out is the opposite of moving in.
Two animations are formed, and Flap2 is useless.
Now, when the control is moved in and out, the corresponding effect is achieved through the mouse event, add an event name below (this name is arbitrary), and press Enter.
You will be directed to the cs file editing interface. for events that add Leave, add Ani_MouseEnter.Begin () and Ani_MouseLeave.Begin () respectively ()
Now, when the mouse moves in and out, the corresponding animation will be played. Next, return to MainPage, select a butterfly control, and add a SelectedButterfly event to MouseLeftButtonDown. That is to say, when you press the mouse down, the selected control will call this event.
For each control, a total of 12 event methods are added with the same name. In this way, the method will be called no matter which one is pressed. But how do we know which one is called? We can get it through sender. In Silverlight, Sender will tell us that the control calls the event method, because only the Butterfly will call the method. You only need to convert the sender, sendr as Butterfly, of course, for security considerations, you can make an if (sendr is Butterfly) judgment.
OK. Now we have a requirement to disrupt the arrangement of 12 butterflies. To do this, use the RandmTarget () method in the following code.
In the above Code, to achieve a random disruption, here we use a List to temporarily record the random number, and then place 1-12 to this List. Of course, when the number is less than 12, use this temporary List for retrieval. If this number does not exist, place it in the queue. If the number of queues is 12, the loop is stopped. Here, a % (remainder) is used) to obtain a function of less than 12 digits.
Of course, this algorithm also has another way, that is, from the first loop, random exchange within the range of 12, after several times, it will be messy. the method I use here is relatively simple.
The following is the direct Silverlight effect. Some interesting modifications are added. Basically speaking, the above method is the same. xaml. just add a few lines in the cs code. The source code is here for download reference.