在jquery或jquery插件中创建ANALOG ECG监控动画

Question

我想创建心电图动画，就像在下面的视频中一样。

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

下面是我当前的代码：为支持IE

<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，我需要这个心电图上来了，然后淡出，而从股利消失。就像我上面发布的视频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/