我正在尝试在 Raphael.js 中制作一个简单的动画,其中 paper.text 对象从其当前位置移动到另一个位置。这是我的一些代码(发布的内容太多了):
songPos = getSongPosition(this, charIndex);
letter.path.animate({x: songPos.x, y: songPos.y, "font-size": this.correctFontSize}, 500, onAnimationComplete);
这是上面代码中引用的 Letter 对象:
function Letter(args)
{
this.letter = args.letter || "A";
this.correct = args.correct || false;
this.transformation = args.transformation || "";
this.initX = args.x || 0;
this.initY = args.y || 0;
this.path = null;
}
Letter.prototype.buildPath = function()
{
this.path = paper.text(this.initX, this.initY, this.letter);
if(this.transformation)
{
this.path.transform(this.transformation);
}
return this;
};
问题是我正在打印x
和y
返回的值getSongPosition
,它们是正确的,但是 animate 方法正在将我的文本对象发送到屏幕外的某个地方。我也尝试将动画属性设置为{x: 0, y: 0}
,但我仍然得到相同的结果。如果有必要,我可以发布更多代码。
任何帮助将不胜感激。
更新 1: 我的程序的一部分要求我能够将对象移动到特定坐标。有些物体会旋转,有些则不会,所以我写了这个:
Letter.prototype.getMoveTransform = function(x, y)
{
var bbox = this.path.getBBox(true);
var dx = x - bbox.x;
var dy = y - bbox.y;
return "T" + dx + "," + dy + (this.transformation == null ? "" : this.transformation);
};
我相信这是我问题的根源。该函数应该生成将旋转对象移动到 (x, y) 所需的变换。我不确定为什么我必须在每个动画上重新旋转对象。
更新2: 我以某种方式解决了我的问题。我会发布我的解决方案,但我不明白为什么其中任何一个都有效/一开始就不再有效。