javascript - 如何使用 Raphael 库通过鼠标单击或鼠标拖动在 Javascript 中执行动画？

Question

我想要的是能够使用鼠标单击或拖动到所需位置来发出这种运动的信号

var drawingArea = Raphael(10,10,400,400);
var circle = drawingArea.circle(200,200,15);
circle.attr({fill:'blue', stroke:'red'});
var animation = Raphael.animation({cx:30, cy:30}, 5000);
circle.animate(animation);

Answer 1

您可以使用事件处理程序：

circle.click(function() {
    circle.animate(animation);
});

Answer 2

如果要在鼠标拖动后将其拖动到所需位置，则需要操纵其坐标（而不是使用动画）。drag()函数允许您为开始拖动、结束拖动和拖动时移动的事件设置回调。

这样做的一种技术是在开始时存储原始位置并在移动时更新它：

var start = function () {
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
};
var move = function (dx, dy) {
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
};
circle.drag(move, start);

您可以在 Raphael.js 网站上看到使用此代码的示例代码。