javascript - 在raphael.js中从中心动画矩形的宽度

Question

我有一个关于Raphael.js.animate()中的Api的问题 有一个矩形，我想为and设置动画。widthheight

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

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

小提琴

Answer 1

有一种更好的方法可以在不计算的情况下做到这一点。如果您知道要使对象变大，那么您应该为缩放设置动画。

这是演示

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