Javascript 使用应用的自由变换设置图像动画？

我在我的web应用程序中使用raphael js和raphael free transform。问题是当我设置图像动画时，只有图像在设置动画，而不是自由变换bbox。我希望免费的trnsform bbox在我启动动画时可以随图像一起移动。怎么做

我的代码：

<b>Click on rectangle</b>
 <div  id="editor"></div>

小提琴：

---

找到了做这件事的方法..它工作得很好

---

ft.attrs.rotate=ft.attrs.rotate+90

不确定如果将freetransform元素放入一个集合并设置动画，会发生什么？或者每次在动画期间删除/读取freetransform？我知道不太理想，只是想尝试其他方法，freetransform在您发布的小提琴中不起作用，所以很难正确地看到问题并进行实验，所以您可能需要更新它。@Ian。。小提琴起作用了。只需单击矩形即可开始动画。这有一个问题。它只旋转一次。我想循环旋转。

var paper = Raphael("editor", 635,500),
        canvas= document.getElementById('editor').style.backgroundColor='gray';
r = paper.rect(80,40,200,80,5).click(function () {
r.animate({transform:"r-10,0,0"}, 1000); 
});

r.attr({
         fill:'red',
    });
 ft= paper.freeTransform(r,{draw:['bbox'],
            rotate: true,keepRatio:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides'],
            scale:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ]});