WPF制作抖动按钮

在WPF中，Transform类可以非常方便的实现旋转、缩放、扭曲和平移操作，一两行代码就能达到意想不到的效果。更让人欣喜的是Transform 还支持动画，这样可以让我们十分简单的在UI上实现很多有趣的动画。下面就介绍一个通过RotateTransform 的动画实现按钮抖动的例子。

原理很简单：通过将RotateTransform 的Angle属性进行动画绑定，使按钮来回旋转。

问了更好的显示抖动效果，我们给按钮加上一个圆形的图标icon.png。

下面给按钮写一个抖动的样式：

<Style x:Key="shakeButtonStyle" TargetType="{x:Type ButtonBase}">
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="0"/>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="ButtonBase.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                 From="-30" To="30" Duration="0:0:0.09" AutoReverse="True" RepeatBehavior="2x" FillBehavior="Stop"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>

通过动画，我们将按钮从-30°旋转到30°，然后在旋转回来，重复此动作2次，所有的动作在900毫秒内完成。就是旋转抖动效果了。

下面是应用了该样式的按钮。

<Button VerticalAlignment="Center" Width="48" Background="Transparent" BorderThickness="0" Style="{StaticResource shakeButtonStyle}">
                <Image Source="icon.png"/>
</Button>

如果不想使用旋转抖动，而是上下抖动或者左右抖动，可以将RotateTransform类换成 TranslateTransform 类。如果想要向心脏收缩跳动一样的抖动，可以使用ScaleTransform 类。