1

注意：请在此处查看演示代码：http: //jsfiddle.net/ginja/5yp7D/

我有一组对象，我可以在单击蓝色方块时旋转，效果很好。集合中的每个对象都附加了一个悬停事件，该事件会导致对象以动画方式更改颜色和缩放，以在鼠标进入和离开时给人以增长和缩小的印象。但是，正如您从演示中看到的那样，缩放会导致对象重置为其原始位置，并且如果对象先前悬停在其上，也会对旋转产生有趣的影响。

我的问题是我是否可以旋转对象集并且在旋转后仍然具有对象的缩放效果而不将其重置为原始位置，我假设我在鼠标悬停时的变换不正确，如果有人可以指出我在右边方向，我将不胜感激。

编辑新小提琴链接...

4

1 回答 1

1

在对此进行进一步研究后，我想我理解了这个问题。

当您在 Raphael 中绘制路径时，它是画布上的一个设定位置，当我们执行旋转时，它是该设定位置之上的应用变换。悬停事件被触发，我们应用了缩放变换，它清除了之前的任何变换，这就是对象返回到其原始位置的原因。

我想出的解决方案是当我们执行悬停动画时，我们还需要执行任何当前应用的旋转，并且在旋转时我们需要确保缩放被重置。我还注意到，当旋转发生时，如果你将鼠标悬停在一个块上，会出现一些奇怪的动画，并且可能需要在旋转时禁用悬停。

请参阅 jsFiddle 链接http://jsfiddle.net/ginja/5yp7D/以获取更新的代码，下面我概述了我的更改...

旋转：

blocks.animate({ transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 1000);

鼠标移到：

this.animate({ fill: "#5CBFEB", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1.2" }, 200);

鼠标移出：

this.animate({ fill: "#cc0000", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 200);

我不确定这是否是正确的方法，但如果有人要添加任何内容或更好的解决方案，请发表评论或回答

于 2012-10-03T12:05:22.333 回答