붉은 색 사이렌 위에 깜박이는 선

Question

저는 C#에 익숙하고 내 문제에 적합한 해결책을 찾지 못했습니다. wpf에서 빨간색 사이렌 위에 깜박이는 줄을 만들려고합니다. 버튼을 클릭하면 그림이 그려진 선이 매초마다 깜박입니다.

Blinking lines over red siren

그리고 코드 아래

는 사이렌을 통해 레드 라인을 그리기위한 것입니다. 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 초의 시간 경과 타이머입니다. 타이머는 버튼으로 시작됩니다.

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

그리고 결과 :

// 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이다가 깜박이지 않습니다.

누군가 도움이된다면 정말 고맙겠습니다. 감사합니다,

Answer 1

이러한 종류의 효과를 위해 타이머가 필요하지 않습니다. 그냥 캔버스에있는 5 개 개의 라인을 넣어 및 DoubleAnimation하여 불투명도를 애니메이션 :

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

처럼

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

지금 당신은 또한 지속적으로 불투명도를 애니메이션으로 좋은 깜박이는 효과를 모든 종류의를 구현할 수

Answer 2

이제 타이머 틱마다 타이머를 생성하므로 lines이 하나씩 생성됩니다. 또한 false 매개 변수의 추가 된 행을 지우지 않습니다.

그래서 격자의 Loaded 이벤트에 줄을 만듭니다.

그리고 모든 타이머 틱마다 표시/숨기기 만합니다.

또한 여기에 Canvas을 사용했을 것입니다.