红色警笛上方闪烁的线条

本文关键字:闪烁 方闪烁 红色 | 更新日期: 2023-09-27 18:16:30

我是c#新手,找不到适合我问题的解决方案。我试图使闪烁线以上的红色警笛如下在wpf。当我点击按钮时,绘制的线条应该每秒闪烁一次,如下图所示。

红色警笛上方的闪烁线

下面的代码是在警笛上画红线。2. 参数(bool a)是通过定时器改变行可见性。

 // Below method is for drawing line and bool a parameter is for changing line visibility according to Mytimer_Tick. 
    public void DrawLine(Point[] points, bool a)
    {
        int i = 0;
        int count = points.Length;
           for (i = 0; i < count - 1; i += 2) 
           { 
        Line myline = new Line();
            myline.Stroke = Brushes.Red;
            myline.StrokeThickness = 3;
            myline.SnapsToDevicePixels = true;
            myline.X1 = points[i].X;
            myline.Y1 = points[i].Y;
            myline.X2 = points[i + 1].X;
            myline.Y2 = points[i + 1].Y;
            Grid.Children.Add(myline);
            if (a==true)
            {
                myline.Visibility = Visibility.Visible;
            }
           else
            {
                myline.Visibility = Visibility.Collapsed;
            }           
        }
    }

下面部分为时间间隔为1秒的定时器。

// Timer with 1 sec. timespan. It's for making lines blink every second.     
    public void button_Click(object sender, RoutedEventArgs e)
             {
             DispatcherTimer mytimer = new DispatcherTimer();
                 mytimer.Tick += Mytimer_Tick;
                 mytimer.Interval = new TimeSpan(0, 0, 1);
                 mytimer.Start(); }       
    private bool BlinkOn = true;
    public void Mytimer_Tick(object sender, EventArgs e)
    {
        Point[] points = new Point[10]
         {
          new Point(100, 50),
          new Point(100, 10),
          new Point(115, 50),
          new Point(145, 10),
          new Point(125, 70),
          new Point(185, 45),
          new Point(85, 50),
          new Point(55, 10),
          new Point(75, 70),
          new Point(25, 45),
         };
        if(BlinkOn)
        {
            DrawLine(points, true);
        }
        else
        {
            DrawLine(points,false);
        }
        BlinkOn = !BlinkOn;
        }

下面是XAML:

<Window x:Class="try_out_blinking_lines.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:try_out_blinking_lines"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid x:Name="prid">
    <Grid x:Name="Grid" HorizontalAlignment="Left" Height="170" Margin="130,51,0,0" VerticalAlignment="Top" Width="206" RenderTransformOrigin="0.5,0.5">
        <Image x:Name="siren_r0_jpg" Margin="69,55,78,57" Source="siren_r0.jpg" Stretch="Fill"/>
        <Border BorderThickness="2,2,2,2" BorderBrush="Green"></Border>
    </Grid>
    <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="201,261,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
</Grid>

结果是:它不眨眼。

如果有人帮忙,我将非常感激。谢谢你,

红色警笛上方闪烁的线条

这种效果不需要计时器。把这五行放到Canvas中,并通过DoubleAnimation:

设置不透明度。
<Canvas>
    <Canvas>
        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard Duration="0:0:2" RepeatBehavior="Forever">
                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                         BeginTime="0:0:1" Duration="0:0:0" To="0"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>
        <Line X1="100" Y1="10" X2="100" Y2="50" Stroke="Red" StrokeThickness="3"/>
        <Line X1="145" Y1="10" X2="115" Y2="50" Stroke="Red" StrokeThickness="3"/>
        <Line X1="55" Y1="10" X2="85" Y2="50" Stroke="Red" StrokeThickness="3"/>
        <Line X1="185" Y1="45" X2="125" Y2="70" Stroke="Red" StrokeThickness="3"/>
        <Line X1="25" Y1="45" X2="75" Y2="70" Stroke="Red" StrokeThickness="3"/>
    </Canvas>
    <Image Source="siren_r0.jpg"
           Width="50" Height="50" Canvas.Left="75" Canvas.Top="55"/>
</Canvas>

现在你也可以通过不断调整不透明度来实现各种漂亮的闪烁效果,比如

<Storyboard RepeatBehavior="Forever">
    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                     Duration="0:0:0.5" To="0" AutoReverse="True">
        <DoubleAnimation.EasingFunction>
            <CubicEase EasingMode="EaseOut"/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>

现在,您将在每个计时器刻度中创建它们,因此有许多lines被一个接一个地创建。此外,您没有清除false参数上添加的行。

所以,创建你的线在Loaded事件的网格。

在每一个计时器滴答,只是显示/隐藏他们。

另外,我将在这里使用Canvas