红色警笛上方闪烁的线条
本文关键字:闪烁 方闪烁 红色 | 更新日期: 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