Làm thế nào để xoay một đối tượng qua lại xung quanh một điểm cụ thể?

Question

Tôi đang sử dụng Raphael JS trong một nỗ lực để xoay hình ảnh xung quanh một điểm dưới điểm trung tâm của nó. Điều này có thể giải quyết như thế nào?

Tôi đã thử cách sau nhưng không hoạt động.

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

Tôi cũng đang tìm cách quay lại vị trí ban đầu của nó. làm thế nào để tôi làm cho nó theo dõi con đường của nó trở lại?

Answer 1

1. để xoay xung quanh các điểm nhất định, bạn có thể sử dụng xPos và yPos bạn đã được xác định, và sửa đổi chúng để tham khảo một điểm dưới trung tâm bằng cách tăng giá trị Y.
2. để theo dõi đường dẫn của nó trở lại, bạn có thể sử dụng thông số callback để gọi một cuộc gọi hoạt ảnh bổ sung sẽ đặt lại hình dạng về vị trí ban đầu của nó.

dưới đây là cách để làm cho nó làm việc:

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

tôi cũng đã thiết lập một working example on jsFiddle để chứng minh như thế nào nó được thực hiện.