如何旋转对象来回围绕一个具体点吗？ [英] How to rotate an object back and forth around a specific point?

问题描述

我试图围绕一个点，这是低于其中心点旋转图像形状用圣拉斐尔JS。如何才能做到这一点？

我曾尝试以下，但它不工作。

  VAR playBBox = playButtonRef.getBBox（）;
变种XPOS = playBBox.x + playBBox.width / 2;
VAR yPos = playBBox.y;
VAR animObject = Raphael.animation（{
    变换：playButtonRef.attr（改造）+R60+（this.cx  -  25）+，+ this.cy
}，3000）;
animObject = animObject.repeat（10）;
playButtonRef.animate（animObject）;
 

我也在寻找一种方式来旋转回原来的位置。如何我使它跟踪其路径返回？

解决方案

1. 要围绕指定点旋转，你可以使用 XPOS 和 yPos 您已经定义，修改它们通过增加Y值参考下方中心的一点。


2. 要跟踪其路径返回，您可以使用回调参数来调用一个额外的动画调用，将形状恢复到原来的位置。

下面是如何使其工作：

  VAR playBBox = playButtonRef.getBBox（）;
变种XPOS = playBBox.x +（playBBox.width / 2）;
VAR yPos = playBBox.y + 25;VAR animObject = Raphael.animation（{
    变换：R60+ XPOS +，+ yPos
}，3000，函数（）{
    playButtonRef.animate（{
        变换：R0，+ XPOS +，+ yPos
    }，3000）;
}）;
playButtonRef.animate（animObject）;
 

我还设置工作的jsfiddle 的例子来证明它是如何做。

I'm using Raphael JS in an attempt to rotate an image shape around a point which is below its center point. How can this be done?

I have tried the following but it doesn't work.

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

I'm also looking for a way to rotate it back to its original position. how to I make it trace its path back?

解决方案

1. to rotate around the specified points, you may use the xPos and yPos you've already defined, and modify them to reference a point below the center by increasing the Y value.
2. to trace its path back, you can use the callback param to invoke an additional animation call which will reset the shape to its original position.

here's how to make it work:

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

i have also set up a working example on jsFiddle to demonstrate how it's done.

这篇关于如何旋转对象来回围绕一个具体点吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！