Silverlight4 Deep Blue Game Development Learning notes (I) Basic Animation Mode

Three animation methods are provided in SL: 1. storyboard 2. compositiontarget 3. dispatchertimer

I. storyboard

This is the first animation implementation method in the SL model, because the storyboard has already performed some processing for the user. The user only needs one starting state, one ending state, and one animation implementation. you can create a complete animation. simple Steps:

1. instantiate the storyboard object.

Storyboard sb = nefillbehaviorw storyboard (); // here, the board in the storyboard is in lower case... I can always write it in upper case... In addition, the abbreviation of Sb is really funny...

2. set a timeline (the second word is lowercase .. I can easily write a dozen strings in upper case ....). A timeline is used to describe the state of an object in a period of time. It is an abstract class, including

Timeline {

Whether to reverse playback after autoreverse bool is played

Begintime timespan start playback time

Duration duration (this class is used to describe a period of time, but some operators are overloaded and support some +-operations. It is usually used as a constructor with the parameter timespan) specifies the animation execution time period.

Fillbehavior (this is an enumeration, which includes two values. The default value is holdend. After the timeline is executed, if the parent object is not terminated, the progress will continue. another value is stop: Stop immediately after execution .) this attribute specifies the behavior of a parent-level object when it exceeds the active period.

Repeatbehavior, you can also use a duration to set the total time for repeated playback)

Speedratio double is used to set the time forward speed of the timeline. if it is the root timeline, the default speed is set. if it is a sublevel timeline, the double value is a ratio. 0.5 indicates half of the parent level. note that, instead of directly setting the animation movement speed, you can adjust the animation status by setting the time speed.

Completed event: triggered by the event after the time series is completed.

}

There are many specific manifestations of the abstract class timeline, but this time we mainly talk about the animation mode, so we only use one of the doubleanimation as an example.

Doubleanimation {

From double? The default value null indicates the starting value of the specified attribute.

By double? The default value is null. This by indicates increment, meaning that the specified attribute is calculated from the from start interpolation to the sum of from +.

To double? The default value is null. The to parameter indicates the end value, which indicates that the property is interpolated from the start of the from attribute to the to parameter.

Easingfunction ieasingfunction (an interface that uses a double parameter to represent the progress and converts it to a new double value that represents the progress. in fact, it is easy to understand, that is, to read the progress of the current timeline and output a new progress of computing through custom computing, so as to achieve some special effects, such as the speed and speed, fast, slow, etc.

}

3. After timeline is set, bind timeline to the specified attribute.

This mainly relies on three functions:

Storyboard. settargetname (timeline, string); (the name of the bound object, for example, doubleanimation instance)

Storyboard. settarget (timeline, denpendencyobject); (timeline object, object to be bound.) Note: Only the dependent object can be used for storyboard animation.

Storyboard. settargetproperty (timeline, propertypath); (timeline object, attribute path of the attribute to be bound) Note: Only dependency properties can be used for storyboard animation. (the interpolation engine is only responsible for setting the denpendencyproperty through computation. It is not responsible for updating the display, but is dependent on changing the property value to trigger the event to refresh the display area and update the display .)

Propertypath is a sealed class. We usually use its constructor to set the path of the attribute to be bound to the animation.

4. Add the timeline to the storyboard and execute the animation.

SB. Children. Add (timeline); // Add the timeline to the storyboard instance
SB. Begin ();

Paste steps 1-4Code:

 

Storyboard animation implementation

Endpoint = E. getposition (layoutroot );
Storyboard sb =   New Storyboard ();
Doubleanimation da =   New Doubleanimation ()
{
From = Canvas. getleft (storyb ),
To = Endpoint. X,
Duration =   New Duration (timespan. frommilliseconds ( 2000 ))
};
Storyboard. settarget (DA, storyb );
Storyboard. settargetproperty (Da, New Propertypath ( " (Canvas. Left) " ));
SB. Children. Add (DA );
Da =   New Doubleanimation ()
{
From = Canvas. gettop (storyb ),
To = Endpoint. y,
Duration =   New Duration (timespan. frommilliseconds ( 2000 ))
};
Storyboard. settarget (DA, storyb );
Storyboard. settargetproperty (Da, New Propertypath ( " (Canvas. Top) " ));
SB. Children. Add (DA );
SB. Begin ();

 

Ii. compositiontarget

This is achieved by refreshing the rendering event of each frame on the registration interface, which adds an animation to the inherent frequency of page refreshing.

Implementation is simple:

Compositiontarget. Rendering + = new eventhandler (compositiontarget_rendering); // Add an event for processing.

Void compositiontarget_rendering (Object sender, eventargs E)
{
// Animation implementation Logic
}

In this way, an event is executed every time the interface is refreshed. In event processing, we can add an animation. For example, we can set the denpendencyproperty of some objects according to certain rules to change the Object Appearance and implement animation.

The following experiment code is provided. First, the coordinates of the target location are calculated by clicking the left button, and the tan value is obtained using the trigonometric function to calculate the physical speed in the X and Y directions, and saved to a point, then, dynamically set the physical canvas in rendering. left and top to implement animation. The Code is as follows:

 

Compositiontarget animation implementation

Private   Void Layoutroot_mouseleftbuttondown ( Object Sender, mousebuttoneventargs E)
{
Double DX = Math. Abs (canvas. getleft (compositiont) - E. getposition (layoutroot). X );
Double Dy = Math. Abs (canvas. gettop (compositiont) - E. getposition (layoutroot). y );
Double Dxy = DX > Dy ? DX: Dy;
Speedpoint =   New Point (dx / Dxy, Dy / Dxy );
}
Void Compositiontarget_rendering ( Object Sender, eventargs E)
{
If (Canvas. getleft (compositiont) < Endpoint. X)
{
Canvas. setleft (compositiont, canvas. getleft (compositiont) + Speedpoint. X );
}
Else
{
Canvas. setleft (compositiont, canvas. getleft (compositiont) - Speedpoint. X );
}
If (Canvas. gettop (compositiont) < Endpoint. Y)
{
Canvas. settop (compositiont, canvas. gettop (compositiont) + Speedpoint. y );
}
Else
{
Canvas. settop (compositiont, canvas. gettop (compositiont) - Speedpoint. y );
}
} Iii. dispatchertimer The animation implementation method is also a timer animation, but the advantage is that you can set the event trigger cycle by yourself. From the namespace, we can see that dispatchertimer is a class in system. Windows. Threading. From its name, we can also see that dispatcher is a scheduling, and timer is a timer. In fact, it is timer in Dispatcher queue. timer can respond to fixed time intervals and modify dependencyproperty by responding to fixed time intervals for animation. This is relatively simple. It is similar to timer. The code is provided here:

Dispatchertimer distmer =   New Dispatchertimer ();
Distick. tick + =   New Eventhandler (distimer_tick );
Distval. Interval = Timespan. frommilliseconds ( 50 );
Distimer. Start ();

Here, the distimer_tick event is written with the same processing code as the rendering of compositiontarget. It can be said that dispatchertimer is functionally equivalent to the compositiontarget that can be set at the time interval. (Different principles: dispatchertimer is a thread timing queue, while compositiontarget is a page refresh)

 

The above three methods are the most basic methods for creating an animation in SL.

 

References:

Dark blue right hand animation game tutorial

Step-by-Step sl2 of terrylee