Snap.svg動畫運行多次以不同的值結束

我有一個圓圈。我想創建一個函數，將它從1縮放到0.8，然後回到1.我目前的工作方式是，但是當我連續多次調用它時，動畫會發生衝突，並且圓圈會以不同的方式結束（小）規模。Snap.svg動畫運行多次以不同的值結束

在做所有這些縮放的東西時，我希望圓圈保持在它的位置。另外，我希望縮放能夠在圓的中心使用錨點完成。目前情況如此。

由於上述原因，我得到的圓的當前變換：

var trans = elem.attr("transform");

重置其規模：

trans.totalMatrix.scale(1);

，並將其應用：

elem.attr({transform: trans});

然後，我animate()達到所需的比例（在這種情況下爲0.8），如下所示：

transform: "s" + scale + "," + scale + trans

和完成時，我animate()回原來的帶刻度1變換：

transform: trans

動畫運行幾次後，圈內有一個小規模的結束。 爲什麼？

編輯：

延遲動畫之間比所述動畫本身的長度小有意。我的問題是如何使動畫工作儘管那。

來源

2017-10-17 Hristiyan Dodov

我改變了反彈和setInterval這樣的功能，它運作良好。該setInterval的時間必須大於500毫秒（我用550ms），並在animate函數的回調，你不應該再次使用規模（0.8），則必須將其恢復到默認的規模，這是1：

var bounce = function (elem, scale, duration) { 
    var trans = elem.attr("transform"); 
    trans.totalMatrix.scale(1); 

    elem.attr({ 
     transform: trans 
    }); 

    elem.animate({ 
     transform: "s" + scale + "," + scale + trans 
    }, duration * 0.33, mina.easeout, function() { 
     elem.animate({ 
      transform: "s" + 1 + "," + 1 + trans // I changed the scale to 1 
     }, duration * 0.67, mina.easein); 
    }); 
}; 

var count = 0; 
setInterval(function() { 
    if (++count > 10) return; 
    bounce(circ, .8, 500); 
}, 550); // I canged this to 550

來源

2017-10-17 11:19:20 Ashkan

您的主要問題是您的setInterval()中的值太短。在完成之前您正在重新開始動畫。

如果不嘗試合併兩個變換，還可以簡化所有操作。將translate()移動到父組，並且事情會變得更簡潔。

var snapelem = Snap("svg"); 
 
circ = snapelem.select("#mycirc"); 
 

 
var bounce = function (elem, scale, duration) { 
 

 
    elem.animate({ 
 
     transform: "s" + scale + "," + scale 
 
    }, duration * 0.33, mina.easeout, function() { 
 
     elem.animate({ 
 
      transform: "s1,1" 
 
     }, duration * 0.67, mina.easein); 
 
    }); 
 
}; 
 

 
var count = 0; 
 
setInterval(function() { 
 
    if (++count > 10) return; 
 
    bounce(circ, 0.8, 500); 
 
}, 500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script> 
 

 
<svg height="300px" width="500px"> 
 
    <g transform="translate(40 40)"> 
 
    <circle id="mycirc" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    </g> 
 
</svg>

來源

2017-10-17 11:29:55

我知道我正在重新啓動動畫完成之前。我在問，儘管如此，我還能如何運作。無論什麼時候播放，我都希望它總是以'1'的比例結束。 –

如果你拿我的代碼，並將'setInterval'的值改回200，你會看到它的比例爲1。 –

嗯，沒有注意到。然而，我現場使用的SVG不能被修改，所以我必須在''上進行變換_must_，這樣我才能使它以這種方式工作，並且最終以'1'結尾？ I.E.我如何在保留初始轉換的同時使其工作？ –

你需要存儲的初始轉換，否則與同一個對象上的多個動畫，他們會感到困惑，（他們將反正）。所以首先，你需要確保動畫不重疊。我從其他評論中看到，這是一個示例的一部分，所以暫時擱置一邊，但要確保在實時代碼中不會發生這種情況:)。

所以，你可以存儲轉換

var trans = circ.attr("transform");

然後將它傳遞到FUNC

bounce(circ, 0.8, 500, trans);

而在FUNC，使用...

var bounce = function (elem, scale, duration, trans) { 
....

jsfiddle

來源

2017-10-18 14:47:01 Ian

Snap.svg動畫運行多次以不同的值結束

回答

相關問題