Flashing WPF Animation

Question

I have this animation with me, a kind of blinking animation, so when the button is pressed, the rectangle “blinks”. I wrote the code for the animation, I just wanted to find out if there is a better way to achieve this animation. Any suggestions?

The code is as follows:

<Window.Resources> <Storyboard x:Key="OnClick1"> <ObjectAnimationUsingKeyFrames Duration="0:0:10" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle"> <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static Visibility.Visible}"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Static Visibility.Collapsed}"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Visible}"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="{x:Static Visibility.Collapsed}"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{x:Static Visibility.Visible}"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{x:Static Visibility.Collapsed}"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.9" Value="{x:Static Visibility.Visible}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Window.Triggers> <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button"> <BeginStoryboard Storyboard="{StaticResource OnClick1}"/> </EventTrigger> </Window.Triggers> <Grid x:Name="LayoutRoot"> <Rectangle x:Name="rectangle" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="35" Margin="129,166,0,0" Stroke="Black" VerticalAlignment="Top" Width="73"/> <Button x:Name="button" Content="Button" Margin="272,158,263,0" Height="37" VerticalAlignment="Top"/> </Grid> 

Answer 1

Instead of animating ObjectAnimationUsingKeyFrames you can use a simple DoubleAnimation in the Opacity property of your rectangle:

 <Storyboard x:Key="OnClick1"> <DoubleAnimation Storyboard.TargetName="rectangle" Storyboard.TargetProperty="Opacity" From="0" To="1" RepeatBehavior="10x" AutoReverse="True" Duration="0:0:0.1"/> </Storyboard> 

Answer 2

I know that this is an old branch, but to complement Paul, the answer that helped me and is correct. I wanted more of a real flicker effect than a quick "fade out" . I used its animation code and changed it a bit:

In your resources:

 <!-- Animation to flicker, like a cursor when typing --> <Storyboard x:Key="AnimateFlicker" RepeatBehavior="Forever"> <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" AutoReverse="True" BeginTime="0:0:1" Duration="0:0:0.08" /> <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="1" AutoReverse="True" Duration="0:0:0.4" /> <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" AutoReverse="True" Duration="0:0:0.08" /> </Storyboard> 

In your XAML:

 <TextBlock Text="Flicker Me" FontSize="14" Margin="0"> <TextBlock.Triggers> <EventTrigger RoutedEvent="Loaded"> <BeginStoryboard Storyboard="{StaticResource AnimateFlicker}" /> </EventTrigger> </TextBlock.Triggers> </TextBlock> 

Answer 3

Here is the C # code version for those who need it ...

  if (IsImageBlinking) { DoubleAnimation da = new DoubleAnimation(); da.From = 1.0; da.To = 0.0; da.RepeatBehavior = RepeatBehavior.Forever; da.AutoReverse = true; sb.Children.Add(da); Storyboard.SetTargetProperty(da, new PropertyPath("(Image.Opacity)")); Storyboard.SetTarget(da, image1); sb.Begin(); } 

On the other hand, you can implement blinking for any control like this.

  <UserControl.Resources> <Thickness x:Key="ControlMargin">0 5 0 0</Thickness> <Storyboard x:Key="AlertArea" > <DoubleAnimation Storyboard.TargetName="gdPersonData" Storyboard.TargetProperty="Opacity" From="0" To="1" RepeatBehavior="3x" AutoReverse="True" Duration="0:0:0.1"/> </Storyboard> <Storyboard x:Key="AlertArea2" > <DoubleAnimation Storyboard.TargetName="gdPersonData" Storyboard.TargetProperty="Opacity" From="1" To="0" RepeatBehavior="1x" AutoReverse="True" Duration="0:0:0.1"/> </Storyboard> </UserControl.Resources> 

AlertArea should generate a blink 3 times, and when it is finished, we need to restore Opacity with AlertArea2 .

In the constructor of UserControl/Window

 .. Storyboard sb = this.FindResource("AlertArea") as Storyboard; sb.Completed += Sb_Completed; .. private void Sb_Completed(object sender, EventArgs e) { Storyboard sb2 = this.FindResource("AlertArea2") as Storyboard; sb2.Begin(); } 

At this point you need to start flashing, do it

 Dispatcher.BeginInvoke((Action)(() => { Storyboard sb = this.FindResource("AlertArea") as Storyboard; sb.Begin(); }));