raphael.js中心的矩形动画宽度

Question

我对Raphael.js中的.animate() Api有疑问 有一个矩形，我想为width和height设置动画。

r.animate({ width: 50, height: 50 }, 1000, "bounce");

但是我想从那个矩形的中心扩展它，而不是左上角。你们中有谁知道怎么做吗？

FIDDLE

Answer 1

有一种更好的方法可以在不计算的情况下完成此操作。如果您知道要制作对象的大小，那么您应该为缩放设置动画。

以下是 DEMO

r.click(function() { r.animate({ transform:'s2' }, 500); });

请注意，transform:'s2'表示将其缩放2倍。希望这有帮助;）

编辑如果您希望此动画能够有效地运作，请改为编写 transform:'...s2' 。

Answer 2

您可以使用x和y移动矩形并模拟它从中心生长。

r.click(function() { r.animate({ width: 100, height: 100, x: 75, y:75 }, 500); });

Here is a FIDDLE