Blinking animation WPF

Question

I have this animation with me, a sort of blinking animation, such that when the button is clicked, the rectangle "blinks". I've written a code for the animation, just wanted to know if there is a better way to achieve this animation. Any suggestions?

Code is as below:

    <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 ObjectAnimationUsingKeyFrames animation, you can use simple DoubleAnimation on 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 this is an old thread, but to add-on to Pavlo's answer, which helped me and is correct. I wanted more of an actual flicker effect, than a quick "fade-in fade-out". I used his animation code and modified 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 C# code version for someone 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();
    }

From other hand there 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 is to generate blinking 3 times and when it is finished we have to restore Opacity using 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();
}

In the place you need to start blinking do this

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

Answer 4

One more approach for a more "flicker-like" version, but using EasingFuncion instead of complex storyboards...

(Based on other nice answers here)

Using code:

...
DoubleAnimation da = new DoubleAnimation();
da.From = 1.0;
da.To = 0.0;
da.RepeatBehavior = RepeatBehavior.Forever;
da.AutoReverse = true;
da.EasingFunction = new ElasticEase() { EasingMode = EasingMode.EaseInOut };
...

Using XAML:

<DoubleAnimation Storyboard.TargetName="rectangle"
     Storyboard.TargetProperty="Opacity"
     From="0"
     To="1"
     Duration="0:0:0.25"
     AutoReverse="True"
     RepeatBehavior="Forever">
    <DoubleAnimation.EasingFunction>
        <ElasticEase EasingMode="EaseInOut" />
    </DoubleAnimation.EasingFunction>    
</DoubleAnimation>