在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 类。