0

我遇到了一个问题，在我看来非常简单的 Raphael.js 代码通过使用属性.animate()上的方法为从一个位置移动到另一个位置的路径设置动画，并在其新位置传递路径。path:

但是，它不是从旧路径平滑过渡到新路径，而是暂停一段等于过渡时间的时间，然后直接跳到动画的结尾。

我可以看到的代码中的所有内容似乎都遵循文档和标准模式，并且由于它没有崩溃而是给出了意外的行为，因此我没有任何消息或直接反馈可以使用。

动画有效，但跳过了中间过渡步骤。怎么，为什么？

这是代码的JSBIN 现场演示......

...这是示例代码。

var paper = Raphael("huh", '100%', '100%');

paper.customAttributes.pathX = function( x ) {
    var path = this.attr('path');
    var origin = getPathOrigin(path);
    return { path: Raphael.transformPath(path, ['T', x - origin.x, 0 ]) };
};
paper.customAttributes.pathY = function( y ) {
    var path = this.attr('path');
    var origin = getPathOrigin(path);
    return { path: Raphael.transformPath(path, ['T', 0, y - origin.y]) };
};
paper.customAttributes.pathXY = function( x,y ) {
    var path = this.attr('path');
    var origin = getPathOrigin(path);
    return { path: Raphael.transformPath(path, ['T', x - origin.x, y - origin.y ]) };
};

function getPathOrigin(path) {
    return {x: path[0][1], y: path[0][2]};
}

var path = paper.path('M 100 100 L 105 105 L 95 105 L 95 95 L 105 95 L 100 100');

var origin = getPathOrigin(path);

path.attr({pathX: origin.x, pathY: origin.y, pathXY: [origin.x, origin.y]});

path.animate({pathX: 200},1000, 'linear', function(){
  path.animate({pathY: 200},1000, 'elastic', function(){
    path.animate({pathXY: [50,50]}, 1000, 'bounce');
  });
});

path.animate({pathX: 200},1000, 'linear');
4

1 回答 1

0

我在发布之前发现问题是由于动画使用了customAttribute在动画开始之前没有正确设置的动画。无论如何发布，因为这个问题没有明确记录。

在 Raphael 2.1 中， s 需要在customAttribute第一次动画之前设置一个数值（例如使用.attr()，否则 Raphael 尝试通过对非数值使用数值运算符来计算中间过渡“补间”点，如undefined不工作。

（在我的情况下，我有我认为足以防止这种情况的代码，但它有一个不足以导致错误的错误，但足以导致attr无法正确设置为数值。检查你想要动画的 attr 在动画不工作之前有一个数值）

如果您设法将无法识别的非数字值放入 Raphael 属性然后对其进行动画处理，或者如果您找到另一种方法使 Raphael 尝试在数字值和非数字之间“过渡”，您将看到同样的问题初始点。

代码的工作版本，customAttribute这里有工作动画。

于 2013-03-07T18:34:12.203 回答