WPF特效汇总，教你如何在XAML、CS中书写，建议收藏！

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

一、RenderTransform类

该类成员如下：

成员	含义
TranslateTransform	能够让某对象的位置发生平移变化
RotateTransform	能够让某对象产生旋转变化，根据中心点进行顺时针旋转或逆时针旋转
ScaleTransform	能够让某对象产生缩放变化
SkewTransform	能够让某对象产生扭曲变化
TransformGroup	能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用
MatrixTransform	能够让某对象通过矩阵算法实现更为复杂的变形

注意：

变形元素包括平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素，变形特效常用于在不改变对象本身 构成的情况下，使对象产生变形效果，所以变形元素常辅助产生Silverlight中的各种动画效果。

补充：

通常，对于MediaElement元素使用RenderTransform属性比使用LayoutTransform属性更好，因为RenderTransform属性是 轻量级的。而且它还可以使用方便的RenderTransformOrigin属性值，从而可以为特定的变换（如旋转）使用相对坐标。

二、XAML代码书写

<Canvas Width="1300" Height="300">
    <StackPanel Orientation="Horizontal" Canvas.Top="50">
        <!--TranslateTransform 平移 -->
        <Image Source="C:\Users\Administrator\Desktop\motivational.jpg" Height="100" Width="100" Stretch="Fill" Margin="10" Opacity="0.5"></Image>
        <Image Source="C:\Users\Administrator\Desktop\motivational.jpg" Height="100" Width="100" Stretch="Fill" Margin="10">
            <Image.RenderTransform>
                <MatrixTransform Matrix="1 0 0 1 -80 30"></MatrixTransform>
            </Image.RenderTransform>
        </Image>
        <!-- RotateTransform 旋转 -->
        <Image Source="C:\Users\Administrator\Desktop\motivational.jpg" Height="100" Width="100" Stretch="Fill" Margin="10" Opacity="0.5"></Image>
        <Image Source="C:\Users\Administrator\Desktop\motivational.jpg" Height="100" Width="100" Stretch="Fill" Margin="10">
            <Image.RenderTransform>
                <!--90°旋转 -->
                <MatrixTransform Matrix="0 1 -1 0 30 0"></MatrixTransform>
            </Image.RenderTransform>
        </Image>
        <!--ScaleTransform 缩放 -->
        <Image Source="C:\Users\Administrator\Desktop\motivational.jpg" Height="100" Width="100" Stretch="Fill" Margin="10" Opacity="0.5"></Image>
        <Image Source="C:\Users\Administrator\Desktop\motivational.jpg" Height="100" Width="100" Stretch="Fill" Margin="10">
            <Image.RenderTransform>
                <!-- 放大1.5倍 -->
                <MatrixTransform Matrix="1.5 0 0 1.5 -80 0"></MatrixTransform>
            </Image.RenderTransform>
        </Image>
        <!-- SkewTransform 扭曲倾斜 -->
        <Image Source="C:\Users\Administrator\Desktop\motivational.jpg" Height="100" Width="100" Stretch="Fill" Margin="10" Opacity="0.5"></Image>
        <Image Source="C:\Users\Administrator\Desktop\motivational.jpg" Height="100" Width="100" Stretch="Fill" Margin="10">
            <Image.RenderTransform>
                <!-- x轴倾斜 -->
                <MatrixTransform Matrix="1 0 1 1 -80 0"></MatrixTransform>
            </Image.RenderTransform>
        </Image>
        <!--TransformGroup 扭曲、缩放-->
        <Image Source="C:\Users\Administrator\Desktop\motivational.jpg" Height="100" Width="100" Stretch="Fill" Margin="10" Opacity="0.5"></Image>
        <Image Source="C:\Users\Administrator\Desktop\motivational.jpg" Height="100" Width="100" Stretch="Fill" Margin="10">
            <Image.RenderTransform>
                <!-- x轴倾斜 -->
                <!-- 放大1.5倍 -->
                <MatrixTransform Matrix="1.5 0 1 1.5 -120 0"></MatrixTransform>
            </Image.RenderTransform>
        </Image>
    </StackPanel>
</Canvas>

详情请查看本人另一篇博文：WPF中RenderTransform特效XAML详细讲解

三、CS代码书写

1. 首先，需要引入动画的命名空间，如下：

using System.Windows.Media.Animation;

2. 在XAML里面，创建一个按钮，并设置它的相关样式，如下：

<Grid>
    <Button Width="200" Height="100" Content="点击试试" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Aqua" FontSize="32" FontFamily="楷体" Foreground="BlueViolet" FontWeight="Bold" Click="ButtonBase_OnClick" Name="btn"></Button>
</Grid>

3. 变换动画案例（宽度改变），如下：

//实例化一个动画
//指定一个Double类型的属性,使其在指定的时间内由起点值到达终点值,从而形成动画效果
DoubleAnimation da = new DoubleAnimation();
//设置动画的开始值
da.From = btn.Width;
//设置动画的结束值
da.To = 300;
//设置动画时间
da.Duration = new Duration(TimeSpan.FromSeconds(1));
//开始动画
btn.BeginAnimation(Button.WidthProperty, da);

注：这个btn是我在XAML里创建按钮时，给它起的名字

4. 旋转动画案例，如下：

//实例化一个旋转对象
RotateTransform rt = new RotateTransform();
//将这个旋转对象，绑定到按钮的动画上
btn.RenderTransform = rt;
//设置旋转中心百分比
btn.RenderTransformOrigin = new Point(0.5, 0.5);
//设置动画，其参数在上面案例中已演示
DoubleAnimation da = new DoubleAnimation(0, 3600, new Duration(TimeSpan.FromSeconds(3)));
//开始动画
rt.BeginAnimation(RotateTransform.AngleProperty, da);

注：要实现无限次旋转动画，即：da.RepeatBehavior = RepeatBehavior.Forever;

关于RenderTransformOrigin的相关使用，详情请查看本人另一篇博文：WPF中使用RenderTransformOrigin来控制动画的起点

5. 变换动画案例（宽高改变），如下：

DoubleAnimation dawidth = new DoubleAnimation(btn.Width, 200, new Duration(TimeSpan.FromSeconds(1)));
DoubleAnimation daheight = new DoubleAnimation(btn.Height, 200, new Duration(TimeSpan.FromSeconds(1)));
//开始动画
//变化不是阻塞的,而是异步,所以看上去长度与高度几乎是同时变化
btn.BeginAnimation(Button.WidthProperty, dawidth);
btn.BeginAnimation(Button.HeightProperty, daheight);

6. 缩放动画案例，如下：

//创建一个2D缩放的对象
ScaleTransform st = new ScaleTransform();
//设置缩放中心百分比
btn.RenderTransformOrigin = new Point(0.5,0.5);
//设置X轴缩放比例
st.ScaleX = 0.5;
//设置Y轴缩放比例
st.ScaleY = 1;
//创建一个动画集合
TransformGroup tfg = new TransformGroup();
//给集合中，加入创建的动画
tfg.Children.Add(st);
//将动画绑定到按钮上
btn.RenderTransform = tfg;

7. 移动动画案例，如下：

//设置动画
DoubleAnimation da = new DoubleAnimation(0,300,new Duration(TimeSpan.FromSeconds(2)));
//创建一个二维平移对象
TranslateTransform tt = new TranslateTransform();
//将这个对象，绑定给按钮
btn.RenderTransform = tt;
//开始动画
tt.BeginAnimation(TranslateTransform.XProperty,da);

8. 扭曲（倾斜）动画案例，如下：

//创建一个扭曲（倾斜）对象
SkewTransform sf = new SkewTransform(15,15);
TransformGroup tfg = new TransformGroup();
tfg.Children.Add(sf);
btn.RenderTransform = tfg;