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>

Answer 1

您可以在矩形的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>

Answer 2

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

在您的资源中：

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

Answer 3

这是需要它的人的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();
}));

闪烁动画WPF

3 个答案: