动画的动态变换

1. 动态变换
   变换提供了自定义元素的最强大方式之一。每个元素都能以两种不同的方式使用变换，RenderTransform属性和LayoutTransform属性。RenderTransform属性效率更高。因为是在布局之后应用变换，并且用于变换最终的渲染输出。LayoutTransform在布局前应用，从而其他控件需要重新排列以适应变换。
   （1）、使用 变形（RenderTransform） 代码：

        <Style TargetType="{x:Type Button}">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="100"/>
            <Setter Property="Margin" Value="20"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <!--使用RotateTransform时，一定要使用TransformGroup，否则不能进行动画-->
                    <TransformGroup>
                        <!--RotateTransform：能够让某对象产生旋转变化，根据中心点进行顺时针旋转或逆时针旋转。-->
                        <RotateTransform/>
                    </TransformGroup>
                </Setter.Value>
            </Setter>
            <!--样式关联触发器-->
            <Style.Triggers>
                <!--MouseLeave鼠标进入事件-->
                <EventTrigger RoutedEvent="Button.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="RenderTransform.Children[0].Angle">
                                <DoubleAnimation From="0" To="360" Duration="0:0:2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <!--MouseLeave鼠标离开事件-->
                <EventTrigger RoutedEvent="Button.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetProperty="RenderTransform.Children[0].Angle">
                                <DoubleAnimation To="0" Duration="0:0:1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <!--页面布局-->
    <StackPanel>
        <Button Content="旋转" Background="#FF3BFF2F"/>
        <Button Content="旋转" Background="Red"/>
        <Button Content="旋转" Background="#FF00C3FF"/>
        <Button Content="旋转" Background="#FFF6C200"/> 
    </StackPanel>

        效果图：鼠标移入正方体中，正方体会改变颜色并360°旋转。鼠标移出正方体则恢复原状。

2. 

（2）、使用LayOutTransform：
代码：

1.             <Setter Property="LayoutTransform">
                   <Setter.Value>
                       <!--RotateTransform：能够让某对象产生旋转变化，根据中心点进行顺时针旋转或逆时针旋转。-->
                       <RotateTransform/>
                   </Setter.Value>
               </Setter> 使用LayOutTransform就是改变上面这一部分代码和下面这部分在鼠标移入、移出中的代码。其他的代码都和RenderTransform的代码一样。
   <Storyboard RepeatBehavior="Forever"
   Storyboard.TargetProperty="LayoutTransform.Angle">
   

   效果图：使用LayOutTransform写的代码效果图和上面的差别就是当正方体旋转成菱形时下面的三个正方体就会弹下去，当正方体从菱形旋转回正方体时三个正方体就会弹回来。