Разумный подход к анимированному эффекту сердцебиения / осциллографа в WPF / xaml

Question

Я хотел бы иметь анимированный эффект сердцебиения / осциллографа для моего приложения, подобный следующему:

Я не уверен, какой подход выбрать, хотя,Подходы, которые я рассмотрел (но не знаю, с чего начать):

• Подготовить всю линию в виде пути, но затем покрыть ее непрозрачным прямоугольником с окном втак, чтобы вы могли видеть линию через него.
• Подготовив путь, и рисуя линию вдоль него, перемещая его немного вдоль за раз.

Обратите внимание, что этоэффект, а не фактический осциллограф с привязкой к данным (что, я ожидаю, будет гораздо сложнее).

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>

Answer 2

Используя этот учебник, вы можете использовать функции для построения графика ЭКГ для winforms ... http://www.codeproject.com/KB/miscctrl/GraphPlotting.aspx

Используйте то же самое для любого элемента управления графиком WPF ... бесплатный доступен в наборе инструментов WPF... http://dynamicdatadisplay.codeplex.com/

Answer 3

Создайте путь, содержащий много сегментов, либо линейных сегментов, либо сегмента Безье.Используйте столько сегментов, сколько охват.Затем переместите или анимируйте координату y начальной и конечной точек сегмента.

Вы можете повторно использовать данные, чтобы получить повторяющийся эффект, или сгенерировать новые значения и сместить их слева.

Таким образом, вы не генерируете больше объектов, чем вам нужно.