再别康桥

[翻译]《Essential Silverlight》第六章 变形和动画 翻译 by candylight

本书翻译目的为个人学习和知识共享，其版权属原作者所有，如有侵权，请告知本人，本人将立即对发帖采取处理。
允许转载，但转载时请注明本版权声明信息，禁止用于商业用途！
发现整个章节的贴太痛苦了，尤其是编辑内容的时候，还是把该章节的word文档链接放在下面吧。
下载地址：
/Files/candylight/EssentialSilverlight6.rar
第六章 变形和动画
 
变形和动画内容
      Silverlight应用程序即使不借助JavaScript也可以是动态的。它的内容可以变形和运动，两者都将在本章讨论。对于变形来说，无法观察到其变化的过程，在Silverlight内容被插件渲染时，或多或少会通过计算来影响它。例如，您可以旋转或弯曲元素。动画，从另一方面来说，可以从视觉上改变应用程序的外观：元素可以变换颜色或改变颜色。同之前一样，您将看到很多小而独立的例子来展示最有趣和重要的Silverlight选项。

变形
      变形在技术上只改变一个或多个值。例如，如果旋转一个元素，它的位置和组成元素的所有像素点的坐标都将改变。如果一个元素移动到另一个位置（这也是变形），元素的边角的位置都要改变（先不管填充）。Silverlight支持五种变形：
   TranslateTransform 改变元素的位置
   ScaleTransform 按元素的水平和垂直尺寸进行缩放
   SkewTransform 使用水平和垂直角度变曲一个元素
   RotateTransform 使用一个角度旋转一个元素
   MatrixTransform 通过一个给定矩阵使跟元素所有点相乘，使用结果做为新的值

      让我们从<TranslateTransform>元素开始，它只改变一个元素的位置，跟设置相关属性如Canvas.Left或Canvas.Top效果一样。
      执行一个变形，需要使用<Element.RenderTransform>元素。需要替换进行转换的元素类型。如果想对一个<Rectangle>对象进行变形，就要使用<Rectangle.RenderTransform>。如果想对一个<TextBlock>对象进行变形，就要使用<TextBlock.RenderTransform>。
      在<Element.RenderTransform>元素内部，需要放置transformation元素；此例中使用<TranslateTransform>。在这个元素内添加两个属性X和Y，它们指示相关元素左上角的x和y坐标，如下所示：

 <TextBlock Text="">
     <TextBlock.RenderTransform>
       <TranslateTransform X="10" Y="20" />
     </TextBlock.RenderTransform>
 </TextBlock>

      例6-1基于第2章的Hello World例子，对矩形和文本块进行了转换。从最后结果中可以看到原来的元素和转换后的元素(如图6-1所示)。
      例6-1 元素转换，XAML文件（TranslateTransform.xaml）

 <Canvas xmlns="http://schemas.microsoft.com/client/2007"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />
 <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40" Foreground="Black" Text="Silverlight" />
 <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15">
     <Rectangle.RenderTransform>
       <TranslateTransform X="350" Y="175"/>
     </Rectangle.RenderTransform>
   </Rectangle>
 <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"  Foreground="Black" Text="Silverlight">
     <TextBlock.RenderTransform>
       <TranslateTransform X="350" Y="175" />
     </TextBlock.RenderTransform>
   </TextBlock>
 </Canvas>

      图6-1 原来元素（左）和转换元素（右）

      使用<ScaleTransform>进行元素缩放。您可以按水平（ScaleX属性）和垂直（ScaleY属性）方向进行缩放，也可以提供中点坐标（CenterX和CenterY属性）。缩放值实际上是一个因数。例如，因数值为2可以使水平和垂直方向尺寸变为原来的2倍，0.5的因数则会把它们减半。例6-2演示了以上两种情形，如图6-2所示。
      例6-2 元素缩放，XAML文件（ScaleTransform.xaml）

 <Canvas xmlns="http://schemas.microsoft.com/client/2007"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />
   <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"
              Foreground="Black" Text="Silverlight" />
   <Rectangle Canvas.Left="350" Canvas.Top="175"
              Width="300" Height="150" Stroke="Orange" StrokeThickness="15">
     <Rectangle.RenderTransform>
       <ScaleTransform ScaleX="1.5" ScaleY="0.5"/>
     </Rectangle.RenderTransform>
   </Rectangle>
   <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="375" Canvas.Top="215" Foreground="Black" Text="Silverlight">
     <TextBlock.RenderTransform>
       <ScaleTransform ScaleX="1.5" ScaleY="0.5"/>
     </TextBlock.RenderTransform>
   </TextBlock>
 </Canvas>

      图6-2 原来元素（左）和缩放元素（右）

      下一个变形效果是弯曲，在Silverlight中使用<SkewTransform>元素表现。可以使用水平角度（AngleX）和垂直角度（AngleY）来进行弯曲。您也可以再一次设置CenterX和CenterY来提供变形的中心点。例6-3的代码使用了水平方向45度和垂直方向-30度（和330度效果一样，因为一个圆周为360度）的弯曲。图6-3显示了其效果。
      例6-3 元素弯曲，XAML文件（SkewTransform.xaml）

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15"/>
    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40" Foreground="Black" Text="Silverlight" />
   <Rectangle Canvas.Left="350" Canvas.Top="175" Width="300" Height="150" Stroke="Orange" StrokeThickness="15">
      <Rectangle.RenderTransform>
        <SkewTransform CenterX="50" CenterY="25" AngleX="45" AngleY="-30"/>
      </Rectangle.RenderTransform>
   </Rectangle>
   <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="375" Canvas.Top="215" Foreground="Black" Text="Silverlight">
     <TextBlock.RenderTransform>
       <SkewTransform CenterX="50" CenterY="25" AngleX="45" AngleY="-30"/>
     </TextBlock.RenderTransform>
   </TextBlock>
 </Canvas>

      图6-3 原来元素（左）和弯曲元素（右）

      最后一个“简单”的变形是旋转，在Silverlight中使用<RotateTransform>。您所需做的只是给Angle属性提供旋转的角度（单位为度）。默认情况下，以左上角为圆心进行旋转，也就是相对坐标（0,0）。您可以使用CenterX和CenterY属性来自定义这个旋转点。
      在例6-4中，<Rectangle>元素延点（150,50）旋转45度。使用同样角度旋转<TextBlock>需要注意，对照方块使文本块向右转换25个像素，向下转换40个像素。这些用于补偿旋转点。所以我们从（150-25,50-40）得到（125,10）。如图6-4所示，文本块的位置仍保持在矩形内。
      例6-4 旋转元素，XAML文件（RotateTransform.xaml）

<Canvas xmlns="http://schemas.microsoft.com/client/2007"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />
   <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40" Foreground="Black" Text="Silverlight" />
 
   <Rectangle Canvas.Left="350" Canvas.Top="175" Width="300" Height="150" Stroke="Orange" StrokeThickness="15">
     <Rectangle.RenderTransform>
       <RotateTransform Angle="-45" CenterX="150" CenterY="50"/>
     </Rectangle.RenderTransform>
   </Rectangle>
 
   <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="375" Canvas.Top="215" Foreground="Black" Text="Silverlight">
     <TextBlock.RenderTransform>
       <RotateTransform Angle="-45" CenterX="125" CenterY="10"/>
     </TextBlock.RenderTransform>
   </TextBlock>
 </Canvas>