连续波像波浪线的动画

Question

你好我有一个svg是用adobe illustrator构建的波浪线，我试图给动画添加一个连续波。

我试过vivus.js，并能够得到绘制动画工作，但不是coninuously。

有没有人有关于如何启动这样的想法？我不指望有人为我解决问题，而是指向正确的方向，尽管如果有人能够快速回答，我不会反对。

任何答案都可以在其纯CSS，js或两者兼而有之。

下面是SVG

<svg id="wave" 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 456.7 39.9" style="enable-background:new 0 0 456.7 39.9;" xml:space="preserve"> 
<style type="text/css"> 
    .st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;} 
</style> 
    <path class="st69" d="M4.2,33.2c0.1-0.1,7-6.9,15.9-13.8C27.7,13.7,38.7,6,47.5,6c7.5,0,14,6.6,20.3,12.9l0.4,0.4 
    c6.8,6.9,14.6,14.6,24.6,14.6c9.9,0,17.7-7.8,24.5-14.6l0.5-0.5C124,12.5,130.5,6,137.9,6c7.5,0,13.9,6.5,20.2,12.9l0.4,0.4 
    c6.8,6.9,14.6,14.6,24.5,14.6c10,0,17.8-7.8,24.6-14.6l0.5-0.5C214.4,12.5,220.9,6,228.4,6c7.5,0,14,6.5,20.2,12.9l0.4,0.4 
    c6.8,6.9,14.5,14.6,24.5,14.6c9.9,0,17.7-7.8,24.5-14.6l0.3-0.3c6.3-6.4,12.9-13,20.5-13c7.5,0,14.1,6.6,20.4,13l0.3,0.3 
    c6.8,6.9,14.6,14.6,24.5,14.6c9.9,0,17.6-7.8,24.5-14.6l0.2-0.2C395.1,12.6,401.6,6,409.2,6c8.7,0,19.8,7.7,27.3,13.4 
    c8.9,6.8,15.9,13.7,16,13.8"/> 
</svg> 

和的jsfiddle链接

here

谢谢！

Answer 1

我希望这会帮助你。使用这些值稍微播放一下或者添加SVG波形作为背景，重复它并更改background-position。

@keyframes wave { 
 
    0% { 
 
    left: -80px; 
 
    } 
 
    100% { 
 
    left: 0; 
 
    } 
 
} 
 

 
.container { 
 
    width: 100px; 
 
    overflow: hidden; 
 
} 
 
.container svg { 
 
    position: relative; 
 
    left: -50px; 
 
    width: 200px; 
 
    animation: wave 2s linear infinite; 
 
}

<div class="container"> 
 
<svg id="wave" 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 456.7 39.9" style="enable-background:new 0 0 456.7 39.9;" xml:space="preserve"> 
 
<style type="text/css"> 
 
    .st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;} 
 
</style> 
 
    <path class="st69" d="M4.2,33.2c0.1-0.1,7-6.9,15.9-13.8C27.7,13.7,38.7,6,47.5,6c7.5,0,14,6.6,20.3,12.9l0.4,0.4 
 
\t c6.8,6.9,14.6,14.6,24.6,14.6c9.9,0,17.7-7.8,24.5-14.6l0.5-0.5C124,12.5,130.5,6,137.9,6c7.5,0,13.9,6.5,20.2,12.9l0.4,0.4 
 
\t c6.8,6.9,14.6,14.6,24.5,14.6c10,0,17.8-7.8,24.6-14.6l0.5-0.5C214.4,12.5,220.9,6,228.4,6c7.5,0,14,6.5,20.2,12.9l0.4,0.4 
 
\t c6.8,6.9,14.5,14.6,24.5,14.6c9.9,0,17.7-7.8,24.5-14.6l0.3-0.3c6.3-6.4,12.9-13,20.5-13c7.5,0,14.1,6.6,20.4,13l0.3,0.3 
 
    c6.8,6.9,14.6,14.6,24.5,14.6c9.9,0,17.6-7.8,24.5-14.6l0.2-0.2C395.1,12.6,401.6,6,409.2,6c8.7,0,19.8,7.7,27.3,13.4 
 
\t c8.9,6.8,15.9,13.7,16,13.8"/> 
 
</svg> 
 
</div>

Answer 2

除了CSS技巧，你可以使用Math.sin与间隔，应用此Bezier曲线（环&加入到属性字符串）和它的完成。

function anim(){ 
 
\t document.querySelectorAll('svg circle').forEach((c,i)=>c.setAttribute('cy',50+Math.sin(performance.now()/1000+i)*25)) 
 
} 
 
setInterval(anim,20)

<svg id="wave" 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 456 100" style="enable-background:new 0 0 456 100;" xml:space="preserve"> 
 
<style type="text/css"> 
 
    .st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;} 
 
</style> 
 
    <circle cx="50" cy="50" r="4" fill="red" /> 
 
    <circle cx="100" cy="50" r="4" fill="red" /> 
 
    <circle cx="150" cy="50" r="4" fill="red" /> 
 
    <circle cx="200" cy="50" r="4" fill="red" /> 
 
    <circle cx="250" cy="50" r="4" fill="red" /> 
 
    <circle cx="300" cy="50" r="4" fill="red" /> 
 
    <circle cx="350" cy="50" r="4" fill="red" /> 
 
    <circle cx="400" cy="50" r="4" fill="red" /> 
 
</svg>