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，我需要这个ecg会出现，然后在从div中消失时淡出。就像我上面发布的视频youtube链接一样。

我创造了小提琴手：

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插件中创建ANALOG ECG监控动画

1 个答案: