Question

所以我一直在努力解决这个问题，而且我遇到了另一个障碍。

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

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

以下是代码：

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

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

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

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

或者，您可以跟踪当前角度，在每次点击时增加它，然后可变地设置它 - 但这可能是更多的工作=）

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

1 个答案: