使用Raphaël.js为旋转的对象设置动画

Question

我是我目前的项目，我需要绘制机器人并移动它们。 机器人由一个圆圈和一个显示机器人当前方向的框组成。

我的问题是，当我为它们设置动画时，方向框会因为旋转而以奇怪的方式移动......

这就是我的意思：http://jsfiddle.net/zmunB/

感谢您的帮助。

Balzard。

Answer 1

请参考这个小提琴。 http://jsfiddle.net/apUvX/2/，用于改变运动。 在圆圈的“onAnimation”方法中，我们将圆的中心坐标转换为 矩形坐标系使用Matrix.x，Matrix.y并将结果分配给矩形的x，y。

Answer 2

此fiddle显示另一个选项。它可能不像rajkamal的解决方案那么优雅，但如果你不习惯使用矩阵，它可能更容易理解。您应该可以随意添加功能（注意我添加的'眼睛'）。

基本上，我只是将功能添加到集合中，并将变换应用于集合中的每个元素。单击右侧的彩色方块，启动动画。请注意，“移动相对”将使集合朝着“看起来”的方向移动。