1

所以我一直在研究这个问题，但又遇到了另一个障碍。

本质上，我试图让鼠标点击触发一组用 Raphael.js 绘制的 svg 对象的旋转动画。虽然我已经解决了实际的动画，但我似乎无法让它在随后的点击中运行……只运行一次就可以了。

所以我想有一些我忽略的代码......或者在应用动画之后的坐标变化之后动画可能会中断？反正我是懵逼...

这是JSFiddle 演示。

这是代码：

var rsr = Raphael('rsr', 320, 240),
    circle_01 = rsr.circle(160, 120, 20).attr({fill:"#666666"}),
    circle_02 = rsr.circle(160, 220, 20),
    circle_03 = rsr.circle(160, 20, 20),
    circle_04 = rsr.circle(20, 120, 20),
    circle_05 = rsr.circle(300, 120, 20),
    group = rsr.set();

group.push(
    circle_02, 
    circle_03, 
    circle_04, 
    circle_05
);

var aa = group.getBBox();

circle_01.click(function() {

    var group_x_center = aa.x + (aa.width / 2),
        group_y_center = aa.y + (aa.height / 2);

    group.animate({
        transform: group.attr("transform") + "R360," 
            + group_x_center + "," 
            + group_y_center
    }, 1000); 
});
4

1 回答 1

2

我认为您看到的问题是，当您第一次运行动画时，它会旋转您的集合所需的度数 - 然后当随后触发相同的动画时，它什么也不做，因为集合已经旋转到那个角度。

我会通过附加到转换而不是绝对设置来解决这个问题：

group.animate({transform: group.attr("transform") + "...R45,"+group_x_center+","+group_y_center}, 1000);

或者，您可以跟踪当前角度，在每次点击时增加它，然后进行可变设置——但这可能需要更多工作 =)

于 2012-05-11T23:59:26.400 回答