零基礎學通Silverlight4（4）：變換特效

   變換特效在動畫中尤爲有用，能夠改變Silverlight對象的形狀的方法，使用變換爲圖形對象提供旋轉、縮放、扭曲和移動的特效，能夠改變元素的尺寸和位置，達到奇異的效果。

變換特效不只適用於圖形，也適用於控件。

4.1旋轉變換

旋轉變換RotateTransform用於將圖形對象旋轉一個指定的角度，在平面內控制圖形旋轉，須要兩個參數，一個是旋轉的中心，另外一個旋轉的角度，所以具備以下3個屬性。

◎ Angle：旋轉指定角度值，默認值爲0

◎ CenterX：旋轉的水平中心點，默認值爲0

◎ CenterY：旋轉的垂直中心點，默認值爲0

 

如：

<Button Height="65" HorizontalAlignment="Left" Margin="37,0,0,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,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,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,0,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,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,36,0,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,36,0,0" Stroke="#FFE02727" VerticalAlignment="Top" Width="201"/>

           <Rectangle Margin="260,157,179,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