Snap.svg：如何暫停/恢復動畫？

我有一個下面的例子，圍繞SVG根繪圖的邊緣運行一個圓。我可以停止並重新啓動它，而不會出現問題。但是，我寧願重新啓動（恢復）它的最後位置，而不是將其重新設置回開始位置。Snap.svg：如何暫停/恢復動畫？

這是可能與Snap？

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <title>Snap Pause/Resume Animation</title> 
 
<script type="text/javascript" src="http://svgDiscovery.com/_SNP/snap.svg-min.js"></script> 
 
</head> 
 

 
<body onLoad=runAnim()> 
 
How to pause/resume animation? 
 
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'> 
 
<svg id="mySVG" width="400" height="400"> 
 
</svg> 
 
</div> 
 
<button id=pauseResumeButton onClick=pauseResumeButtonClicked() >pause</button> 
 
<script> 
 
var SNPsvg = Snap("#mySVG"); 
 

 
var stretchLine=SNPsvg.line(200,200,20,20).attr({id:'stretchLine',stroke:'black',strokeWidth:4}) 
 

 
//---center circle--- 
 
var circleCenter=SNPsvg.circle(200,200,10).attr({fill:'red',stroke:'black',strokeWidth:2}) 
 
var lineCenter1=SNPsvg.line(190,200,210,200).attr({stroke:'lime',strokeWidth:2}) 
 
var lineCenter2=SNPsvg.line(200,190,200,210).attr({stroke:'yellow',strokeWidth:2}) 
 
var centerG=SNPsvg.g(circleCenter,lineCenter1,lineCenter2).attr({id:'centerG'}) 
 

 
//---moving circle--- 
 
var circleMoving=SNPsvg.circle(20,20,22).attr({fill:'red',stroke:'blue',strokeWidth:4}) 
 
var lineMoving1=SNPsvg.line(0,20,40,20).attr({stroke:'lime',strokeWidth:4}) 
 
var lineMoving2=SNPsvg.line(20,0,20,40).attr({stroke:'yellow',strokeWidth:4}) 
 
var myElementG=SNPsvg.g(circleMoving,lineMoving1,lineMoving2).attr({id:'myElementG'}) 
 

 
//--onload/continuous------ 
 
var myAnim 
 
function runAnim() 
 
{ 
 
\t \t var rangeAngle=360*8 //----change angle 8 revolutions-- 
 
\t \t var rangeDist=360*4//--total linear distance 
 
\t \t var rangeScale=.8//--total linear distance 
 

 
\t \t var duration=3000 //---ms, 3 seconds--- 
 

 
     var angle,trans,scale,transX,transY; 
 

 
     myAnim=Snap.animate(0, 1, 
 
\t \t function(delta) //---setter--- 
 
\t \t \t { 
 

 
       angle= delta*rangeAngle 
 
       trans= delta*rangeDist 
 
       scale=1-delta*rangeScale 
 

 
\t \t \t \t if(trans<=360) 
 
\t \t \t \t { 
 
\t \t \t \t \t transX= 0 //---x remains at 0 
 
\t \t \t \t \t transY=trans //---0 to 360 
 
\t \t \t \t } 
 
\t \t \t \t else if(trans<=360*2) 
 
\t \t \t \t { 
 
\t \t \t \t \t transX=trans-360 //0 to 360 
 
\t \t \t \t \t transY=360 //---y remains at 360 
 
\t \t \t \t } 
 
\t \t \t \t else if(trans<=360*3) 
 
\t \t \t \t { 
 
\t \t \t \t \t transX=360 //---x remains at 360--- 
 
\t \t \t \t \t transY=360+(720 - trans)//---360 to 0 
 
\t \t \t \t } 
 
\t \t \t \t else if(trans<=360*4) 
 
\t \t \t \t { 
 
\t \t \t \t \t transX=360+(360*3 - trans)///---360 to 0 
 
\t \t \t \t \t transY=0//---y remains at 0--- 
 
\t \t \t \t } 
 
\t \t \t \t myElementG.transform("t("+transX+","+transY+") r("+angle+",20,20)") 
 

 
\t \t \t \t var bb=myElementG.getBBox() 
 

 
\t \t \t \t stretchLine.attr({x2:bb.cx,y2:bb.cy}) 
 

 
\t \t \t \t centerG.transform("r("+(-angle/8)+",200,200)") 
 
\t \t \t }, 
 
      duration, 
 
      mina.linear,//---easing--- 
 
      function() //---callback (continue...)--- 
 
      { 
 
       runAnim() 
 
    \t \t } 
 
\t ) 
 
} 
 
function pauseResumeButtonClicked() 
 
{ 
 
    if(pauseResumeButton.innerHTML=="pause") 
 
    { 
 
     myAnim.stop() 
 
     pauseResumeButton.innerHTML="resume" 
 
    } 
 
    else 
 
    { 
 
     runAnim() 
 
     pauseResumeButton.innerHTML="pause" 
 
    } 
 
} 
 
</script> 
 

 

 
</body> 
 

 
</html>

來源

2017-04-14 Francis Hemsher

是的，你可以使用animation.pause（）和animation.resume（）而不是animation.stop（）（我認爲這可能會在文檔是一個更加清晰）。

請注意，我認爲在Snap的早期版本中（也許在0.4之前，有時會出現一個錯誤，如果只有一個動畫發生，暫停/恢復不起作用）。

jsfiddle

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <title>Snap Pause/Resume Animation</title> 
 
<script type="text/javascript" src="http://svgDiscovery.com/_SNP/snap.svg-min.js"></script> 
 
</head> 
 

 
<body onLoad=runAnim()> 
 
How to pause/resume animation? 
 
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'> 
 
<svg id="mySVG" width="400" height="400"> 
 
</svg> 
 
</div> 
 
<button id=pauseResumeButton onClick=pauseResumeButtonClicked() >pause</button> 
 
<script> 
 
var SNPsvg = Snap("#mySVG"); 
 

 
var stretchLine=SNPsvg.line(200,200,20,20).attr({id:'stretchLine',stroke:'black',strokeWidth:4}) 
 

 
//---center circle--- 
 
var circleCenter=SNPsvg.circle(200,200,10).attr({fill:'red',stroke:'black',strokeWidth:2}) 
 
var lineCenter1=SNPsvg.line(190,200,210,200).attr({stroke:'lime',strokeWidth:2}) 
 
var lineCenter2=SNPsvg.line(200,190,200,210).attr({stroke:'yellow',strokeWidth:2}) 
 
var centerG=SNPsvg.g(circleCenter,lineCenter1,lineCenter2).attr({id:'centerG'}) 
 

 
//---moving circle--- 
 
var circleMoving=SNPsvg.circle(20,20,22).attr({fill:'red',stroke:'blue',strokeWidth:4}) 
 
var lineMoving1=SNPsvg.line(0,20,40,20).attr({stroke:'lime',strokeWidth:4}) 
 
var lineMoving2=SNPsvg.line(20,0,20,40).attr({stroke:'yellow',strokeWidth:4}) 
 
var myElementG=SNPsvg.g(circleMoving,lineMoving1,lineMoving2).attr({id:'myElementG'}) 
 

 
//--onload/continuous------ 
 
var myAnim 
 
function runAnim() 
 
{ 
 
\t \t var rangeAngle=360*8 //----change angle 8 revolutions-- 
 
\t \t var rangeDist=360*4//--total linear distance 
 
\t \t var rangeScale=.8//--total linear distance 
 

 
\t \t var duration=3000 //---ms, 3 seconds--- 
 

 
     var angle,trans,scale,transX,transY; 
 

 
     myAnim=Snap.animate(0, 1, 
 
\t \t function(delta) //---setter--- 
 
\t \t \t { 
 

 
       angle= delta*rangeAngle 
 
       trans= delta*rangeDist 
 
       scale=1-delta*rangeScale 
 

 
\t \t \t \t if(trans<=360) 
 
\t \t \t \t { 
 
\t \t \t \t \t transX= 0 //---x remains at 0 
 
\t \t \t \t \t transY=trans //---0 to 360 
 
\t \t \t \t } 
 
\t \t \t \t else if(trans<=360*2) 
 
\t \t \t \t { 
 
\t \t \t \t \t transX=trans-360 //0 to 360 
 
\t \t \t \t \t transY=360 //---y remains at 360 
 
\t \t \t \t } 
 
\t \t \t \t else if(trans<=360*3) 
 
\t \t \t \t { 
 
\t \t \t \t \t transX=360 //---x remains at 360--- 
 
\t \t \t \t \t transY=360+(720 - trans)//---360 to 0 
 
\t \t \t \t } 
 
\t \t \t \t else if(trans<=360*4) 
 
\t \t \t \t { 
 
\t \t \t \t \t transX=360+(360*3 - trans)///---360 to 0 
 
\t \t \t \t \t transY=0//---y remains at 0--- 
 
\t \t \t \t } 
 
\t \t \t \t myElementG.transform("t("+transX+","+transY+") r("+angle+",20,20)") 
 

 
\t \t \t \t var bb=myElementG.getBBox() 
 

 
\t \t \t \t stretchLine.attr({x2:bb.cx,y2:bb.cy}) 
 

 
\t \t \t \t centerG.transform("r("+(-angle/8)+",200,200)") 
 
\t \t \t }, 
 
      duration, 
 
      mina.linear,//---easing--- 
 
      function() //---callback (continue...)--- 
 
      { 
 
       runAnim() 
 
    \t \t } 
 
\t ) 
 
} 
 
function pauseResumeButtonClicked() 
 
{ 
 
    if(pauseResumeButton.innerHTML=="pause") 
 
    { 
 
     myAnim.pause() 
 
     pauseResumeButton.innerHTML="resume" 
 
    } 
 
    else 
 
    { 
 
     myAnim.resume() 
 
     pauseResumeButton.innerHTML="pause" 
 
    } 
 
} 
 
</script> 
 

 

 
</body> 
 

 
</html>

來源

2017-04-14 17:15:31 Ian

嗯，這很容易:)我搜索，終於發現它在文檔。是的，這樣一個不錯的功能應該得到更充分的解決。再次感謝伊恩。 –

Snap.svg：如何暫停/恢復動畫？

回答

相關問題