WPF动画简单练习

在一个窗体中加入几个按钮，简单布局如下

<Grid>
        <StackPanel>
            <Button Width="100" Height="100" Content="我是按钮1"></Button>
            <Button Width="100" Height="100" Content="我是按钮2"></Button>
            <Button Width="100" Height="100" Content="我是按钮3"></Button>
        </StackPanel>
    </Grid>

为了显示动画，我们要在资源中添加动画

<Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="RenderTransformOrigin" Value="0.5 0.5"></Setter>
            <Setter Property="Padding" Value="20,15"></Setter>
            <Setter Property="Margin" Value="2"></Setter>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <RotateTransform ></RotateTransform>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                                                 To="360" Duration="0:0:0.8" RepeatBehavior="Forever">
                                    
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                                                 Duration="0:0:0.2"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

这个资源定义了两个时间触发器，时间触发器改变的是变换的角度

效果是，当我们把鼠标移动到按钮上时，按钮开始选装，当鼠标移开时，按钮恢复原的位置。

这里有一点需要注意，当我们把

Setter Property="RenderTransform"

设置成 

Setter Property="LayoutTransform

布局如下

<Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="RenderTransformOrigin" Value="0.5 0.5"></Setter>
            <Setter Property="Padding" Value="20,15"></Setter>
            <Setter Property="Margin" Value="2"></Setter>
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <RotateTransform ></RotateTransform>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.Angle"
                                                 To="360" Duration="0:0:0.8" RepeatBehavior="Forever">
                                    
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.Angle"
                                                 Duration="0:0:0.2"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

就会得到另一种效果

这两种变换的区别是：第一种当旋转时布局不会动态改变，就是当我们点击第一个按钮时，他下面的按钮位置不会改变。第二种就不一样，如果我们点击第一个按钮时，他下面的按钮位置会发生变化