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