WPF 闪烁动画

实现

使用一个Boder控件,通过后台属性控制Boder的背景色变化,实现闪烁的效果。

1. 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 的动画。

2. cs后台代码

定义一个名为IsAnimation的通知属性,属性变化时通知前台,控制动画的执行与停止。

posted @ 2024-10-04 10:15  Zzz1207  阅读(386)  评论(0)    收藏  举报