Snap.svg：如何pause/resume动画？

Question

下面有一个示例，它围绕 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()
{
  var rangeAngle=360*8 //----change angle 8 revolutions--
  var rangeDist=360*4//--total linear distance
  var rangeScale=.8//--total linear distance

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

        var angle,trans,scale,transX,transY;

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

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

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

    var bb=myElementG.getBBox()

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

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


</body>

</html>

Answer 1

是的，您可以只使用 animation.pause() 和 animation.resume() 而不是 animation.stop()（我认为这在文档中会更清楚）。

请注意，我认为在 Snap 的早期版本中（可能是 0.4 之前的版本，有时会出现一个错误，如果只发生一个动画，pause/resume 将不起作用）。

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()
{
  var rangeAngle=360*8 //----change angle 8 revolutions--
  var rangeDist=360*4//--total linear distance
  var rangeScale=.8//--total linear distance

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

        var angle,trans,scale,transX,transY;

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

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

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

    var bb=myElementG.getBBox()

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

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


</body>

</html>

Snap.svg：如何pause/resume动画？

Snap.svg: How to pause/resume animation?

javascript

svg

snap.svg