Silverlight & Blend动画设计系列十二：三角函数（Trigonometry）动画之自由旋转（Free-form rotation）

说到对象的旋转，或许就会联想到对象角度的概念。对象的旋转实现实际上就是利用对象的角度改变来实现的位置变换，在《Silverlight & Blend动画设计系列二：旋转动画（RotateTransform）》一文中有对对象的不同角度变换的实现介绍，本篇要介绍的自由旋转（Free-form rotation）将借助《Function Silverlight 3 Animation》一书中的示例项目介绍，详细敬请阅读本文。

 

　　要实现自由旋转其实非常简单，需要特别注意的有四点，既旋转对象、旋转中心点、旋转角度及旋转焦点。可以简单理解为当点击对象上的某一点可以对对象实现其以某一中心点为准的不等角度旋转。为了方便控制通常会将旋转焦点设计为相对突出的UI呈现，如下图示：

　　　　　　　　可旋转UserControl完整代码  

　　使用也是非常简单的，动态创建上面所创建的UserControl然后将其添加到主容器控件中就可以了，如下演示代码：

 

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        var Picture1 = new RotateItem();
        Picture1.Image.Source = new BitmapImage(new Uri("Marigold.jpg", UriKind.Relative));
        Picture1.SetValue(Canvas.LeftProperty, 100.00);
        Picture1.SetValue(Canvas.TopProperty, 100.00);
        Picture1.CanvasCenter.X = (double)Picture1.GetValue(Canvas.LeftProperty) + Picture1.Width / 2;
        Picture1.CanvasCenter.Y = (double)Picture1.GetValue(Canvas.TopProperty) + Picture1.Height / 2;
        Picture1.RotateItemCanvas.Angle = -15;
        LayoutRoot.Children.Add(Picture1);
    }
}