实现
xaml前台文件
<Border Width="15" Height="15" Margin="25 0 0 0" ><Border.Style><Style TargetType="{x:Type Border}"><Setter Property="Background" Value="#FF3BA245" /><Style.Triggers><DataTrigger Binding="{Binding IsAnimation}" Value="True"><DataTrigger.EnterActions><BeginStoryboard x:Name="stateAnimation"><Storyboard AutoReverse="True" RepeatBehavior="Forever"><ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"><EasingColorKeyFrame KeyTime="0" Value="Transparent" /><EasingColorKeyFrame KeyTime="00:00:0.3" Value="#00ff00" /><EasingColorKeyFrame KeyTime="00:00:0.6" Value="#ff0000" /></ColorAnimationUsingKeyFrames></Storyboard></BeginStoryboard></DataTrigger.EnterActions><DataTrigger.ExitActions><StopStoryboard BeginStoryboardName="stateAnimation" /></DataTrigger.ExitActions></DataTrigger></Style.Triggers></Style></Border.Style>
</Border>
- <Style.Triggers> 定义了一系列触发器(Triggers),用于响应特定的数据变化。
- DataTrigger监视与 IsAnimation 属性的绑定,当 IsAnimation 的值为 True 时,触发该触发器内定义的动画。
- EnterActions: 当触发器条件为真时,进入动作会开始一个名为 stateAnimation 的动画故事板。
- Storyboard 是动画的容器。这里设置为自动反向(AutoReverse="True")并且循环播放(RepeatBehavior="Forever")。
- ColorAnimationUsingKeyFrames: 定义了一个色彩动画,目标是 Background 的颜色属性。
- KeyFrames: 定义关键帧,第一帧为透明色,时间为0s时;第二帧为绿色,时间为0.3s时;第三帧为红色,时间为0.6s时。
- ExitActions: 当 IsAnimation 的值变为 False 时,退出行为会停止名为 stateAnimation 的动画。
cs后台代码
定义一个名为IsAnimation的通知属性,属性变化时通知前台,控制动画的执行与停止。