javascript - Snap.svg: How to pause/resume animation? -
i have example below runs circle around edge of svg root drawing. can stop , restart no problem. however, rather restart(resume) @ last position, rather resetting start position.
is possible 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 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 @ 0 transy=trans //---0 360 } else if(trans<=360*2) { transx=trans-360 //0 360 transy=360 //---y remains @ 360 } else if(trans<=360*3) { transx=360 //---x remains @ 360--- transy=360+(720 - trans)//---360 0 } else if(trans<=360*4) { transx=360+(360*3 - trans)///---360 0 transy=0//---y remains @ 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>
yes, can use animation.pause() , animation.resume() instead of animation.stop() (i think lot clearer in docs).
note, think in versions of snap (maybe pre 0.4 there bug pause/resume didn't work if there 1 animation happening).
<!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 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 @ 0 transy=trans //---0 360 } else if(trans<=360*2) { transx=trans-360 //0 360 transy=360 //---y remains @ 360 } else if(trans<=360*3) { transx=360 //---x remains @ 360--- transy=360+(720 - trans)//---360 0 } else if(trans<=360*4) { transx=360+(360*3 - trans)///---360 0 transy=0//---y remains @ 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>
Comments
Post a Comment