WPF 动画：同为控件不同命 - 简书

原文:WPF 动画：同为控件不同命 - 简书

1. 及格与优秀

读大学的时候，有一门课的作业是用 PPT 展示。

但是我们很多同学都把 PPT 当做 Word 来用，就单纯地往里面堆文字。

大家都单纯地从一页堆积的文字翻到另一页堆积的文字，以致于台下的同学都听不下去，包括那些以同样的方式汇报的同学。

本来以为会在枯燥中期待下课的到来，直到有个叫幽灵东的同学汇报，他惊艳到了我们。

相比别人单纯地堆积文字，他更多的采用图片+较少的文字的方式。

同时，那些图片和文字的出现、出现顺序、消失，都采用了动画。这些经过设计的动画，串联起来之后，竟让我们观众像是在看一部小动漫。

我们不禁都盯着屏幕，赞叹着正在呈现的动画，同时又期待着下一个动画。

2. 动起来的软件

而对于我们的 Windows 软件或 网站，在实现基础的业务功能后，做一些"增值"的动画效果，会让我们的系统看起来，更有趣。

所以，有时候，我们会在鼠标移入按钮时，让按钮缓慢变大；

又或者打开一个子窗口的时候，让这个子窗口以动画的方式出现在我们面前，例如：像一幅画一样，从左到右展开的方式。

这两种动画都是在控件的尺寸上做手脚。

然而，今天我们要讲的重点是：

虽然按钮（System.Windows.Controls.Button 类）和窗口（System.Windows.Window 类） 都继承自 System.Window.Controls.ContentControl。

它们实现缩放动画的方式，却有些出入。

3. Button 的缩放实现

当你想对 Button 进行缩放时，你可以通过对不同的属性分发动画，来实现该效果。

3.1 基于 Width 和 Height 的动画

即：将动画分发给 Button 的 Width 和 Height 属性，从而实现 Button 的缩放。

3.1.1 代码

<Style TargetType="{x:Type Button}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Width" To="180" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="Forever"/>
                        <DoubleAnimation Storyboard.TargetProperty="Height" To="180" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="Forever"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>

3.1.2 效果

image

3.2 基于 RenderTransform 的动画

跟 Width 一样，RenderTransform 也是 Button 的依赖项属性。

它的值类型为 System.Windows.Media.Transform，这个类是定义在二维平面上启用变换的功能，包括旋转、缩放、扭曲、平移。

System.Windows.Media.Transform 的子类 System.Windows.Media.ScaleTransform ，就是实现在二维 x-y 坐标系内缩放对象。

所以下面我们会用到它。

3.2.1 代码

<Style TargetType="{x:Type Button}" x:Key="zoomByScale">
    <!--设置元素的重点为转换的中心点-->
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>

    <!--设置转换信息为（或往转换信息里添加）缩放-->
    <Setter Property="RenderTransform">
        <Setter.Value>
            <ScaleTransform></ScaleTransform>
        </Setter.Value>
    </Setter>

    <!--鼠标移入时，将动画分发给 ScaleTransform 的 ScaleX、ScaleY 属性-->
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="1.2" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="0:0:6"/>
                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="1" To="1.2" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="0:0:6"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>

3.2.2 效果

image

3.2.3 附件

属性	摘要	备注
RenderTransform	获取或设置影响此元素的呈现位置的转换信息	依赖项属性，值为 System.Windows.Media.Transform 类的对象
ScaleTransform	在二维 x-y 坐标系内缩放对象	继承自 Transform 类
ScaleX	获取或设置 x 轴的缩放比例	ScaleTransform 的成员。默认值为 1
RotateTransform	在 二维 x-y 坐标系内围绕指定点按照顺时针方向旋转对象。	继承自 Transform 类
Angle	获取或设置顺时针旋转角度（以度为单位）	RotateTransform 的成员。默认值为 0

3.3 Viewbox 的一次性缩放

3.3.1 代码

<Grid Width="300" Height="300">
    <Viewbox Width="150" Height="150" x:Name="vb_ChangeSizeButton">
        <Button Width="150" Height="150" Content="Viewbox 带我飞"/>
    </Viewbox>
    <StackPanel Margin="15" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal">
        <Button Margin="10" Click="Zoom_Big" Cursor="Hand" Content="+"/>
        <Button Margin="10" Click="Zoom_Small" Cursor="Hand" Content="——" />
    </StackPanel>
</Grid>

// 将 viewBox 的尺寸放大到 1.2 倍
private void Zoom_Big(object sender, RoutedEventArgs e)
{
    vb_ChangeSizeButton.Width = vb_ChangeSizeButton.Width * 1.2;
    vb_ChangeSizeButton.Height = vb_ChangeSizeButton.Height * 1.2;
}

// 将 viewBox 的尺寸除以 1.2
private void Zoom_Small(object sender, RoutedEventArgs e)
{
    vb_ChangeSizeButton.Width = vb_ChangeSizeButton.Width / 1.2;
    vb_ChangeSizeButton.Height = vb_ChangeSizeButton.Height / 1.2;
}

3.3.2 解释

当 viewbox 的尺寸改变时，子元素大小缩放的倍数等同于 viewbox 的缩放倍数。

3.3.3 效果

image

4. Window 的缩放

对于 Window 的动画，我们一般是分发给它的 RenderTransform 属性。

Width 或 Height 虽然也可以，但是无法实现同时缩放宽高。

既然提到了，我们就先来看看。

4.1 Window 基于 Width 和 Height 的动画

4.1.1 动画只分发给 Width 属性

4.1.1.1 代码

<Window.Style>
    <Style TargetType="Window" BasedOn="{StaticResource {x:Type Window}}">
        <Setter Property="AllowsTransparency" Value="True"/>
        <Setter Property="WindowStyle" Value="None"/>
        <Setter Property="ResizeMode" Value="CanResizeWithGrip" />
        <Style.Triggers>
            <EventTrigger RoutedEvent="Window.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="300" Duration="0:0:0.6"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Style>

4.1.1.2 效果

image

这看起来还挺正常。但如果你想要宽高同时放大呢？

4.1.2 Window 基于 Width 和 Height 的蹩脚动画

4.1.2.1 代码

<Window.Style>
    <Style TargetType="Window" BasedOn="{StaticResource {x:Type Window}}">
        ...
        <Style.Triggers>
            <EventTrigger RoutedEvent="Window.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="300" Duration="0:0:0.6"/>
                            <DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="300" Duration="0:0:0.6"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Style>

4.1.2.2 效果

image

这种并不是我们想要的结果。

把两个动画的开始时间错开，也不是用户想要的。

所以，我们更喜欢将动画分发给 RenderTransform 属性。

4.2 window 基于 RenderTransform 的动画

这里将仅对 ScaleX 放大的情况一笔带过了..

image

4.2.1 将动画分发给 ScaleX 和 ScaleY，实现宽高同时放大的代码

 <Window.Style>
    <Style TargetType="Window" BasedOn="{StaticResource {x:Type Window}}">
        ...
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform></ScaleTransform>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Window.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" From="0" To="1" Duration="0:0:0.6" AccelerationRatio="0.7"/>
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="0" To="1" Duration="0:0:0.6" AccelerationRatio="0.7"/>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Style>

4.2.2 效果

image

5.总结

1. 对于 Button，你可以通过 Width|Height、RenderTransform、父元素 ViewBox 的方式进行：宽、高、宽高同时，这 3 种的动画缩放。
2. 对于 Window，你可以通过 Width|Height、RenderTransform 进行宽或高的缩放，但如果要同时缩放宽高，我们用 RenderTransform.

3. 内容将同步到微信公众号：广州 WPF 开发

   广州 WPF 开发.jpg