CODEWITHSUNDEEP
javascriptsvgsnap.svg
Francis Hemsher
Francis Hemsher

Reputation: 3498

Snap.svg: How to pause/resume animation?

I have an example below that runs a circle around the edge of the SVG root drawing. I can stop and restart it with no problem. However, I would rather restart(resume) it at its last position, rather than resetting it back the start position.

Is this possible with 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>

Upvotes: 3

Views: 1436

Answers (1)

Ian
Ian

Reputation: 13852

Yes, you can just use animation.pause() and animation.resume() instead of animation.stop() (I think this could be a lot clearer in the docs).

Note, I think in early versions of Snap (maybe pre 0.4 there was sometimes a bug where pause/resume didn't work if there was only one animation happening).

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>

Upvotes: 2

Related Questions