Как вращать объект назад и вперед вокруг определенной точки?

Я использую 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);

Я также ищу способ повернуть его обратно в исходное положение. как мне заставить его проследить его путь назад?

1 ответ

  • чтобы вращаться вокруг указанных точек, вы можете использовать xPos и yPos, которые вы уже определили, и изменить их для ссылки на точку ниже центра, увеличив значение Y.
  • чтобы проследить его путь назад, вы можете использовать параметр callback для вызова дополнительного вызова анимации, который будет reset фигурой в исходное положение.

вот как это сделать:

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, чтобы продемонстрировать, как это делается.

licensed under cc by-sa 3.0 with attribution.