以下是简单的按钮动画,事件触发动画效果:
<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>