Snap.svg:如何暂停/恢复动画?

时间:2017-04-14 16:00:47

标签: javascript svg snap.svg

下面有一个示例,它围绕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>

1 个答案:

答案 0 :(得分:2)

是的,您可以使用animation.pause()和animation.resume()而不是animation.stop()(我认为这在文档中可能会更加清晰)。

注意,我认为在Snap的早期版本中(可能在0.4之前有时会出现一个错误,如果只有一个动画发生,则暂停/恢复不起作用)。

jsfiddle

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;