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

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

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

　　　　　　　　可旋转UserControl完整代码

public partial class RotateItem : UserControl
{
private bool IsMouseCaptured;
private Point MousePosition;
private Point LastPosition;
public Point CanvasCenter;
private double LastAngle;
private double CurrentAngle;
private double AngleDelta;

public RotateItem()
{
InitializeComponent();
Handle.MouseLeftButtonDown += new MouseButtonEventHandler(Handle_MouseLeftButtonDown);
Handle.MouseLeftButtonUp += new MouseButtonEventHandler(Handle_MouseLeftButtonUp);
Handle.MouseMove += new MouseEventHandler(Handle_MouseMove);
}

private void Handle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
FrameworkElement Item = sender as FrameworkElement;
Item.ReleaseMouseCapture();
IsMouseCaptured = false;
Item.Cursor = null;
}

private void Handle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
FrameworkElement Item = sender as FrameworkElement;
Item.CaptureMouse();
Item.Cursor = Cursors.Hand;
IsMouseCaptured = true;
LastPosition = e.GetPosition(null);
}

private void Handle_MouseMove(object sender, MouseEventArgs e)
{
MousePosition = e.GetPosition(null);

if (IsMouseCaptured)
{
LastAngle = Math.Atan2(LastPosition.Y - CanvasCenter.Y, LastPosition.X - CanvasCenter.X);
CurrentAngle = Math.Atan2(MousePosition.Y - CanvasCenter.Y, MousePosition.X - CanvasCenter.X);
AngleDelta = CurrentAngle - LastAngle;
RotateItemCanvas.Angle += RadiansToDegrees(AngleDelta);
LastPosition = MousePosition;
}
}

/// <summary>
/// 弧度转化为角度
/// </summary>
/// <param name="Radians"></param>
/// <returns></returns>
private double RadiansToDegrees(double Radians)
{
return Radians * 180 / Math.PI;
}
}

　　使用也是非常简单的，动态创建上面所创建的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);
}
}

　　　　　　　　



　　推荐资源：

　　Silverlight & Blend动画设计系列文章

　　《Function Silverlight 3 Animation》----本篇中使用的示例素材选自此书





版权说明

本文属原创文章，欢迎转载且注明文章出处，其版权归作者和博客园共有。

作 者：Beniao

文章出处：http://beniao.cnblogs.com/ 或 http://www.cnblogs.com/