闪烁动画 WPF

Question

我有一个动画，是一种闪烁的效果，当点击按钮时，矩形就会“闪烁”。我已经写了一个动画的代码，只是想知道是否有更好的方法来实现这个动画。有什么建议吗？

以下是代码：

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

- Sangeetha

---

更好的方式是不要闪烁。<blink>标签终于消失了，让它安息吧。人们讨厌它是有原因的。 - Cody Gray

自作聪明的评论，@CodyGray - xr280xr

我觉得由于布局后果，你应该使用Hidden而不是Collapsed。 - Gusdor

Answer 1

您可以使用简单的 DoubleAnimation 在矩形的 Opacity 属性上，而不是使用 ObjectAnimationUsingKeyFrames 动画：

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

- Pavlo Glazkov

---

如何让这个闪烁不要渐隐？类似于文本框光标。 - Mike

Answer 2

我知道这是一个旧帖子，但是要补充一下Pavlo的答案，他的答案对我有帮助并且正确。 我想要的是实际的闪烁效果，而不是快速的“淡入淡出”。我使用了他的动画代码并进行了一些修改：

在你的资源中：

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

- EdwardM

Answer 3

另一种更“闪烁般”的方法，但是使用 EasingFuncion 而不是复杂的 storyboard...

(基于其他优秀答案)

使用代码：

...
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 };
...

使用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>

- Adam Calvet Bohl

Answer 4

以下是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次的，当它完成后，我们必须使用 AlertArea2 恢复 Opacity。

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

- NoWar