ImageRotate主要讲是使用正弦、余弦函数结合鼠标拖动来完成对象按拖动角度选择。

效果图如下,按黄色的角拖动可以使图片围绕中心旋转。

Silverlight动画基础六:动画与三角函数-图片旋转

此代码主要包含了两个对象

1.RotateItem:用于实现和控制对象的旋转。

2.ImageRotate:容器。

首先来看一下RotateItem对象

 

RotateItem

主要对象,RotateItem对象实现了对自身鼠标旋转的控制,使用鼠标拖动事件结合Math.Atan2函数进行对象的角度。代码如下:

 

RotateItem.xaml代码

>

 
RotateItem.xaml.cs代码,主要代码都在这里处理。
return Radians * 180 / Math.PI;
}
}

关键代码中的注释已经说明了它的基本用法。

 

 

ImageRotate

ImageRotate对象为容器,用于承载RotateItem,提供了对RotateItem的初始化、加载等功能。

 

ImageRotate.xaml代码:

>

 

ImageRotate.xaml.cs代码:

double)Picture2.GetValue(Canvas.TopProperty) + Picture2.Height / 2;
Picture2.RotateItemCanvas.Angle = -15;
LayoutRoot.Children.Add(Picture2);

}
}

 

所有代码已经完成了

运行效果演示地址:点击查看

 

总结:从代码中可以发现,主要使用了Math.Atan2函数,根据鼠标前后位置的变化值,

计算出围绕RotateItem中心点的旋转角度。

Silverlight动画基础六:动画与三角函数-图片旋转

 

 

【注:本文技术论点源于《Foundation Silverlight 3 Animation》,个人理解可能存在差异,请参考原著】

相关文章: