Question

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

enter image description here

但是，我不确定采取什么方法。我考虑过的方法（但不知道从哪里开始）是：

将整条线准备好作为路径，然后用不透明的矩形覆盖它，其中有一个窗口，这样你就可以看到穿过它的线。
准备好路径并沿着它绘制线条，一次一点地移动它。

请注意，这是一种效果，而不是实际的数据绑定示波器（我期望它会更难）。

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坐标。

您可以重复使用数据以产生重复效果或生成新值并从左侧移入这些值。

这样您就不会生成超出需要的对象。

在WPF / xaml中动画心跳/示波器效果的合理方法

3 个答案: