下面有一个示例，它围绕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>
答案 0 :(得分：2)
是的，您可以使用animation.pause（）和animation.resume（）而不是animation.stop（）（我认为这在文档中可能会更加清晰）。
注意，我认为在Snap的早期版本中（可能在0.4之前有时会出现一个错误，如果只有一个动画发生，则暂停/恢复不起作用）。
<!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>