所以我一直在研究这个问题,但我遇到了另一个障碍。
本质上,我试图让鼠标单击触发一组使用 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);
});
最佳答案
我认为您看到的问题是,当您第一次运行动画时,它会将您的设置旋转所需的度数——然后当随后触发相同的动画时,它什么也不做,因为该设置已经旋转到那个 Angular 。
我会通过附加到转换而不是绝对设置来解决这个问题:
group.animate({transform: group.attr("transform") + "...R45,"+group_x_center+","+group_y_center}, 1000);
或者,您可以跟踪当前 Angular ,在每次点击时增加它,然后可变地设置它——但这可能需要更多工作 =)
关于javascript - 如何使用 Raphael.js 让旋转动画在每次单击鼠标时触发?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10559568/