Silverlight & blend animation design series X: coordinate system and vector motion in Silverlight

If we are used to mathematical coordinate systems, we may not be used to coordinate systems in Silverlight. Because the coordinate system in Silverlight is the same as the coordinate system in flash, everything is reversed. In the standard mathematical coordinate system, the X axis indicates the horizontal axis, and the Y axis table indicates the vertical axis. However, the coordinate system in Silverlight is based on the video screen coordinate system.

 

The coordinate system in Silverlight is the same as the coordinate system in flash. Cartesian coordinate systems are used and divided into four quadrants. Simply put, the X axis indicates the horizontal direction and infinite extension to the East. the Y axis indicates the vertical direction and infinite extension to the south. The intersection of X and Y axis indicates the coordinate system source point, and its X, the Y coordinate value is 0, 0, so the coordinate system range in Silverlight is to start from the coordinate source point, infinitely extending to the southeast, that is, the four quadrant in the Cartesian coordinate system.

 

Currently, vector motion of Silverlight only supports one-dimensional vector motion and two-dimen1_vector movement ), that is, 1D and 2D. One-dimensional vector motion can be understood as motion on the same straight line, while two-dimensional vector motion can be understood in the plane space (X, Y coordinate system. The concept of vector has been learned since junior high school. I will not introduce it here. If you are not clear about it, you can move to it.

 

2d vector motion is easy to understand. In Silverlight animation design, 2D animation is also the most common and most frequently used animation. For details, see the first Silverlight & blend animation design series I in this series: the implementation of the Offset animation transformation described in the offset animation (translatetransform) is essentially a two-dimensional vector motion, during the animation process, the animation Element Object constantly changes the physical Coordinate Position of the object to realize the change of the object's position. In essence, it is the change of the Two-dimensional coordinate position of the element object in the coordinate system. From the perspective of ry, a two-dimensional vector motion occurs, and is named as an animation in Silverlight.

 

///   <Summary>
/// Create an animation
///   </Summary>
Private   Void Createstoryboard ()
{
// Coordinate point of the current element
Point currentpoint =   New Point (canvas. getleft (darkmoon), canvas. gettop (darkmoon ));
// Int mark for the target point
Point point =   New Point ( 280 , - 245 );
// Create an animation container timeline
Storyboard =   New Storyboard ();

Doubleanimation= NewDoubleanimation ();

// Create X axis Animation
Doubleanimation. From = Currentpoint. X;
Doubleanimation. = 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 an animation in the Y axis
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 ();
}

 

Next, let's take a look at a slightly complex two-dimensional vector movement, simulating a small ball in the screen. When the mouse clicks on the stage, the ball moves in the form of animation to the mouse clicks. The following XAML definition:

< 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 = "400" Height = "400" Background = "Black" Mouseleftbuttondown = "Onmousedown" >
< Ellipse Fill = "Yellowgreen" X: Name = "Ellipse"  
Width = "20"  
Height = "20"  
Canvas. Left = "80"  
Canvas. Top = "66"   >
</ Ellipse >
</ Canvas >
</ Usercontrol >

 

The left-click event of the stageCodeAs follows:

Private   Void Onmousedown ( Object Sender, system. Windows. Input. mousebuttoneventargs E)
{ // Click the coordinates
VaR mousepoint = E. getposition (null );
// Coordinates of the current object
VaR currentpoint =   New Point (( Double ) Ellipse. getvalue (canvas. leftproperty ),( Double ) Ellipse. getvalue (canvas. topproperty ));

Storyboard sb =   New Storyboard ();
// Create an animation in the X direction
Doubleanimation =   New Doubleanimation ();
Doubleanimation. From = Currentpoint. X;
Doubleanimation. = 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 an animation in the Y direction
Doubleanimation =   New Doubleanimation ();
Doubleanimation. From = Currentpoint. Y;
Doubleanimation. = 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 ball with the mouse can be understood as the movement of vectors in the plane, but it is not directly implemented through the transformation of vectors, it is implemented through the animation API provided by Silverlight. In my opinion, from a certain point of view, the animation API in Silverlight can be understood as the vector API of Silverlight, and the plane animation implemented by the animation API can be understood as vector motion.

 

Recommended resources:

Msdn: http://msdn.microsoft.com/zh-cn/library/cc189090 (vs.95). aspx

Http://www.silverlight.net/learn/quickstarts/animations/

Silverlight & blend Animation Design SeriesArticle

Function Silverlight 3 animation-part of the materials used in this article have been selected from this book