Javascript 更新Raphael.js中的位置

基本上，我有这样一个场景，是用：

这个问题有点复杂

因此，我的计划是让用户在气球飞起来、场景改变时，剪断其中一根绳子，创建动画并打开各种新内容。。。。 我不知道是否应该向您粘贴我的完整代码，我将在此处尝试一下：

window.onload=函数{ //拉斐尔 var r=RaphaelScene，100%，100%， discattr={ 填充：fff， 中风：无 }; //可变位置 var-x=0； var verschiebungY=0； //höhe auf welcher die ballons hängen var ballonHohe=500； //迪恩格尔 nagel1=新阵列225735； nagel2=新阵列500735； nagel3=新阵列775735； //风偏 var windOffset=10； //这是一个很好的例子 var bg=r.imageimg/bg.jpg，0，-800+verschiebungY，100%，200%； bg.attr{ 剪辑矩形：0,0,100%，100% }; var-brett=r.imageimg/holz.png，0，700+verschiebungY，100%，20%； 布雷特·阿特尔{ 剪辑矩形：0,0,100%，100% }; r、 text310，20，欢迎来到LuckyCrew.attr{ 填充：fff， 字号：16 }; var-foo=0； //巴洛诺布特酒店 拉斐尔·fn·鲍尔=函数x，y，r，色调{ 色调=色调| | 0； 把这个还给我 这是ellipsex，y，r，r*1.15.attr{ 填充：r.5、.9hsb+色调+、1、.75hsb+色调+、.5、.25、， 中风：无 }, this.ellipsex，y，r-r/5，r-r/20*1.15.attr{ 中风：无， 填充物：r.5、.1ccc ccc、， 不透明度：0 } ; }; //赛洛布特酒店 函数curvex，y，ax，ay，bx，by，zx，zy，color{ 变量路径=[ [M，x，y]， [C，ax，ay，bx，by，zx，zy] ], 路径2=[ [M，x，y]， [L，ax，ay]， [M，bx，by]， [L，zx，zy] ], 曲线=r.pathpath.attr{ 笔画：颜色| | Raphael.getColor， 笔画宽度：4， 笔划线头：圆形 }; } //塞勒河 var firstCurve=曲线 nagel1[0]+风偏移量*2+verschiebungX，ballonHohe+verschiebungY，nagel1[0]+风偏移量*1.5+verschiebungX，ballonHohe+100+verschiebungY，nagel1[0]+风偏移量+verschiebungX，650+verschiebungY， nagel1[0]+verschiebungX，nagel1[1]+verschiebungY， hsb0,0,0； var secondCurve=曲线 nagel2[0]+风偏*2+风偏+风偏+风偏，nagel2[0]+风偏*1.5+风偏，风偏+风偏+100+风偏，nagel2[0]+风偏+风偏+风偏，650+风偏， nagel2[0]+verschiebungX，nagel2[1]+verschiebungY， hsb0,0,0； var thirdCurve=曲线 nagel3[0]+风偏移量*2+verschiebungX，ballonHohe+verschiebungY，nagel3[0]+风偏移量*1.5+verschiebungX，ballonHohe+100+verschiebungY，nagel3[0]+风偏移量+verschiebungX，650+verschiebungY， nagel3[0]+verschiebungX，nagel3[1]+verschiebungY， hsb0,0,0； //迪贝勒 r、 ballnagel1[0]+windOffset*2+verschiebungX，ballonHohe-115+verschiebungY，100，Math.random； r、 ballnagel2[0]+windOffset*2+verschiebungX，ballonHohe-115+verschiebungY，100，Math.random； r、 ballnagel3[0]+windOffset*2+verschiebungX，ballonHohe-115+verschiebungY，100，Math.random； //这是一个很好的例子 var nagel1=r.imageimg/nagel.png，nagel1[0]-25，nagel1[1]-10+verschiebungY，50,50； nagel1.attr{ 剪辑矩形：0,0,100%，100% }; var nagel2=r.imageimg/nagel.png，nagel2[0]-25，nagel2[1]-10+verschiebungY，50,50； nagel2.attr{ 剪辑矩形：0,0,100%，100% }; var nagel3=r.imageimg/nagel.png，nagel3[0]-25，nagel3[1]-10+verschiebungY，50,50； nagel3.attr{ 剪辑矩形：0,0,100%，100% }; var测试=r.ellipse50,50,40,20； r、 50，40，20，数学随机；

---

}; 这里有一个想法。我认为解决方案部分取决于你希望这场运动看起来如何。SVG和Raphael将在您更改任何属性或动画/变换时立即更新，因此通常您不必担心屏幕更新。如果需要更复杂的运动/动画，可能需要使用更复杂的代码和计时

我将这两个元素放入另一个集合，并对它们应用动画变换。有一个“放松”功能，我已经包括尝试和减缓动画结束时，所以它看起来有点平滑

对代码的关键更改是

var ball = r.ball(100 + (windOffset * 2), 
 (250 - 115), 100, Math.random()); //the height of rope top - radius

var set = r.set(ball, firstCurve);

set.animate({ 'transform':  "t" + windOffset +",-100" }, 2000, "<>", function() {
    set.animate({ "transform" : "t0,-200" }, 2000, "<>" )} );

正在中间工作

动画使用一个变换字符串，例如T100200，将元素移动100200或坐标系，如果你还不知道的话，我会快速读取变换，只是为了让它们有点意义

---

我已经组合了两个动画，只是作为一个例子来展示如果你想在两个方向之后应用它们，如何组合它们。这里还有一个指向动画文档的链接，如果有帮助的话

也许我可以使用windOffset之类的工具-=

---

5.作用要回拨到第一行但仍不起作用，您不需要“重新加载”场景，您可能只需更新对象的属性（可能会更改x、y或变换/平移），并将其与requestanimationframe或setinterval一起使用。当您更改属性时，Raphael/svg应该会在屏幕上自动更新。我可以创建一个半径为0 px的圆，并使用它来设置其他对象的位置。但是在这里我遇到了这个问题：test.attrcx没有返回正确的值。我尝试了以下方法：var firstCurve=curve nagel1[0]+test.attrcx*2+[…]我可以尝试用一个重新认证的方法来翻译它，但它只是没有传递值。你能在JSFIDLE上放一个小例子来突出这个问题吗？已经在页面顶部添加了一个JSFIDLE。当我可以通过更改var的值来操纵气球时，我还可以操纵孔场景。我只是不知道该怎么做，我已经在谷歌上搜索并阅读了文件。请求帮助或解释，泰-幸运谢谢，伙计。通过你的例子，我可以移动物体。现在我还需要知道两件事：首先，我得到了var balloon的边界框，我想用它来移动绳子，只移动气球，这是行不通的。这是JSFIDLE。。。我的第二个想法是做一些类似var set=r.setball1，firstCurve.x*2，firstCurve.y*1.5的事情；这也不行。更清楚地说，我不想让绳子在屏幕上移动，而是让它跟随气球。。。。谢谢。顺便说一句，我会支持你的评论，但它说我需要15级或其他东西不太确定你的意思，因为示例移动了绳子和气球，听起来像你想要的，你的意思是你希望绳子的底部是静态的，但附加气球的顶部会随之移动还是其他什么？我也不太清楚为什么你需要一个任何atm的边界框。对不起，如果我说得不清楚，是的，我希望底部是静态的。我不需要边界框，这是真的，但我想这是在这一点上得到气球x坐标的最快方法。让曲线的点单独动画怎么样？不是全部。好吧，我想我误解了你想要实现的目标。我猜您可能需要使用一些手动计时和重新定位功能，不幸的是，正如您所提到的，可能需要使用边界框，因此我所建议的动画可能不适合使用。如果直线是直的，可能会更简单，因为你可以将直线的一端调整为气球或其他物体的中心。