.net - WPF/xaml 中动画心跳/示波器效果的明智方法

Question

我想为我的应用程序添加动画心跳/示波器效果，类似于以下内容:

不过，我不确定要采取什么方法。我考虑过(但不知道从哪里开始)的方法是:

• 将整条线准备为一条路径，然后用一个不透明的矩形覆盖它，上面有一个窗口，这样您就可以通过它看到这条线。
• 准备好路径，沿着它画线，一次移动一点。

请注意，这是一种效果，而不是实际的数据绑定(bind)示波器(我预计这会更难)。

Answer 1

我意识到已经快 3 年了，但我想我会把我发现的东西传下去...... http://www.yazgelistir.com/makale/silverlight-ile-bir-ekg-animasyonu

以防页面消失...

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="300" Height="200"
  Background="#FF000000"
  x:Name="Page"
  >
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <BeginStoryboard>
        <Storyboard RepeatBehavior="Forever" x:Name="Storyboard1">
          <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.StartPoint)">
            <SplinePointKeyFrame KeyTime="00:00:00" Value="-31.5,-28.5"/>
            <SplinePointKeyFrame KeyTime="00:00:02" Value="308,-29.5"/>
          </PointAnimationUsingKeyFrames>
          <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)">
            <SplinePointKeyFrame KeyTime="00:00:00" Value="-9.5,-28.5"/>
            <SplinePointKeyFrame KeyTime="00:00:02" Value="330,-29.5"/>
          </PointAnimationUsingKeyFrames>
          <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)">
            <SplinePointKeyFrame KeyTime="00:00:00" Value="-9.5,228.5"/>
            <SplinePointKeyFrame KeyTime="00:00:02" Value="330,227.5"/>
          </PointAnimationUsingKeyFrames>
          <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)">
            <SplinePointKeyFrame KeyTime="00:00:00" Value="-31.5,228.5"/>
            <SplinePointKeyFrame KeyTime="00:00:02" Value="308,227.5"/>
          </PointAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Canvas.Triggers>
    <Canvas x:Name="Layer_1" Width="300" Height="200" Canvas.Left="0" Canvas.Top="0">
      <Canvas.Clip>
        <PathGeometry>
          <PathFigure IsClosed="True" StartPoint="-31.5,-28.5">
            <LineSegment Point="-9.5,-28.5"/>
            <LineSegment Point="-9.5,228.5"/>
            <LineSegment Point="-31.5,228.5"/>
          </PathFigure>
        </PathGeometry>
      </Canvas.Clip>
    <Path Width="300.488" Height="194.519" Canvas.Left="-0.594986" Canvas.Top="5.19727" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF23FF00" Data="F1 M 0.405014,137.11L 30.6097,137.11L 42.6763,76.7877L 53.0284,146.736L 59.0672,127.484L 67.733,137.11L 153.962,137.11L 181.568,6.19727L 203.997,198.717L 223.839,65.2365L 241.092,151.87L 248.857,137.11L 298.893,137.11"/>
  </Canvas>
</Canvas>