WPF动画心电图信号。动画沿着路径对象动画、心电图、路径、信号

2023-09-03 03:06:53 作者：南城旧事

我要创建WPF动画类似于下面的视频。

http://www.youtube.com/watch?v=CVC7c0l9HEE

我想绘制只有1心电图复杂，视频有3我会提供整个路径（数据点）。我只是想创建一个这样的animatation。这将开始在一个点的路径，并按照分才结束与点之间的间隔相等。如果可能的话，我想有淡入动画，蛇形小道。有人点我在正确的方向？

感谢你。

编辑：一SAMPE心电图复杂的路径是这样的：

 ＆LT;风格X：关键=心跳的TargetType ={X：键入路径}＆GT;
      ＆LT; setter属性=数据值=F1中号0.499939,48.6606C 2.42746,45.1911 5.8242,38.2785 6.31174,38.4952C 8.01431,39.2519 8.79037,48.8331 10.0613,50.9936C 10.9917,52.5753 12.5007,54.7948 14.3107,54.4932C 14.79,54.4133 24.8544,43.5739 25.3094,43.7445C 25.8327,43.9408 27.7953,47.7509 28.8089,47.2441C 30.3381,46.4795 34.1497,41.6631 34.5582,41.7448C 34.8951,41.8122 38.1494,47.8282 39.8075,47.994C 43.0506,48.3183 45.0782,44.0683 48.0565,42.7447C 51.3824,41.2665 55.0088,44.9259 58.5552,45.7443C 61.3347,46.3857 68.9706,45.4943 68.9706,45.4943L 76.1363,26.1634L 81.3024,78.6568L 88.6348,0.499934L 94.634,64.3253C 94.634,64.3253 105.251,33.0223 105.549,33.2458C 106.146,33.693 112.871,46.313 117.298 ，46.9941C 121.597,47.6555 125.611,44.3467 129.546,42.4947C 131.287,41.6756 133.221,40.1366 135.046,40.7449C 137.558,41.5823 139.66,43.731 142.295,43.9945C 148.264,44.5914 154.41,42.8179 160.292,43.9945C 162.387,44.4133 164.163,46.4216 166.292 ，46.2442C 169.979,45.9369 173.59,44.7444 177.29,44.7444C 180.217,44.7444 183.2,46.2042 186.039,45.4943/＆GT;
＆LT; /样式和GT;

解决方案

这MSDN文章中的示例似乎让动画的对象，可在你共享的路径。我替换为您指定的路径按钮的路径，它移动沿着这条线的按钮。

http://msdn.microsoft.com/en-us/library/ aa970561.aspx

至于淡入/淡出和线索，您可以通过动画的一组点做到这一点，每一个开始略晚于previous。每一个能有一个稍微透明的不透明度设置。

下面是一个XAML只样本。您可以通过驾驶它的一些code或重构一些资源位，以避免重复优化这一点。

 ＆LT;页
  的xmlns =http://schemas.microsoft.com/winfx/2006/xaml/$p$psentation
  的xmlns：X =http://schemas.microsoft.com/winfx/2006/xaml
  的xmlns：presentationOptions =http://schemas.microsoft.com/winfx/2006/xaml/$p$psentation/options
  的xmlns：MC =http://schemas.openxmlformats.org/markup-compatibility/2006
  MC：可忽略=presentationOptions保证金=20＆GT;
  ＆LT; Page.Resources＆GT;
      ＆LT;的PathGeometry X：关键=路径
        图=M 0.499939,48.6606C 2.42746,45.1911 5.8242,38.2785 6.31174,38.4952C 8.01431,39.2519 8.79037,48.8331 10.0613,50.9936C 10.9917,52.5753 12.5007,54.7948 14.3107,54.4932C 14.79,54.4133 24.8544,43.5739 25.3094,43.7445C 25.8327， 43.9408 27.7953,47.7509 28.8089,47.2441C 30.3381,46.4795 34.1497,41.6631 34.5582,41.7448C 34.8951,41.8122 38.1494,47.8282 39.8075,47.994C 43.0506,48.3183 45.0782,44.0683 48.0565,42.7447C 51.3824,41.2665 55.0088,44.9259 58.5552,45.7443C 61.3347， 46.3857 68.9706,45.4943 68.9706,45.4943L 76.1363,26.1634L 81.3024,78.6568L 88.6348,0.499934L 94.634,64.3253C 94.634,64.3253 105.251,33.0223 105.549,33.2458C 106.146,33.693 112.871,46.313 117.298,46.9941C 121.597,47.6555 125.611,44.3467 129.546,42.4947C 131.287,41.6756 133.221,40.1366 135.046,40.7449C 137.558,41.5823 139.66,43.731 142.295,43.9945C 148.264,44.5914 154.41,42.8179 160.292,43.9945C 162.387,44.4133 164.163,46.4216 166.292,46.2442C 169.979,45.9369 173.59,44.7444 177.29,44.7444C 180.217,44.7444 183.2,46.2042 186.039,45.4943
        presentationOptions：冻结=真/＆GT;



        ＆LT;情节提要X：关键=SB＆GT;
          ＆LT; MatrixAnimationUsingPath
            Storyboard.TargetProperty =（UIElement.RenderTransform）.Matrix
            的BeginTime =0：0：0
            时长=0：0：5DoesRotateWithTangent =真
            的repeatBehavior =永远的PathGeometry ={的StaticResource路径}＆GT;
          ＆LT; / MatrixAnimationUsingPath＆GT;
        ＆LT; /故事板＆GT;

        ＆LT;情节提要X：关键=SB2＆GT;
          ＆LT; MatrixAnimationUsingPath
            Storyboard.TargetProperty =（UIElement.RenderTransform）.Matrix
            的BeginTime =0：0：0.05
            时长=0：0：5DoesRotateWithTangent =真
            的repeatBehavior =永远的PathGeometry ={的StaticResource路径}＆GT;
          ＆LT; / MatrixAnimationUsingPath＆GT;
        ＆LT; /故事板＆GT;
        ＆LT;情节提要X：关键=SB3＆GT;
          ＆LT; MatrixAnimationUsingPath
            Storyboard.TargetProperty =（UIElement.RenderTransform）.Matrix
            的BeginTime =0：0：0.1
            时长=0：0：5DoesRotateWithTangent =真
            的repeatBehavior =永远的PathGeometry ={的StaticResource路径}＆GT;
          ＆LT; / MatrixAnimationUsingPath＆GT;
        ＆LT; /故事板＆GT;
        ＆LT;情节提要X：关键=SB4＆GT;
          ＆LT; MatrixAnimationUsingPath
            Storyboard.TargetProperty =（UIElement.RenderTransform）.Matrix
            的BeginTime =0：0：0.15
            时长=0：0：5DoesRotateWithTangent =真
            的repeatBehavior =永远的PathGeometry ={的StaticResource路径}＆GT;
          ＆LT; / MatrixAnimationUsingPath＆GT;
        ＆LT; /故事板＆GT;
  ＆LT; /Page.Resources>
  ＆LT;画布宽度=400高度=400＆GT;
    ＆LT;椭圆填充=黑色WIDTH =5高度=3＆GT;
      ＆LT; Ellipse.RenderTransform＆GT;
        ＆LT; MatrixTransform＆GT;
          ＆LT; MatrixTransform.Matrix＆GT;
            ＆LT;基质/＆GT;
          ＆LT; /MatrixTransform.Matrix>
        ＆LT; / MatrixTransform＆GT;
      ＆LT; /Ellipse.RenderTransform>
      ＆LT; Ellipse.Triggers＆GT;
        ＆LT; EventTrigger中RoutedEvent =FrameworkElement.Loaded＆GT;
          ＆LT; BeginStoryboard故事板={的StaticResource SB}/＆GT;
        ＆LT; / EventTrigger中＆GT;
      ＆LT; /Ellipse.Triggers>
    ＆LT; /椭圆＆GT;

    ＆LT;椭圆填充=黑不透明度=宽度=5高度=3＆GT6。
      ＆LT; Ellipse.RenderTransform＆GT;
        ＆LT; MatrixTransform＆GT;
          ＆LT; MatrixTransform.Matrix＆GT;
            ＆LT;基质/＆GT;
          ＆LT; /MatrixTransform.Matrix>
        ＆LT; / MatrixTransform＆GT;
      ＆LT; /Ellipse.RenderTransform>
      ＆LT; Ellipse.Triggers＆GT;
        ＆LT; EventTrigger中RoutedEvent =FrameworkElement.Loaded＆GT;
          ＆LT; BeginStoryboard故事板={的StaticResource SB2}/＆GT;
        ＆LT; / EventTrigger中＆GT;
      ＆LT; /Ellipse.Triggers>
    ＆LT; /椭圆＆GT;

    ＆LT;椭圆填充=黑不透明度=宽度=5高度=3＆GT4。
      ＆LT; Ellipse.RenderTransform＆GT;
        ＆LT; MatrixTransform＆GT;
          ＆LT; MatrixTransform.Matrix＆GT;
            ＆LT;基质/＆GT;
          ＆LT; /MatrixTransform.Matrix>
        ＆LT; / MatrixTransform＆GT;
      ＆LT; /Ellipse.RenderTransform>
      ＆LT; Ellipse.Triggers＆GT;
        ＆LT; EventTrigger中RoutedEvent =FrameworkElement.Loaded＆GT;
          ＆LT; BeginStoryboard故事板={的StaticResource SB3}/＆GT;
        ＆LT; / EventTrigger中＆GT;
      ＆LT; /Ellipse.Triggers>
    ＆LT; /椭圆＆GT;

    ＆LT;椭圆填充=黑不透明度=宽度=5高度=3＆GT2。
      ＆LT; Ellipse.RenderTransform＆GT;
        ＆LT; MatrixTransform＆GT;
          ＆LT; MatrixTransform.Matrix＆GT;
            ＆LT;基质/＆GT;
          ＆LT; /MatrixTransform.Matrix>
        ＆LT; / MatrixTransform＆GT;
      ＆LT; /Ellipse.RenderTransform>
      ＆LT; Ellipse.Triggers＆GT;
        ＆LT; EventTrigger中RoutedEvent =FrameworkElement.Loaded＆GT;
          ＆LT; BeginStoryboard故事板={的StaticResource SB4}/＆GT;
        ＆LT; / EventTrigger中＆GT;
      ＆LT; /Ellipse.Triggers>
    ＆LT; /椭圆＆GT;
  ＆LT; /帆布＆GT;
＆LT; /页＆GT;

I want to create WPF animation that resembles the following video.

http://www.youtube.com/watch?v=CVC7c0l9HEE

I want to plot only 1 ecg complex, the video has 3. I will have the whole path (data points) provided. I just want to create an animatation like that. It would start at one point of the Path and follow the points until the end with equal interval between points. If possible, I would like to have the fade in animation, the snake-like trail. Can someone point me out in the right direction?

Thank you.

Edit: A sampe ECG complex path looks like this:

<Style x:Key="heartbeat" TargetType="{x:Type Path}">
      <Setter Property="Data" Value="F1 M 0.499939,48.6606C 2.42746,45.1911 5.8242,38.2785 6.31174,38.4952C 8.01431,39.2519 8.79037,48.8331 10.0613,50.9936C 10.9917,52.5753 12.5007,54.7948 14.3107,54.4932C 14.79,54.4133 24.8544,43.5739 25.3094,43.7445C 25.8327,43.9408 27.7953,47.7509 28.8089,47.2441C 30.3381,46.4795 34.1497,41.6631 34.5582,41.7448C 34.8951,41.8122 38.1494,47.8282 39.8075,47.994C 43.0506,48.3183 45.0782,44.0683 48.0565,42.7447C 51.3824,41.2665 55.0088,44.9259 58.5552,45.7443C 61.3347,46.3857 68.9706,45.4943 68.9706,45.4943L 76.1363,26.1634L 81.3024,78.6568L 88.6348,0.499934L 94.634,64.3253C 94.634,64.3253 105.251,33.0223 105.549,33.2458C 106.146,33.693 112.871,46.313 117.298,46.9941C 121.597,47.6555 125.611,44.3467 129.546,42.4947C 131.287,41.6756 133.221,40.1366 135.046,40.7449C 137.558,41.5823 139.66,43.731 142.295,43.9945C 148.264,44.5914 154.41,42.8179 160.292,43.9945C 162.387,44.4133 164.163,46.4216 166.292,46.2442C 169.979,45.9369 173.59,44.7444 177.29,44.7444C 180.217,44.7444 183.2,46.2042 186.039,45.4943" />
</Style>

解决方案

The sample in this MSDN article seems to allow animating an object over the path that you shared. I replaced the path of the button with the path you specified, and it moved the button along that line.

http://msdn.microsoft.com/en-us/library/aa970561.aspx

As far as the fade in / out and a trail, you could do this by animating a set of points, each of which started slightly later than the previous. Each could have a slightly more transparent opacity setting.

Here's a xaml only sample. You could optimize this by driving some of it from code or refactoring some of the resources a bit to avoid duplication.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions" Margin="20">
  <Page.Resources>
      <PathGeometry x:Key="Path"
        Figures="M 0.499939,48.6606C 2.42746,45.1911 5.8242,38.2785 6.31174,38.4952C 8.01431,39.2519 8.79037,48.8331 10.0613,50.9936C 10.9917,52.5753 12.5007,54.7948 14.3107,54.4932C 14.79,54.4133 24.8544,43.5739 25.3094,43.7445C 25.8327,43.9408 27.7953,47.7509 28.8089,47.2441C 30.3381,46.4795 34.1497,41.6631 34.5582,41.7448C 34.8951,41.8122 38.1494,47.8282 39.8075,47.994C 43.0506,48.3183 45.0782,44.0683 48.0565,42.7447C 51.3824,41.2665 55.0088,44.9259 58.5552,45.7443C 61.3347,46.3857 68.9706,45.4943 68.9706,45.4943L 76.1363,26.1634L 81.3024,78.6568L 88.6348,0.499934L 94.634,64.3253C 94.634,64.3253 105.251,33.0223 105.549,33.2458C 106.146,33.693 112.871,46.313 117.298,46.9941C 121.597,47.6555 125.611,44.3467 129.546,42.4947C 131.287,41.6756 133.221,40.1366 135.046,40.7449C 137.558,41.5823 139.66,43.731 142.295,43.9945C 148.264,44.5914 154.41,42.8179 160.292,43.9945C 162.387,44.4133 164.163,46.4216 166.292,46.2442C 169.979,45.9369 173.59,44.7444 177.29,44.7444C 180.217,44.7444 183.2,46.2042 186.039,45.4943" 
        PresentationOptions:Freeze="True" />    



        <Storyboard x:Key="SB">
          <MatrixAnimationUsingPath
            Storyboard.TargetProperty="(UIElement.RenderTransform).Matrix"
            BeginTime="0:0:0"
            Duration="0:0:5" DoesRotateWithTangent="True"
            RepeatBehavior="Forever" PathGeometry="{StaticResource Path}" >
          </MatrixAnimationUsingPath>
        </Storyboard>        

        <Storyboard x:Key="SB2">
          <MatrixAnimationUsingPath
            Storyboard.TargetProperty="(UIElement.RenderTransform).Matrix"
            BeginTime="0:0:0.05"
            Duration="0:0:5" DoesRotateWithTangent="True"
            RepeatBehavior="Forever" PathGeometry="{StaticResource Path}" >
          </MatrixAnimationUsingPath>
        </Storyboard>      
        <Storyboard x:Key="SB3">
          <MatrixAnimationUsingPath
            Storyboard.TargetProperty="(UIElement.RenderTransform).Matrix"
            BeginTime="0:0:0.1"
            Duration="0:0:5" DoesRotateWithTangent="True"
            RepeatBehavior="Forever" PathGeometry="{StaticResource Path}" >
          </MatrixAnimationUsingPath>
        </Storyboard>      
        <Storyboard x:Key="SB4">
          <MatrixAnimationUsingPath
            Storyboard.TargetProperty="(UIElement.RenderTransform).Matrix"
            BeginTime="0:0:0.15"
            Duration="0:0:5" DoesRotateWithTangent="True"
            RepeatBehavior="Forever" PathGeometry="{StaticResource Path}" >
          </MatrixAnimationUsingPath>
        </Storyboard>  
  </Page.Resources>
  <Canvas Width="400" Height="400">
    <Ellipse Fill="Black" Width="5" Height="3" >
      <Ellipse.RenderTransform>
        <MatrixTransform>
          <MatrixTransform.Matrix >
            <Matrix />
          </MatrixTransform.Matrix>
        </MatrixTransform>
      </Ellipse.RenderTransform>
      <Ellipse.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
          <BeginStoryboard Storyboard="{StaticResource SB}" />
        </EventTrigger>
      </Ellipse.Triggers>
    </Ellipse>

    <Ellipse Fill="Black" Opacity=".6" Width="5" Height="3" >
      <Ellipse.RenderTransform>
        <MatrixTransform>
          <MatrixTransform.Matrix >
            <Matrix />
          </MatrixTransform.Matrix>
        </MatrixTransform>
      </Ellipse.RenderTransform>
      <Ellipse.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
          <BeginStoryboard Storyboard="{StaticResource SB2}" />
        </EventTrigger>
      </Ellipse.Triggers>
    </Ellipse>

    <Ellipse Fill="Black" Opacity=".4" Width="5" Height="3" >
      <Ellipse.RenderTransform>
        <MatrixTransform>
          <MatrixTransform.Matrix >
            <Matrix />
          </MatrixTransform.Matrix>
        </MatrixTransform>
      </Ellipse.RenderTransform>
      <Ellipse.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
          <BeginStoryboard Storyboard="{StaticResource SB3}" />
        </EventTrigger>
      </Ellipse.Triggers>
    </Ellipse>

    <Ellipse Fill="Black" Opacity=".2" Width="5" Height="3" >
      <Ellipse.RenderTransform>
        <MatrixTransform>
          <MatrixTransform.Matrix >
            <Matrix />
          </MatrixTransform.Matrix>
        </MatrixTransform>
      </Ellipse.RenderTransform>
      <Ellipse.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
          <BeginStoryboard Storyboard="{StaticResource SB4}" />
        </EventTrigger>
      </Ellipse.Triggers>
    </Ellipse>    
  </Canvas>
</Page>

上一篇：大型的基于文件的位图处理库位图、文件

下一篇：SAP .NET连接器3.0的项目没有显示在Visual Studio 08，10，等了等了、连接器、项目、NET

相关推荐

精彩图集

精彩推荐

图片推荐