Silverlight & Blend Animation Design Series 10: Coordinate systems in Silverlight (coordinate system) and vectors (vector) motion

If we are accustomed to a mathematical coordinate system, it may be somewhat unaccustomed to coordinate systems in Silverlight. Because the coordinate system in Silverlight is the same as the coordinate system in flash, everything is reversed. In a standard mathematical coordinate system, the x-axis represents the horizontal axis, and the y-axis table is the vertical axis, whereas the coordinate system in Silverlight is based on the video screen's coordinate system.

The coordinate system in Silverlight is exactly the same as the coordinate system in flash, which is divided into four quadrants using Cartesian coordinate system. In short, the x-axis is the horizontal direction and extends to the East infinitely, the y-axis represents the vertical direction and extends toward the South infinitely, the X and y-axis intersection point represents the coordinate system source point, its x, y coordinate value is 0, 0, so the coordinate system in Silverlight is starting from the coordinate source point, infinity to the southeast direction. , which is the four quadrant of the Cartesian coordinate system.

　　　　　　　　

The vector motion of Silverlight currently supports only one-dimensional vector motion (one-dimensional vector movement) and two-dimensional vector motion (two-dimensional vector movement), That's what everyone says about 1D and 2D. One-dimensional vector motion can be understood as motion in the same line, and two-dimensional vector motion can be understood in the plane space (x, y coordinate system) motion. The concept of vectors from junior high School began to learn, here do not introduce, if not clear friends can come here.

Two-dimensional vector motion is easy to understand, in the Silverlight animation design two-dimensional animation is the most common and the highest use of animation, can refer to in this series of the first "Silverlight & Blend Animation Design Series One: Offset animation (TranslateTransform) introduced to the implementation of the Offset animation transformation, the essence is a two-dimensional vector motion, animation element object in the animation over the period of time to change the object of the physical coordinate position to achieve the object position changes, is essentially the change in the position of the two-dimensional coordinates of the element object in the coordinate system. Understanding from geometry is that there is a two-dimensional vector motion that is named animation in Silverlight.

　　　　　　　　

<summary>
Creating animations
</summary>
private void Createstoryboard ()
{
The coordinate point where the element is currently located
Point currentpoint = new Point (Canvas.getleft (Darkmoon), Canvas.gettop (Darkmoon));
Target Point sit int label
Point point = new Point (280,-245);
Create animation container Timeline
Storyboard Storyboard = new Storyboard ();

DoubleAnimation doubleanimation = new DoubleAnimation ();

Creating an X-axis direction animation
Doubleanimation.from = Currentpoint.x;
Doubleanimation.to = point. X
Doubleanimation.duration = new Duration (new TimeSpan (0, 0, 1));
Storyboard.settarget (DoubleAnimation, Darkmoon);
Storyboard.settargetproperty (DoubleAnimation,
New PropertyPath ("(Uielement.rendertransform)." ( TransformGroup.Children) [3]. (translatetransform.x) "));
Storyboard. Children.add (DoubleAnimation);

Create a Y-axis direction animation
DoubleAnimation = new DoubleAnimation ();
Doubleanimation.setvalue (Doubleanimation.fromproperty, CURRENTPOINT.Y);
Doubleanimation.setvalue (Doubleanimation.toproperty, point. Y);
Doubleanimation.setvalue (Doubleanimation.durationproperty, New Duration (new TimeSpan (0, 0, 1)));
Storyboard.settarget (DoubleAnimation, Darkmoon);
Storyboard.settargetproperty (DoubleAnimation,
New PropertyPath ("(Uielement.rendertransform)." ( TransformGroup.Children) [3]. (TRANSLATETRANSFORM.Y) "));
Storyboard. Children.add (DoubleAnimation);

Storyboard. Begin ();
}

Let's learn a little bit more complex two-dimensional vector motion, the simulation screen has a small ball, when the mouse on the stage click on the small ball in the form of animation to move to the mouse click. The following XAML definitions:

<usercontrol x:class= "SLV. MainPage "
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
Xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"
Xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:ignorable= "D" >
<canvas x:name= "LayoutRoot" width= "All" height= "background=" "Black" mouseleftbuttondown= "OnMouseDown" >
<ellipse fill= "Yellowgreen" x:name= "Ellipse"
Width= "20"
Height= "20"
canvas.left= "80"
"Canvas.top=" >
</Ellipse>
</Canvas>
</UserControl>

The left mouse button click event code for the stage is as follows:

private void OnMouseDown (object sender, System.Windows.Input.MouseButtonEventArgs e)
{//mouse click Point coordinates
var mousepoint = e.getposition (null);
Current object coordinates
var currentpoint = new Point ((double) ellipse. GetValue (Canvas.leftproperty), (double) ellipse. GetValue (Canvas.topproperty));

Storyboard sb = new Storyboard ();
Create an x-coordinate direction animation
DoubleAnimation doubleanimation = new DoubleAnimation ();
Doubleanimation.from = Currentpoint.x;
doubleanimation.to = Mousepoint.x;
Doubleanimation.duration = new Duration (new TimeSpan (0, 0, 2));
Storyboard.settarget (DoubleAnimation, ellipse);
Storyboard.settargetproperty (DoubleAnimation, New PropertyPath ("(Canvas.Left)"));

Sb. Children.add (DoubleAnimation);
Create a y-coordinate direction animation
DoubleAnimation = new DoubleAnimation ();
Doubleanimation.from = Currentpoint.y;
doubleanimation.to = Mousepoint.y;
Doubleanimation.duration = new Duration (new TimeSpan (0, 0, 2));
Storyboard.settarget (DoubleAnimation, ellipse);
Storyboard.settargetproperty (DoubleAnimation, New PropertyPath ("(Canvas.Top)"));
Sb. Children.add (DoubleAnimation);

Sb. Begin ();
}

The simple position transformation of the sun and the movement of the small ball with the mouse can be understood as the motion of the vector in the plane, but in the implementation is not directly through the transformation of the vector, but through the animation API provided in Silverlight implementation, personally think, In some ways, the animation API in Silverlight can be understood as a Silverlight vector API, and the animation API realizes that the plane animation is understood as vector motion.

Silverlight & Blend Animation Design Series 10: Coordinate systems in Silverlight (coordinate system) and vectors (vector) motion