javascript - 如何使用 Raphael.js 让旋转动画在每次单击鼠标时触发？

Question

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

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

所以我想我忽略了一些代码..或者动画可能会在应用动画后坐标变化后中断？无论如何，我很难过......

这是 JSFiddle demo .

代码如下:

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); 
});

Answer 1

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

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

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

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