我想创建心电图动画,就像下面的视频一样。
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/
我只想在视频结尾处的淡出效果。
答案 0 :(得分:2)
如果你有常规背景,你可以在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/