jqueryまたはjqueryプラグインでアニメーションを監視するANALOG ECGを作成します

Question

下のビデオのようにECGアニメーションを作成します。

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、私はこの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回各マスク+の幅は幅走行が4回ずつマスクであるように、あなたのSVGの座標左：

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) 
) 

これは、マスクのアニメーションを定義することができます：

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

SVGは、開口部にマスクされているように、あなたはまた、ちょうど最初の実行のためのマスクを必要とする：あなたはその後、（これは同様にCSSでもよい）、各マスクの遅延を設定

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

：

#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/