WPF动画简单练习

来源：互联网发布：淘宝开店充话费流程编辑：程序博客网时间：2024/05/23 05:08

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

<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>

就会得到另一种效果

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

0 0