Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/456.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Snap.svg:如何暂停/恢复动画?_Javascript_Svg_Snap.svg - Fatal编程技术网

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

Javascript Snap.svg:如何暂停/恢复动画?,javascript,svg,snap.svg,Javascript,Svg,Snap.svg,下面有一个例子,它围绕SVG根图形的边缘运行一个圆圈。我可以停止并重新启动它,没有问题。但是,我宁愿在最后一个位置重新启动(恢复)它,而不是将其重置回起始位置 使用Snap可以实现这一点吗 捕捉暂停/恢复动画 如何暂停/恢复动画? 暂停 var SNPsvg=Snap(“mySVG”); var stretchLine=SNPsvg.line(200200,20,20).attr({id:'stretchLine',stroke:'black',strokeWidth:4}) //---中心

下面有一个例子,它围绕SVG根图形的边缘运行一个圆圈。我可以停止并重新启动它,没有问题。但是,我宁愿在最后一个位置重新启动(恢复)它,而不是将其重置回起始位置

使用Snap可以实现这一点吗


捕捉暂停/恢复动画
如何暂停/恢复动画?
暂停
var SNPsvg=Snap(“mySVG”);
var stretchLine=SNPsvg.line(200200,20,20).attr({id:'stretchLine',stroke:'black',strokeWidth:4})
//---中心圆---
var circleCenter=SNPsvg.circle(200200,10).attr({fill:'red',stroke:'black',strokeWidth:2})
var lineCenter1=SNPsvg.line(190200210200).attr({笔划:'lime',笔划宽度:2})
var lineCenter2=SNPsvg.line(200190200210).attr({笔划:'yellow',笔划宽度:2})
var centerG=SNPsvg.g(circleCenter、lineCenter1、lineCenter2).attr({id:'centerG'})
//---移动圆---
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({笔划:'yellow',笔划宽度:4})
var myElementG=SNPsvg.g(circleMoving、lineMoving1、lineMoving2).attr({id:'myElementG'})
//--空载/连续------
米亚姆变种
函数runAnim()
{
变量范围角=360*8/----改变角度8转--
var rangeDist=360*4/--总线性距离
var rangeScale=.8/--总线性距离
var持续时间=3000/--ms,3秒---
可变角度、横坐标、刻度、横坐标、横坐标;
myAnim=Snap.animate(0,1,
函数(增量)/--setter---
{
角度=增量*范围角
trans=增量*范围距离
比例=1-增量*范围比例

如果(trans是,您可以只使用animation.pause()和animation.resume()而不是animation.stop()(我认为这在文档中会更清楚)

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


捕捉暂停/恢复动画
如何暂停/恢复动画?
暂停
var SNPsvg=Snap(“mySVG”);
var stretchLine=SNPsvg.line(200200,20,20).attr({id:'stretchLine',stroke:'black',strokeWidth:4})
//---中心圆---
var circleCenter=SNPsvg.circle(200200,10).attr({fill:'red',stroke:'black',strokeWidth:2})
var lineCenter1=SNPsvg.line(190200210200).attr({笔划:'lime',笔划宽度:2})
var lineCenter2=SNPsvg.line(200190200210).attr({笔划:'yellow',笔划宽度:2})
var centerG=SNPsvg.g(circleCenter、lineCenter1、lineCenter2).attr({id:'centerG'})
//---移动圆---
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({笔划:'yellow',笔划宽度:4})
var myElementG=SNPsvg.g(circleMoving、lineMoving1、lineMoving2).attr({id:'myElementG'})
//--空载/连续------
米亚姆变种
函数runAnim()
{
变量范围角=360*8/----改变角度8转--
var rangeDist=360*4/--总线性距离
var rangeScale=.8/--总线性距离
var持续时间=3000/--ms,3秒---
可变角度、横坐标、刻度、横坐标、横坐标;
myAnim=Snap.animate(0,1,
函数(增量)/--setter---
{
角度=增量*范围角
trans=增量*范围距离
比例=1-增量*范围比例
如果(transWell,这很简单:)我搜索了一下,最后在文档中找到了它。是的,这样一个好的功能应该得到更实质性的解决。再次感谢你,Ian。