WPF 动画闪烁效果
WPF 动画闪烁效果
一、按钮外边缘呼吸闪烁
点击触发效果；
代码：
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Style x:Key="ResourcesButtonStyle" TargetType="{x:Type FrameworkElement}" >
<Setter Property="Width" Value="60"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect x:Name="OSE" BlurRadius="10"
Color="Lime" Direction="0"
Opacity="1"
RenderingBias="Performance"
ShadowDepth="0" >
<Storyboard.TargetProperty>
BlurRadius
</Storyboard.TargetProperty>
</DropShadowEffect>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(FrameworkElement.Effect).(DropShadowEffect.BlurRadius)"
From="0" To="100"
BeginTime="00:00:00" Duration="00:00:01"
AutoReverse="True" RepeatBehavior="Forever"/>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(FrameworkElement.Effect).(DropShadowEffect.Color)"
RepeatBehavior="Forever" AutoReverse="True">
<EasingColorKeyFrame KeyTime="0" Value="Yellow"/>
<EasingColorKeyFrame KeyTime="0:0:0.4" Value="Purple"/>
<EasingColorKeyFrame KeyTime="0:0:0.8" Value="Green"/>
<EasingColorKeyFrame KeyTime="0:0:1.2" Value="DarkCyan"/>
<EasingColorKeyFrame KeyTime="0:0:1.6" Value="Black"/>
<EasingColorKeyFrame KeyTime="0:0:2.0" Value="OrangeRed"/>
<EasingColorKeyFrame KeyTime="0:0:2.4" Value="Violet"/>
<EasingColorKeyFrame KeyTime="0:0:2.8" Value="CornflowerBlue"/>
<EasingColorKeyFrame KeyTime="0:0:3.2" Value="Lime"/>
<EasingColorKeyFrame KeyTime="0:0:3.6" Value="Azure"/>
<EasingColorKeyFrame KeyTime="0:0:4.0" Value="Turquoise"/>
<EasingColorKeyFrame KeyTime="0:0:4.4" Value="Tomato"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Content="Hello" Background="#007ACC" Height="30" Width="50" Style="{StaticResource ResourcesButtonStyle}"/>
</Grid>
</Window>
二、实心圆颜色呼吸渐变
效果：
代码：
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Storyboard x:Key="OnLoaded" RepeatBehavior="Forever" AutoReverse="True" >
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Ellipse">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#990033"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource OnLoaded}"/>
</EventTrigger>
</Window.Triggers>
<Grid Background="White">
<Ellipse x:Name="Ellipse" Height="20" Width="20" Fill="#FF6666" >
<Ellipse.Effect>
<DropShadowEffect Opacity="1" ShadowDepth="0" Color="#FF6666" BlurRadius="200" Direction="10"></DropShadowEffect>
</Ellipse.Effect>
</Ellipse>
</Grid>
</Window>
三、TextBlock字体呼吸闪烁
代码：
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Background="White">
<TextBlock Text="Hello!" FontSize="48" Foreground="#ED4646" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Medium" x:Name="TextBlockRecording">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard BeginTime="0:0:0" Duration="0:0:4" AutoReverse="True" RepeatBehavior="Forever">
<ColorAnimation From="#ED4646" To="#F0F2F7" Duration="0:0:2" RepeatBehavior="Forever" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TextBlockRecording">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Grid>
</Window>
Storyboard类属性介绍：
AccelerationRatio ：获取或设置一个值，该值指定在将时间消逝从零加速到其最大速率的过程中所占用时间线的 Duration 的百分比。 (继承自 Timeline)
AutoReverse ：获取或设置一个值，该值指示时间线在完成向前迭代后是否按相反的顺序播放。 (继承自 Timeline)
BeginTime ：获取或设置此 Timeline 应开始的时间。 (继承自 Timeline)
CanFreeze ：获取一个值，该值指示是否可将对象变为不可修改。 (继承自 Freezable)
Children ：获取或设置 TimelineGroup 的直接子 Timeline 对象的集合。 (继承自 TimelineGroup)
DecelerationRatio ：获取或设置一个值，该值指定在将时间消逝从其最大速率减速到零的过程中所占用时间线的 Duration 的百分比。 (继承自 Timeline)
DependencyObjectType ：获取对此实例的 CLR 类型进行包装的 DependencyObjectType。 (继承自 DependencyObject)
Dispatcher ：获取与此 Dispatcher 关联的 DispatcherObject。 (继承自 DispatcherObject)
Duration ：获取或设置此时间线播放的时间长度，而不是计数重复。 (继承自 Timeline)
FillBehavior ：获取或设置一个值，该值指定 Timeline 在到达其有效期末尾后的行为。 (继承自 Timeline)
HasAnimatedProperties ：获取一个值，该值指示一个或多个 AnimationClock 对象是否与此对象的任何依赖项属性相关联。 (继承自 Animatable)
IsFrozen ：获取一个值，该值指示对象当前是否可修改。 (继承自 Freezable)
IsSealed ：获取一个值，该值指示此实例当前是否为密封的（只读）。 (继承自 DependencyObject)
Name ：获取或设置此 Timeline 的名称。 (继承自 Timeline)
RepeatBehavior ：获取或设置此时间线的重复行为。 (继承自 Timeline)
SlipBehavior ：获取或设置一个值，该值指定在其中一个或多个 Timeline 子级滑动时此时间线的行为方式。 (继承自 ParallelTimeline)
SpeedRatio ：获取或设置此 Timeline 的时间相对于其父级的前进速率。 (继承自 Timeline)
推荐阅读