Мигающие анимации в WPF

У меня есть эта анимация со мной, своего рода мигающая анимация, такая, что при нажатии кнопки прямоугольник "мигает". Я написал код для анимации, просто хотел узнать, есть ли лучший способ достичь этой анимации. Есть предложения?

код, как показано ниже:

    <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>
6
animation wpf

3 ответов

вместо ObjectAnimationUsingKeyFrames анимация, вы можете использовать простой DoubleAnimation на Opacity свойства прямоугольника:

<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>
21

вот версия кода C# для тех, кто в ней нуждается...

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

С другой стороны, вы можете реализовать мигание для любого такого элемента управления.

 <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 должен генерировать мигание 3 раза, и когда он будет завершен, мы должны восстановить Opacity используя AlertArea2.

в конструкторе 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();
}

в месте, где вам нужно начать мигать, сделайте это

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

Я знаю, что это старая нить, но добавить к ответу Павла, который помог мне и правильно. Я хотел больше реального эффекта мерцания, чем быстрого "затухания". Я использовал его анимационный код и немного изменил его:

в ваши ресурсы:

<!-- 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>

в XAML:

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