5

我正在使用 Raphael JS 试图围绕低于其中心点的点旋转图像形状。如何才能做到这一点?

我尝试了以下方法,但它不起作用。

var playBBox = playButtonRef.getBBox();
var xPos = playBBox.x + playBBox.width/2;
var yPos = playBBox.y;
var animObject = Raphael.animation({
    transform: playButtonRef.attr("transform") + "R60," + (this.cx - 25) + "," + this.cy
}, 3000);​
animObject = animObject.repeat(10); 
playButtonRef.animate(animObject);

我也在寻找一种将其旋转回其原始位置的方法。如何让它追溯它的路径?

4

1 回答 1

3
  1. 要围绕指定点旋转,您可以使用您已经定义的 和 ,并通过增加 Y 值来修改它们以参考中心下方的点xPosyPos
  2. 要追溯其路径,您可以使用callback参数调用附加动画调用,将形状重置为其原始位置。

以下是如何使它工作:

var playBBox = playButtonRef.getBBox();
var xPos = playBBox.x + (playBBox.width / 2);
var yPos = playBBox.y + 25;

var animObject = Raphael.animation({
    transform: "R60," + xPos + "," + yPos
}, 3000, function() {
    playButtonRef.animate({
        transform: "R0," + xPos + "," + yPos
    }, 3000);
});
playButtonRef.animate(animObject);

我还在jsFiddle 上建立了一个工作示例来演示它是如何完成的。

于 2012-04-21T20:22:00.103 回答