Raphael .animate on path属性从一种状态跳转到另一种状态，没有过渡

Raphael .animate on path attribute jumps from one state to the other, no transition

本文关键字：状态 另一种 没有过 一种 path on animate 属性 Raphael      更新时间：2023-09-26

我有一个问题，我看起来像完美的简单拉斐尔.js代码动画路径从一个位置移动到另一个通过使用path:属性的.animate()方法，在新的位置传递路径。

但是，它并没有从旧路径平滑地过渡到新路径，而是暂停了一段与过渡时间相等的时间，然后直接跳到动画的结尾。

在代码中的一切，我可以看到似乎遵循文档和标准模式，因为它没有崩溃，但给予意外的行为，我没有消息或直接反馈的工作。

动画可以工作，但是跳过中间的转换步骤。如何,为什么?

这是一个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');

我在发布之前就发现了这个问题是由于动画使用了在动画开始之前没有正确设置的customAttribute。因为这个问题没有明确的文档，所以还是发了。

在Raphael 2.1中， customAttribute s需要在第一次动画之前设置一个数值(例如使用.attr()，否则Raphael试图通过使用非数值值(如undefined)上的数值运算符来计算中间过渡'tween'点，这将不工作。

(在我的情况下，我有代码，我认为这将足以防止这种情况，但它有一个错误，这不足以导致错误，但足以导致attr不能正确设置为一个数值。)

检查你想要动画的attr在动画之前有一个数值)

如果你设法将一个无法识别的非数字值插入到Raphael属性中，然后将其动画化，或者如果你找到另一种方法让Raphael尝试在数值和非数字起始点之间进行"补间"，你也会看到同样的问题。

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

相关文章：