无法同时为2个对象设置动画

时间:2015-09-15 09:55:34

标签: javascript html html5 svg line

所以我终于设法让我的物体移动并正确旋转。

现在我想同时移动和旋转2条线。但是,当创建新行时,较早的行将停止工作。尽管运动和旋转不再起作用,但物体仍然存在,值等仍然是正确的。

当检索有关lineObject的信息时,我会为它们获取唯一的信息。 移动和旋转功能都被正确调用和循环。

在创建新属性时,set属性似乎会被破坏。

这里出了什么问题?

this.lineObject.setAttribute(parameters);似乎无能为力。

http://codepen.io/anon/pen/WQrXPo

2 个答案:

答案 0 :(得分:2)

问题在于如何在Draw功能中创建线标签。 当您使用innerHTML时,它基本上重新创建容器的整个内容。这意味着当你绘制第二行时,你的第一行会变成孤儿,并且会创建一个新元素。

相反,你应该使用appendChild。见http://www.w3schools.com/jsref/met_node_appendchild.asp

另外,在创建线元素时,请查看add a new line in svg, bug cannot see the line 否则你的线将不可见。

答案 1 :(得分:1)

js中的低级动画非常不舒服,如果不使用任何库,则需要多行代码。 也许CSS3可以帮到你?请参阅此tutorial

我为你写了一个例子。见plnkr