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>