零基础学通Silverlight44：变换特效

   变换特效在动画中尤其有用，可以改变Silverlight对象的形状的方法，使用变换为图形对象提供旋转、缩放、扭曲和移动的特效，可以改变元素的尺寸和位置，达到奇异的效果。

变换特效不仅适用于图形，也适用于控件。

4.1旋转变换

旋转变换RotateTransform用于将图形对象旋转一个指定的角度，在平面内控制图形旋转，需要两个参数，一个是旋转的中心，另一个旋转的角度，因此具有如下3个属性。

◎ Angle：旋转指定角度值，默认值为0

◎ CenterX：旋转的水平中心点，默认值为0

◎ CenterY：旋转的垂直中心点，默认值为0

 

如：

<Button Height="65" HorizontalAlignment="Left" Margin="37,145" VerticalAlignment="Bottom" Width="158" Content="按扭" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" FontSize="26.667">

                  <Button.RenderTransform>

                         <TransformGroup>

                                <ScaleTransform/>

                                <SkewTransform/>

                                <RotateTransform Angle="41.46"/>

                                <TranslateTransform/>

                         </TransformGroup>

                  </Button.RenderTransform>

</Button>

显示的结果如图4.1-1：

 

 

          

图4.1-1

 

默认点（CenterX，CenterY），是相对定位，即(0,0)表示的是左上角。

 

4.2缩放变换

缩放变换ScaleTransform用于放大或缩小一个图形对象，可以水平缩放或者垂直缩放，或同时水平或垂直缩放，主要使用两对参数，放大/缩小倍数和缩放中心位置，主要参数如下：

◎ ScaleX：增加图形对象的宽度，默认值为1。

◎ ScaleY：增加图形对象的高度，默认值为1。

◎ CenterX：水平缩放的方向，默认值为0。

◎ CenterY：垂直缩放的方向，默认值为0。

如：

<TextBlock textwrapping="Wrap" Width="83" Height="35.5" FontSize="25" Canvas.Top="53.75" Canvas.Left="109" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Margin="140,165,0" VerticalAlignment="Top" d:LayoutOverrides="Width">

           <TextBlock.RenderTransform>

                  <TransformGroup>

                         <ScaleTransform ScaleX="3" ScaleY="1"/>                     

                  </TransformGroup>

           </TextBlock.RenderTransform>大家好</TextBlock>

    <TextBlock textwrapping="Wrap" Width="83" Height="35.5" FontSize="25" RenderTransformOrigin="0.5,0.5" Margin="53,104,0" HorizontalAlignment="Left" VerticalAlignment="Top" d:LayoutOverrides="Width"><TextBlock.RenderTransform>

                         <TransformGroup>

                                <ScaleTransform ScaleX="1" ScaleY="1"/>                     

                         </TransformGroup>

</TextBlock.RenderTransform>大家好</TextBlock>    

呈现的结果，如图4.2-1：

 

                  图4.2-1

当图像不平翻转或垂直翻转时，可ScaleX=-1,ScaleY=-1,操作是选择从菜单“对象”中的“翻转”。

<Image Margin="63,50,218" Source="flower1.jpg" Stretch="Fill" HorizontalAlignment="Left" Width="152" RenderTransformOrigin="0.5,0.5">

           </Image>

           <Image Margin="239,114,249,154" Source="flower1.jpg" Stretch="Fill" RenderTransformOrigin="0.5,0.5">

                  <Image.RenderTransform>

                         <TransformGroup>

                                <ScaleTransform  ScaleX="-1"/>

                                <SkewTransform AngleX="0" AngleY="0"/>

                                <RotateTransform Angle="0"/>

                                <TranslateTransform/>

                         </TransformGroup>

                  </Image.RenderTransform>

</Image>

 

显示的结果见图4.2-2：

         

图4.2-2

4.3扭曲变换

扭曲变换SkewTransform可以达到简单的立体效果，用于将一个图形对象扭曲指定的角度，具有如下4个属性

◎ AngleX：水平扭曲值，默认值为0。

◎ AngleY：垂直扭曲值，默认值为0。

◎ CenterX：扭曲水平基点，默认值为0。

◎ CenterY：扭曲垂直基点，默认值为0。

如：

<Image Margin="217.197,124.188,272.484,188" Source="house2.jpg" Stretch="Fill" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">

                  <Image.RenderTransform>

                         <TransformGroup>

                                <ScaleTransform/>

                                <SkewTransform AngleX="40"/>

                                <RotateTransform />

                                <TranslateTransform/>

                         </TransformGroup>

                  </Image.RenderTransform>

</Image>

           <Image Margin="20,36,0" Source="house2.jpg" Stretch="Fill" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Width="155" Height="173" VerticalAlignment="Top"/>        

   显示的结果如图4.3-1：

                 

      图4.3-1

4.4移动变换

移动变换TranslateTransform是一个简单的转换，将一个图形对象从一个位置移动到另一个位置，具有两个属性。

◎ X：水平移动的距离，默认值为0。

◎ Y：垂直移动的距离，默认值为0。

如：

<Rectangle Width="181" Height="107" Fill="#FFFFFFFF" stroke="#FF000000"  RenderTransformOrigin="0.5,0.5">

           <Rectangle.RenderTransform>

                  <TransformGroup>

                    <TranslateTransform X="50" Y="90"/>

                  </TransformGroup>

           </Rectangle.RenderTransform>

</Rectangle>

移动变换主要用在动画中动态地实现它。

4.5组合变换

组合变换TransformGroup就是把多个变换组合起来，比如移动一个元素的同时对它作缩放，如：

<Grid x:Name="LayoutRoot" Background="White">

           <Rectangle HorizontalAlignment="Left" Height="106" Margin="38,0" stroke="#FFE02727" VerticalAlignment="Top" Width="201"/>

           <Rectangle Margin="260,157,179,217" stroke="#FFE02727">

                                <Rectangle.RenderTransform>

                  <TransformGroup>

                         <ScaleTransform ScaleX="1.5"  ScaleY="1"/>

                         <SkewTransform AngleX="20" AngleY="0"/>

                         <RotateTransform Angle="30"/>

                         <TranslateTransform X="10" Y="0"/>

                  </TransformGroup>

           </Rectangle.RenderTransform>                 

           </Rectangle>        

    </Grid>

显示的结果，如图4.5-1：

 

               图4.5-1

4.6复合变换

复合变换CompositeTransform可以简化组合变换TransformGroup的XAML代码，如上述组合变换的等效XAML如下：

<Grid x:Name="LayoutRoot" Background="White">

           <Rectangle HorizontalAlignment="Left" Height="106" Margin="38,0" stroke="#FFE02727" VerticalAlignment="Top" Width="201"/>

           <Rectangle Margin="260,217" stroke="#FFE02727">

                                <Rectangle.RenderTransform>

<CompositeTransform ScaleX="1.5"  ScaleY="1" SkewX="20"  Rotation="30" TranslateX="10"/>

           </Rectangle.RenderTransform>                 

           </Rectangle>        

    </Grid>

4.7矩阵变换

矩阵变换MatrixTransform是一个自定义的变形对象，图形的旋转、绽放、扭曲、移动等变换，都通过矩阵变换来实现，如直接使用矩阵变换，还可以提高运行速度。

矩阵变形MatrixTransform由3*3的矩阵组成，如表9-1所示：

表9-1

M11 ，默认值： 1.0	M12 ，默认值： 0.0	0.0
M21 ，默认值： 0.0	M22 ，默认值： 1.0	0.0
OffsetX ，默认值： 0.0	OffsetY ，默认值： 0.0	1.0

如将第二行第二列中的值更改为5，则可将该对象拉伸为当前高度的五倍，如将第三行第一列中的值更改为500，则可将该对象沿x轴移动500单位，如将第三行第二列中的值更改为500，则可将该对象沿y轴移动500单位，如果同时更改，则变换同时进行。

范例 示范使用矩阵变换创建立方体

图4.7-1是运行后效果，由三个矩形变形组成的一个立方体。

               图4.7-1

◎XAML标记如下，已添加注解。

<UserControl

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    x:Class="Ch9_Exam5_1.MainPage"

    Width="640" Height="480" mc:Ignorable="d">

    <Canvas>      

           <Rectangle stroke="#FF1D1919" Height="172" Width="170" strokeThickness="5" UseLayoutRounding="False" Canvas.Top="15.8" d:LayoutRounding="Auto" >

                  <Rectangle.Fill>

    <LinearGradientBrush EndPoint="0.741,1.083" StartPoint="0.259,-0.083">

                                <GradientStop Color="Black" Offset="0"/>

                                <GradientStop Color="White" Offset="1"/>

                         </LinearGradientBrush>

                  </Rectangle.Fill>

<!--左面的矩阵变形-->

                  <Rectangle.RenderTransform>

                         <MatrixTransform>

                                <MatrixTransform.Matrix>

<Matrix OffsetX="60" OffsetY="100"     M12="-0.6" />

                                </MatrixTransform.Matrix>

                         </MatrixTransform>

                  </Rectangle.RenderTransform>

           </Rectangle>

<Rectangle Height="172" Width="169" strokeThickness="5" Canvas.Left="230" Canvas.Top="15" UseLayoutRounding="False" d:LayoutRounding="Auto" >

                  <Rectangle.stroke>

                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                <GradientStop Color="Black" Offset="0"/>

                                <GradientStop Color="White" Offset="1"/>

                         </LinearGradientBrush>

                  </Rectangle.stroke>

                  <Rectangle.Fill>

           <LinearGradientBrush EndPoint="0.185,1.171" StartPoint="0.815,-0.171">

                                <GradientStop Color="Black" Offset="0"/>

                                <GradientStop Color="#FFACC7EF" Offset="1"/>

                         </LinearGradientBrush>

                  </Rectangle.Fill>

<!--右面的矩阵变形-->

                   <Rectangle.RenderTransform>

                <MatrixTransform>

                    <MatrixTransform.Matrix>

<Matrix OffsetX="0"  OffsetY="0"    M12="0.9" />

                    </MatrixTransform.Matrix>

                </MatrixTransform>

            </Rectangle.RenderTransform>

           </Rectangle>

           <Rectangle stroke="#FF413B3B" Height="169.533" Width="168.8" strokeThickness="5" Canvas.Left="139" Canvas.Top="96" UseLayoutRounding="False" d:LayoutRounding="Auto" >

                  <Rectangle.Fill>

                         <LinearGradientBrush EndPoint="0.211,0.016" StartPoint="0.789,0.984">

                                <GradientStop Color="Black" Offset="0"/>

                                <GradientStop Color="#FFE9ADAD" Offset="1"/>

                         </LinearGradientBrush>

                  </Rectangle.Fill>

<!--下面的矩阵变形-->

                   <Rectangle.RenderTransform>

                <MatrixTransform>

                    <MatrixTransform.Matrix>

<Matrix OffsetX="90" OffsetY="90" M11="1" M12="0.9"  M21="-1" M22="0.6" />

                    </MatrixTransform.Matrix>

                </MatrixTransform>

            </Rectangle.RenderTransform>

           </Rectangle>

    </Canvas>

</UserControl>

      

更详细内容及源代码下载：

http://www.amazon.cn/mn/detailApp/ref=sr_1_1?_encoding=UTF8&s=books&qid=1287058088&asin=B0043RT7I2&sr=8-1