1
下の例では、SVGルート図の端に丸を描いています。私は停止して問題なく再起動できます。しかし、私はむしろ、開始位置に戻すのではなく、最後の位置で再開（再開）します。Snap.svg：アニメーションを一時停止/再開する方法は？
これはスナップで可能ですか？
<!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>
まあ、それは簡単だった:)私は、検索、そして最終的にドキュメントでそれを見つけました。はい、そのような素晴らしい機能は、より実質的に対処する必要があります。ありがとう、もう一度、イアン。 –