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

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();
}));