在 jquery 或 jquery 插件中创建模拟心电监护动画

Question

我想像下面的视频一样制作心电图动画。

https://www.youtube.com/watch?v=Q_gzl_E7jmw

下面是我当前的代码：

    <style>
svg {
  height: 600px;
  width: 1200px;
}
path {
  stroke: #259798;
  stroke-width: 2px;
  fill: none;
  stroke-dasharray: 630, 500;
  stroke-dashoffset: 0;
  animation: pulse 4s infinite linear;
  &:nth-child(1) {
    stroke: #b7b4c2;
  }
}

@keyframes pulse {
  0% {
    stroke-dashoffset: 1130;
  }



  100% {
    stroke-dashoffset: 0;
  }
}
</style>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 600 300">
  <path d="

    M17.902,114.475h26.949c2.296,0,12.876-10.182,20.063-10.182
        c7.186,0,10.83,10.182,12.576,10.182h18.266l7.187,10.779l7.485-100.91l5.091,114.984l6.887-24.554h24.41
        c3.239,0,14.816-16.769,20.206-16.769s11.08,16.47,13.475,16.47c2.845,0,26.665,0,26.665,0l27.757,0
        c2.296,0,12.875-10.181,20.062-10.181c7.186,0,10.831,10.181,12.577,10.181h18.266l7.187,10.779l7.485-100.91l5.091,114.984
        l6.888-24.555h24.41c3.24,0,14.817-16.768,20.207-16.768s11.079,16.469,13.474,16.469c2.845,0,26.666,0,26.666
        c2.297,0,12.877-10.181,20.063-10.181s10.829,10.181,12.576,10.181h18.265l7.188,10.779l7.485-100.91l5.092,114.984l6.887-24.555
        h24.409c3.238,0,14.816-16.768,20.206-16.768s11.08,16.469,13.476,16.469c2.845,0,26.664,0,26.664,0h27.815
        c2.296,0,12.875-10.181,20.063-10.181c7.187,0,10.829,10.181,12.576,10.181h18.265l7.188,10.779l7.486-100.91l5.091,114.984
        l6.887-24.555h24.409c3.238,0,14.816-16.768,20.206-16.768s11.079,16.469,13.476,16.469c2.846,0,26.664,0,26.664,0
         "/>




</svg>

我们已经使用 velocityjs 支持 ie，我需要这个心电图出现然后淡出，同时从 div 中消失。就像我上面 post 的视频 youtube link。

我已经创建了 Fiddler：

https://jsfiddle.net/mannanbahelim/zwnc5db1/

我只想要像视频那样在行尾有淡出效果。

Answer 1

如果你有正常的背景，你可以在 CSS 中做到。你需要一些计算来找到合适的坐标，但如果它是规则的，你可以设置带有动画的蒙版，这将给你想要的效果。

首先你设置你的 svg 没有破折号动画：

path {
  stroke: #259798;
  stroke-width: 2px;
  fill: none;
}

然后添加 4 个从左到右的蒙版（您可以添加更多）。一个完全遮盖了路径，下面是一个不透明度渐变以获得你想要的淡出效果。

<div class="mask">
</div>
<div class="mask">
</div>
<div class="mask">
</div>
<div class="mask">
</div>

.mask {
  position: absolute;
  width: 352.66px;
  height: 290px;
  left: -308px;
  top: 24.34px;
  animation: mask 4s infinite linear;
}

.mask:nth-child(2n) {
  background: rgba(243, 245, 246, 1);
}

.mask:nth-child(2n + 1) {
  background: linear-gradient(to right, rgba(243, 245, 246, 1), rgba(243, 245, 246, 0));
}

需要计算每个掩码的宽度，它应该是你的路径宽度的一半。您可以使用 :

计算它

var path = document.getElementById('path');
var pathBox = path.getBoundingClientRect();

这也会告诉你动画应该从哪里开始——它应该是减去每个蒙版的宽度加上你的 svg 的左坐标。还有它应该结束的地方 - 每个面具宽度的 3 倍 + svg 的左坐标，因此行进的宽度是每个面具的 4 倍：

 console.log(
'width of each mask:', pathBox.width /  2, '\n', 
'height of each mask:', pathBox.top + pathBox.height, '\n', 
'left start of the animation:', pathBox.left - (pathBox.width /  2), '\n', 
'right end of the animation:', pathBox.left + (pathBox.width / 2 * 3)
)

这将允许定义遮罩动画：

@keyframes mask {
  0% {
    left: -308px;
  }
  100% {
    left: 1101px;
  }
}

然后为每个掩码设置延迟（这也可以在 CSS 中）：

for (var i = 0; i < masks.length; i++) {
  masks[i].style.animationDelay = i + "s";
};

您还需要为第一个遮罩运行，以便 svg 在打开时被遮罩：

#initial {
  position: absolute;
  width: 754px;
  height: 290px;
  left: 754px;
  top: 24.34px;
  background: rgba(243, 245, 246, 1);
  animation: initialMask 4s 1 linear;
  animation-delay: 0s;
}
@keyframes initialMask {
  0% {
    left: 50px;
  }
  100% {
    left: 750px;
  }
}

你得到的效果是： https://jsfiddle.net/j46kxvj5/4/

在 jquery 或 jquery 插件中创建模拟心电监护动画

Create ANALOG ECG monitoring Animation in jquery or jquery plugin

jquery

svg

jquery-plugins

svg-animate