WPF前台动画Animation

以下是简单的按钮动画，事件触发动画效果：

<Button x:Name="test" Content="事件动画" Height="50" Width="100" Background="Red">
            <Button.Triggers >
                <EventTrigger RoutedEvent="Button.MouseMove">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation  Storyboard.TargetProperty="Opacity"
                                     From="1.0" To="0.0" Duration="0:0:1" RepeatBehavior="Forever" AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

里面主要涉及到几个参数&属性：
1.BeginStoryboard：开始故事板
2.Storyboadd：故事板设计
3.DoubleAnimation ：指定一个Double类型的属性,使其在指定的时间内由起点值到达终点值,从而形成动画效果.
4.Storyboard.TargetProperty：要操作的属性
5.其实还有一个Storyboard.TargetName：要动画效果的元素名称
6.Duration：即运行一个动画所需的时间，如0：0：5即对应动画所需5秒中。
7.RepeatBehavior：动画重复的次数，输入数字即训话多少次；输入’Forever‘代表一直循环。
8.AutoReverse:输入True，动画正向运行然后反向运行；输入False，动画只正向运行。

以下是通过绑定属性触发动画效果：

<CheckBox x:Name="bb" Content="显示动画" Margin="0,50,0,0" HorizontalAlignment="Center"/>

        <Button Content="绑定动画" Height="50" Margin="50" Width="100" Background="Red">
            <Button.Style>
                <Style TargetType="Button">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=bb,Path=IsChecked}" Value="true">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard x:Name="animation">
                                    <Storyboard>
                                        <DoubleAnimation  Storyboard.TargetProperty="Opacity"
                                     From="1.0" To="0.0" Duration="0:0:1" RepeatBehavior="Forever" AutoReverse="True"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="animation"/>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

绑定属性触发循环动画有个问题，就是绑定属性变化之后，运行的动画不会停止并一直运行；以下代码可以有效解决此问题，可以在属性更改之后直接停止动画。

<DataTrigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="animation"/>
                            </DataTrigger.ExitActions>

颜色变换动画效果：

<DataTrigger Binding="{Binding mModel.runState}" Value="true">

                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard RepeatBehavior="Forever" AutoReverse="True">
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="Orange"/>
                                                <EasingColorKeyFrame KeyTime="0:0:1" Value="Yellow"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                
</DataTrigger>

以上只是简单的动画讲解，后期会更新更多的WPF动画技巧。