Confused "Follow The Pointer"

Confused "Follow The Pointer"
Zhou yinhui

Microsoft Expression Blend has an example program "Follow The Pointer". It will be cool to see The program demonstration. It will be confusing to read The code (click to download it, but now I will introduce the CompositionTarget in WPF and some physical knowledge designed in this example.

1. CompositionTarget
Although we have Storyboard and Microsoft Expression Blend to provide strong support for WPF animation production, you will find that this is not enough, maybe you want to use code to control every frame in an animation to display more complex animations with better visual effects, so you have to understand the CompositionTarget class.

The CompositionTarget class is used to present the display surface of your application. Each time you draw a graph, it triggers its Rendering event. The number of times it is drawn depends on your computer's FPS.
We can customize the Rendering event processor for some custom Rendering or other work (note that it will continuously call and modify the event processor based on the computer's FPS, such as 60 times per second, therefore, complicated and time-consuming operations should not be performed here.) For example: CompositionTarget. rendering + = delegate
{
This. UpdateColor ();
};

Here is a simple example to illustrate the usage of CompositionTarget. You can click here to download

2. Physical knowledge in "Follow The Pointer"
It is almost impossible to write an animation with a slightly better visual effect without mathematical or physical knowledge. in The "Follow The Pointer" example, The Force, velocity, acceleration, and flow friction (deformation form) are used ).
Simple animation process: when a user moves the mouse, the program calculates the movable control (hereinafter referred to as "Small Square", which is the control that follows the mouse) to the vector formed by the mouse position, and the vector is used as the force applied to the small square. this force will move the small square toward the mouse position. if the small square is in an air (or water) environment, the movement of the small square will produce flow friction. This friction is proportional to the speed, which will slow down the small square and eventually stop it.
For details about how to demonstrate this physical knowledge, refer to the following two sections of code.
Here is the original sample code: private void CompositionTarget_Rendering (object sender, EventArgs e)
{
// Current position of mouse pointer relative to the movable control.
// The Mouse class is defined in the System. Windows. Input namespace.
Point mousePos = Mouse. GetPosition (this. MovableControl );

TimeSpan currentTime = this. stopwatch. Elapsed;
Double elapsedTime = (currentTime-this. prevTime). TotalSeconds;
This. prevTime = currentTime;

// The vector to the mouse pointer represents the force currently acting on the movable control.
Vector force = new Vector (mousePos. X, mousePos. Y );

// The smaller the value of damping, the more iterations it takes to approach the mouse pointer, thus allowing velocity to grow larger.
Force = (force * this. SpringSlider. Value-this. velocity * this. DampingSlider. Value) * elapsedTime;

// The current force causes an acceleration (a change in velocity ).
This. velocity + = force;

// If the eye won't notice any further motion then don't animate on this iteration.
If (velocity. Length <epsilon)
Return;

// Distance equals speed times time.
This. translation. X + = this. velocity. X * elapsedTime;
This. translation. Y + = this. velocity. Y * elapsedTime;
}

Here is the simplified sample code: void CompositionTarget_Rendering (object sender, EventArgs e)
{

// The time interval from the last draw to this time
TimeSpan currentTime = this. stopwatch. Elapsed;
Double elapsedTime = (currentTime-this. prevTime). TotalSeconds;
This. prevTime = currentTime;

// The Position of the mouse relative to the small square
Point mouseLoc = Mouse. GetPosition (this. rectangle1 );
// Because it is relative to the upper left corner of the small square, correct it to the center of the small square
MouseLoc. Offset (-this. rectangle1.ActualWidth/2,-this. rectangle1.ActualHeight/2 );


// Use the cursor position relative to the small block as an external force
Vector force = new Vector (mouseLoc. X, mouseLoc. Y );

// The flow friction coefficient is assumed to be this value
Double coefficient = 5;

// If the mass of a small square is 1, the acceleration is a = force/1;
// The speed variation in elapsedTime is a * elapsedTime.
// Because the flow friction is proportional to the speed, the flow friction is coefficient * this. velocity
// Therefore, the speed changes to (force * 200-coefficient * this. velocity) * elapsedTime
// Here, we have expanded the external force by 200 times to demonstrate the speed of Small and Medium blocks faster.
Vector velocityDelta = (force * 200-coefficient * this. velocity) * elapsedTime;

// Current speed
This. velocity + = velocityDelta;

// New location of the small square
This. translation. X + = this. velocity. X * elapsedTime;
This. translation. Y + = this. velocity. Y * elapsedTime;

}

Download Demo and source code