2016-10-26 55 views
0

我需要一些幫助,我試圖用Snap svg在一個函數中設置兩條路徑的動畫。使用Snap Svg在一個函數中設置兩條路徑

我試着這個,但它不工作,只是第一個動畫。

svg = document.getElementById('Capa_1_plato'); 
s = Snap(svg); 
var path = Snap.select('#ondas'); 
var path2 = Snap.select('#ondasAceite'); 
animatePath(); 
function animatePath(){ 
    path.animate({ d: "M520.5 132.6c4.4 1.5 11.3 3.3 19.9 3.1 7.7-.1 11.3-3.5 19.4-3.6 6.6-.1 12 1.6 15.4 3"}, 2000, mina.linear, resetPath); 
    path2.animate({ d: "M219.6 153.2c.5-.2 1.5-.6 2.3-.6 1.4 0 2 .2 2.8.6.9.4 2 .9 4 .8 2 0 3.1-.5 4-1 .8-.3 1.4-.6 2.8-.6s2 .2 2.8.6c.9.4 2 .9 4 .8s3.1-.5 4-1c.8-.3 1.4-.6 2.8-.6.9 0 1.4.1 1.9.3.1 0 .7.2.8 0 1.1-2 .5-2.8.5-2.8-.8-.3-1.7-.5-3-.5-2 0-3.1.5-4 1-.8.3-1.4.6-2.8.6s-2-.2-2.8-.6c-.9-.4-2-.9-4-.8-2 0-3.1.5-4 1-.8.3-1.4.6-2.8.6s-2-.2-2.8-.6c-.9-.4-2-.9-4-.8-1.3 0-2.5.4-3.2.7-.8 1.6.7 2.9.7 2.9z"}, 2000, mina.linear, resetPath); 
} 
function resetPath(){ 
    path.animate({ d: "M519.5 135.3c4.4-1.5 11.3-3.3 19.9-3.1 7.7.1 11.3 3.5 19.4 3.6 6.6.1 12-1.6 15.4-3" }, 2000, mina.linear, animatePath); 
    path2.animate({ d: "M219.6 150.4c.5.2 1.5.6 2.3.6 1.4 0 2-.2 2.8-.6.9-.4 2-.9 4-.9s3.1.5 4 .9c.8.3 1.4.6 2.8.6s2-.2 2.8-.6c.9-.4 2-.9 4-.9s3.1.5 4 .9c.8.3 1.4.6 2.8.6.9 0 1.4-.1 1.9-.3.1 0 .7-.2.8 0 1.2 2 .5 2.8.5 2.8-.8.3-1.7.5-3 .5-2 0-3.1-.5-4-.9-.8-.3-1.4-.6-2.8-.6s-2 .2-2.8.6c-.9.4-2 .9-4 .9s-3.1-.5-4-.9c-.8-.3-1.4-.6-2.8-.6s-2 .2-2.8.6c-.9.4-2 .9-4 .9-1.3 0-2.5-.4-3.2-.7-.8-1.7.7-2.9.7-2.9z"}, 2000, mina.linear, resetPath); 
} 

和HTML是:

<svg id="Capa_1_plato" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 1374"> 
<path id="ondas" stroke="#fff" stroke-width="4" d="M519.5 135.3c4.4-1.5 11.3-3.3 19.9-3.1 7.7.1 11.3 3.5 19.4 3.6 6.6.1 12-1.6 15.4-3"/> 
<path id="#ondasAceite" class="st2" d="M219.6 150.4c.5.2 1.5.6 2.3.6 1.4 0 2-.2 2.8-.6.9-.4 2-.9 4-.9s3.1.5 4 .9c.8.3 1.4.6 2.8.6s2-.2 2.8-.6c.9-.4 2-.9 4-.9s3.1.5 4 .9c.8.3 1.4.6 2.8.6.9 0 1.4-.1 1.9-.3.1 0 .7-.2.8 0 1.2 2 .5 2.8.5 2.8-.8.3-1.7.5-3 .5-2 0-3.1-.5-4-.9-.8-.3-1.4-.6-2.8-.6s-2 .2-2.8.6c-.9.4-2 .9-4 .9s-3.1-.5-4-.9c-.8-.3-1.4-.6-2.8-.6s-2 .2-2.8.6c-.9.4-2 .9-4 .9-1.3 0-2.5-.4-3.2-.7-.8-1.7.7-2.9.7-2.9z"/> 
</svg> 

回答

0

你有一個錯字,我認爲您的帳號。你有

<path id="#ondasAceite" ... 

改變,要

<path id="ondasAceite" ... 
+0

OMG什麼頭,太感謝你了! – Serralvaro