Silverlight & Blend Animation Design Series 12

Silverlight & Blend Animation Design Series 12:3 angular function (trigonometry) Animation free rotation (free-form rotation)

When it comes to the rotation of objects, it may be associated with the concept of object angle. The object's rotation realization is actually uses the object angle change to realize the position transformation, in "Silverlight & Blend Animation Design Series Two: The Rotational animation (RotateTransform)" The article has the different Angle transformation realization Introduction to the object, The free rotation (free-form rotation) to be introduced in this article is presented in detail in the example project in the "Function Silverlight 3 Animation" book.

To achieve free rotation is very simple, you need to pay special attention to four points, both rotating objects, rotation center point, rotation angle and rotation focus. It can be simply understood that when clicking on a point on an object, the object can be rotated at unequal angles that are subject to a central point. For ease of control, the rotation focus is typically designed to be a relatively prominent UI rendering, as shown in the following illustration:

The UI design for the diagram above is a standalone UserControl, with the corresponding XAML defined as follows:

<usercontrol x:class= "Imagerotate.rotateitem"
xmlns= http://schemas.microsoft.com/winfx/2006/ Xaml/presentation "
xmlns:x=" "Http://schemas.microsoft.com/winfx/2006/xaml"
width= "height=" "> <canvas x:name= "Itemcanvas" width= "the" height= "", "canvas.left=" "" "," "canvas.top=" background= "" #FFFFFFFF " rendertransformorigin= "0.5,0.5"
<canvas.rendertransform>
<transformgrou p;
<rotatetransform x:name= "Rotateitemcanvas" angle= "0"/>
</transformgro Up>
</canvas.rendertransform>
<image x:name= "Image" width= "the" height= "the Canvas". left= "canvas.top=" "source=" "stretch=" Fill "/>
<ellipse x:name=" Handle "width=" "" Height= "F Ill= "#FFEAFF00" stroke= "#FF000000" canvas.left= "313" canvas.top= "233"/>
</canvas>
</usercontrol