Silverlight开发历程—RenderTransform特效（TranslateTransform,RotateTransform,ScaleTransform,skewTransform）

变形RenderTransform类包含变形成员，专门来更改Silverlight的对象形状，它可以实现拉伸，旋转，扭曲等效果，同时变形通常用来辅助一些动画效果。

TranslateTransform:能够让某些对象的位置发生移位。

RotateTransform:能够让某些对象产生旋转变化，根据中心点进行顺时针或逆时针时行旋转

ScaleTransform：对对象产生缩放变化

SkewTransform：对对象产生扭曲变化

TransformGroup：将某些对象的缩放、扭曲等变化组合起来

MatrixTransform：能够让某对象通过矩阵算法来实现更加复杂的变形

 

TranslateTransform（平移变形）

TranslateTransform两个属性比较重要X，Y ,X，Y分别是相对于对象的起始点偏移的量，如下代码：
XAML：

 <Canvas x:Name="LayoutRoot" Background="Black">        <!--声明原Image-->        <Image Source="../images/jiqiren.jpg" Canvas.Left="66" Canvas.Top="54"></Image>        <!--new Image-->        <Image Source="../images/jiqiren.jpg" Canvas.Left="66" Canvas.Top="54">            <!--声明RenderTransform 属性-->            <Image.RenderTransform>                <!--使用TranslateTransform改变图像的位置-->                <TranslateTransform X="50"  Y="50"/>            </Image.RenderTransform>         </Image>    </Canvas>

运行结果：

 

RotateTransform（旋转变形）

三个属性比较重要  Angle（旋转的角度，正值为顺时针，负值为逆时针） CenterX、CenterY两个属性确定旋转的中心点,如下例子：

<Canvas x:Name="LayoutRoot" Background="Black">        <!--声明原Image-->        <Image Source="../images/jiqiren.jpg" Canvas.Left="335" Canvas.Top="80"></Image>        <!--new Image-->        <Image Source="../images/jiqiren.jpg" Canvas.Left="335" Canvas.Top="80">            <!--声明RenderTransform 属性-->            <Image.RenderTransform>                <!--使用RotateTransform旋转对象-->                <RotateTransform CenterX="25" CenterY="25" Angle="45"  />            </Image.RenderTransform>        </Image>        <Image Source="../images/jiqiren.jpg" Canvas.Left="335" Canvas.Top="80">            <!--声明RenderTransform 属性-->            <Image.RenderTransform>                <!--使用RotateTransform旋转对象-->                <RotateTransform CenterX="25" CenterY="25" Angle="90"  />            </Image.RenderTransform>        </Image>    </Canvas>

运行结果：

 

ScaleTransform（缩放变形）

两个属性比较重要 ScaleX和ScaleY ， 分别是产生缩放效果的纵横百分比，最大为1，最小为0，例如，ScaleX=0.5 那么就是缩放原横向坐标的50%，如下例子：

<Canvas x:Name="LayoutRoot" Background="Black">        <!--声明原Image-->        <Image Source="../images/jiqiren.jpg" Canvas.Left="335" Opacity="0.5" Canvas.Top="80"></Image>        <Image Source="../images/jiqiren.jpg" Canvas.Left="335" Canvas.Top="80">            <Image.RenderTransform>                <!--ScaleTransform 更改对象的大小-->                <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.7" ScaleY="0.7" />            </Image.RenderTransform>        </Image>    </Canvas>

运行结果：

 

SkewTransform（扭曲变化）

四个属性比较重要  AngleX、AngleY、CenterX、CenterY ， AngleX和AngleY是扭曲对象的倾斜度，CenterX和CenterY是扭曲的中心点，如下例子：

<Canvas x:Name="LayoutRoot" Background="Black">        <TextBlock Text="SkewTransform"  FontFamily="Arial Black"   Foreground="White" FontSize="40" Canvas.Left="239" Canvas.Top="0">        </TextBlock>        <TextBlock Text="SkewTransform"  FontFamily="Arial Black" Opacity="0.5"   Foreground="White" FontSize="40" Canvas.Left="232" Canvas.Top="33">            <TextBlock.RenderTransform>                <SkewTransform AngleX="35" AngleY="0" />            </TextBlock.RenderTransform>        </TextBlock>        <TextBlock Text="SkewTransform"  FontFamily="Arial Black"   Foreground="White" FontSize="40" Canvas.Left="252" Canvas.Top="240">        </TextBlock>        <TextBlock Text="SkewTransform"  Opacity="0.5" FontFamily="Arial Black"   Foreground="White" FontSize="40" Canvas.Left="262" Canvas.Top="156">            <TextBlock.RenderTransform>                <SkewTransform AngleX="-35" AngleY="0" CenterY="-30" />            </TextBlock.RenderTransform>        </TextBlock>        <TextBlock Text="SkewTransform"  FontFamily="Arial Black"   Foreground="White" FontSize="40" Canvas.Left="252" Canvas.Top="124">        </TextBlock>        <TextBlock Text="SkewTransform"  FontFamily="Arial Black"  Opacity="0.5"  Foreground="White" FontSize="40" Canvas.Left="249" Canvas.Top="274">              <TextBlock.RenderTransform>                <SkewTransform AngleX="35" AngleY="10"  />            </TextBlock.RenderTransform>        </TextBlock>    </Canvas>

运行结果：

 

 

TransformGroup

将多种变形效果组合起来，如下例子：

 <Canvas x:Name="LayoutRoot" Background="Black">        <Rectangle Width="230" Height="135" RadiusX="2" RadiusY="2" Stroke="Red" StrokeThickness="2" Canvas.Left="260" Canvas.Top="59">            <Rectangle.Fill>                <ImageBrush ImageSource="../images/jiqiren.jpg" Stretch="Fill"/>            </Rectangle.Fill>            <Rectangle.RenderTransform>                <!--使用TransformGroup 进行组合变形-->                <TransformGroup>                    <!--先扭曲变形-->                    <SkewTransform AngleX="35" AngleY="0"/>                    <!--再将对象旋转90度-->                    <RotateTransform Angle="65"   />                </TransformGroup>            </Rectangle.RenderTransform>        </Rectangle>    </Canvas>

运行结果：