说到对象的旋转,或许就会联想到对象角度的概念。对象的旋转实现实际上就是利用对象的角度改变来实现的位置变换,在《Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)》一文中有对对象的不同角度变换的实现介绍,本篇要介绍的自由旋转(Free-form rotation)将借助《Function Silverlight 3 Animation》一书中的示例项目介绍,详细敬请阅读本文。
要实现自由旋转其实非常简单,需要特别注意的有四点,既旋转对象、旋转中心点、旋转角度及旋转焦点。可以简单理解为当点击对象上的某一点可以对对象实现其以某一中心点为准的不等角度旋转。为了方便控制通常会将旋转焦点设计为相对突出的UI呈现,如下图示:
上图的UI外观设计为一个独立的UserControl,对应的xaml定义如下:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><UserControlx:Class="ImageRotate.RotateItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="320"Height="240">
<Canvasx:Name="ItemCanvas"Width="320"Height="240"Canvas.Left="77"Canvas.Top="57"Background="#FFFFFFFF"
RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<RotateTransformx:Name="RotateItemCanvas"Angle="0"/>
</TransformGroup>
</Canvas.RenderTransform>
<Imagex:Name="Image"Width="300"Height="220"Canvas.Left="10"Canvas.Top="10"Source=""Stretch="Fill"/>
<Ellipsex:Name="Handle"Width="15"Height="15"Fill="#FFEAFF00"Stroke="#FF000000"Canvas.Left="313"Canvas.Top="233"/>
</Canvas>
</UserControl>
分析上面的xaml可以知道,整个界面通过基于坐标的Canvas进行布局,默认设置布局容器的旋转角度为0度,在Canvas里面放置了一个图片作为可旋转的对象外观呈现,一个圆形作为旋转焦点。最终实现旋转功能的就是鼠标在Ellipse对象上的事件应用,通过事件处理函数来改变整个布局容器的旋转角度(Angle)。
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->privateboolIsMouseCaptured;
privatePointMousePosition;
privatePointLastPosition;
publicPointCanvasCenter;
privatedoubleLastAngle;
privatedoubleCurrentAngle;
privatedoubleAngleDelta;
publicRotateItem()
{
InitializeComponent();
//注册Ellipse对象的鼠标事件
Handle.MouseLeftButtonDown+=newMouseButtonEventHandler(Handle_MouseLeftButtonDown);
Handle.MouseLeftButtonUp+=newMouseButtonEventHandler(Handle_MouseLeftButtonUp);
Handle.MouseMove+=newMouseEventHandler(Handle_MouseMove);
}
privatevoidHandle_MouseLeftButtonUp(objectsender,MouseButtonEventArgse)
{
FrameworkElementItem=senderasFrameworkElement;
Item.ReleaseMouseCapture();
IsMouseCaptured=false;
Item.Cursor=null;
}
privatevoidHandle_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)
{
FrameworkElementItem=senderasFrameworkElement;
Item.CaptureMouse();
Item.Cursor=Cursors.Hand;
IsMouseCaptured=true;
LastPosition=e.GetPosition(null);
}
最关键的就是MouseMove事件了,在MouseMove事件处理函数中,通过计算鼠标点下时的坐标和当前所在的坐标进行弧度转化角度的计算,将得到的角度值设置为Canvas的旋转角度就达到了实现对象的自由旋转功能。
以下为弧度转化为角度的计算公式以及MouseMove事件算法实现:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->///<summary>
///弧度转化为角度
///</summary>
///<paramname="Radians"></param>
///<returns></returns>
privatedoubleRadiansToDegrees(doubleRadians)
{
returnRadians*180/Math.PI;
}
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->private voidHandle_MouseMove(objectsender,MouseEventArgse)
{
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;
}
}
使用也是非常简单的,动态创建上面所创建的UserControl然后将其添加到主容器控件中就可以了,如下演示代码:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->publicpartialclassMainPage:UserControl
{
publicMainPage()
{
InitializeComponent();
varPicture1=newRotateItem();
Picture1.Image.Source=newBitmapImage(newUri("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》----本篇中使用的示例素材选自此书
分享到:
相关推荐
刚接触WPF,初次使用Blend做WPF的动画效果,学习Blend制作WPF的循环动画、路径动画,上传是为了领勋章...
[最新出版Silverlight及Blend学习电子书教程合集] [最新出版Silverlight及Blend学习电子书教程合集]
Silverlight4 Blend SDK 中文文档
Foundation Expression Blend 4 with Silverlight 4 takes you through your first steps in creating Rich Internet Applications (RIAs) using the latest release of Microsoft’s technology. You’ll explore ...
silverlight_blend动画实例
Silverlight及Blend的电子教学文档
Blend 5 for Silverlight5 预览版 6月底过期不能用了,新版本又没有,就把它破解了下,把dll覆盖安装目录下的dll即可。经试验,没有啥功能限制,完全可用。
Blend silverlight Blend silverlight Blend silverlight Blend silverlight
使用Expression Blend 创建的Silverlight时钟
这是用blend画的一个等待旋转动画。这个动画可以放在一个弹出页面上,做项目加载动画
主要利用blend制作动画,生成WPF应用程序
[Apress] Expression Blend 4 高级程序设计 (英文版) [Apress] Pro Expression Blend 4 (E-Book) ☆ 出版信息:☆ [作者信息] Andrew Troelsen [出版机构] Apress [出版日期] 2011年03月04日 [图书页数] 400页...
C#的一些介绍比较全面 [2008年最新出版Silverlight及Blend学习电子书教程合集]
本次项目采用Silverlight实现一个简单的个人多媒体平台,通过该平台,用户可以搜索自己喜欢的多媒体文件,在线播放(其播放质量优于Flash);还可以参与评论、上传自己的作品。 技能点描述: 1.Silverlight常用控件...
PDF 书籍: Expression Blend 4中文版WPF和Silverlight项目设计基础。
AlphaBlend图片透明过渡动画特效-精品源代码
Expression Blend 3 Silverlight
WPF和Silverlight项目设计实例光盘源代码 作者:张洪定
这个代码详细示例了API函数AlphaBlend把图片透明过渡的动画特效,一个比较易学的示例.