RenderTransform特效(变形)

WPF中的变形（RenderTransform）类是为了达到直接去改变某个Silverlight对象的形状（比 如缩放、旋转一个元素）的目的而设计的，RenderTransform包含的变形属性成员就是专门 用来改变Silverlight对象形状的，它可以实现对元素拉伸，旋转，扭曲等效果，同时变形特 效也常用于辅助产生各种动画效果。

 

RenderTransform类：

* TranslateTransform：能够让某对象的位置发生平移变化。

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

* ScaleTransform：能够让某对象产生缩放变化。

* SkewTransform：能够让某对象产生扭曲变化。

* TransformGroup：能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用。

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

 

示例：

使用Canvas画布布局元素

<Canvas Width="1300" Height="300">

        <StackPanel Orientation="Horizontal" Canvas.Top="50">

            <!--TranslateTransform 平移-->

            <Image Source="Images\317656.jpg" />

            <Image Source="Images\317656.jpg" >

                <Image.RenderTransform>

                    <MatrixTransform Matrix="1 0 0 1 -80 30"/>

                </Image.RenderTransform>

            </Image>

           

            <!--RotateTransform 旋转-->

            <Image Source="Images\317283.jpg" />

            <Image Source="Images\317283.jpg" >

                <Image.RenderTransform>

                    <!--旋转90度-->

                    <MatrixTransform Matrix="0 1 -1 0 30 0"/>

                </Image.RenderTransform>

            </Image>

           

            <!--ScaleTransform 缩放-->

            <Image Source="Images\317651.jpg"/>

            <Image Source="Images\317651.jpg">

                <Image.RenderTransform>

                    <!--放大1.5倍-->

                    <MatrixTransform Matrix="1.5 0 0 1.5 -80 0"></MatrixTransform>

                </Image.RenderTransform>

            </Image>

           

            <!--SkewTransform 扭曲倾斜-->

            <Image Source="Images\317655.jpg"  />

            <Image Source="Images\317655.jpg" >

                <Image.RenderTransform>

                    <!--X轴倾斜-->

                    <MatrixTransform Matrix="1 0 1 1 -80 0" />

                </Image.RenderTransform>

            </Image>

           

            <!--TransformGroup 扭曲、缩放-->

            <Image Source="Images\318473.jpg"  Margin="50" />

            <Image Source="Images\318473.jpg"  Margin="50">

                <Image.RenderTransform>

                    <!--X轴倾斜，缩放到0.8倍-->

                    <MatrixTransform Matrix="0.8 0 1.2 0.8 -120 0"/>

                </Image.RenderTransform>

            </Image>

        </StackPanel>

</Canvas>

 

接着设置一下图片的样式

         <!--自定义页面资源样式-->

    <Window.Resources>

        <Style TargetType="Image" >

            <Setter Property="Width" Value="100"/>

            <Setter Property="Height" Value="100"/>

            <Setter Property="Opacity" Value="0.8"/>

            <Setter Property="Margin" Value="10"/>

            <Setter Property="Stretch" Value="UniformToFill"/>

        </Style>

</Window.Resources>      

 

展示效果：