Silverlight & Blend动画设计系列十二

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

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

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

上图的UI外观设计为一个独立的UserControl，对应的xaml定义如下：

<UserControl x: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">
     <Canvas x:Name="ItemCanvas" Width="320" Height="240" Canvas.Left="77"  Canvas.Top="57" Background="#FFFFFFFF"
     RenderTransformOrigin="0.5,0.5">
         <Canvas.RenderTransform>
             <TransformGroup>
                 <RotateTransform x:Name="RotateItemCanvas" Angle="0"/>
             </TransformGroup>
         </Canvas.RenderTransform>
         <Image x:Name="Image" Width="300" Height="220" Canvas.Left="10"  Canvas.Top="10" Source="" Stretch="Fill"/>
         <Ellipse x:Name="Handle" Width="15" Height="15" Fill="#FFEAFF00"  Stroke="#FF000000" Canvas.Left="313" Canvas.Top="233"/>
     </Canvas>
</UserControl>