0

.animate()属性のメソッドを使用しpath:てパスを新しい場所に渡すことで、ある場所から別の場所に移動するパスをアニメーション化する完全に細かい単純な Raphael.js コードのように見えるものに問題があります。

ただし、古いパスから新しいパスにスムーズに移行する代わりに、移行時間と同じ時間だけ一時停止してから、アニメーションの最後にまっすぐジャンプします。

私が見ることができるコードのすべては、ドキュメントと標準パターンに従っているように見えます。クラッシュはしていませんが、予期しない動作をしているため、メッセージや直接のフィードバックはありません。

アニメーションは機能しますが、中間の遷移ステップがスキップされます。どのように、なぜ？

これがコードの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 ではcustomAttribute、最初にアニメーション化する前に s に数値を設定する必要があります(たとえば、 を使用.attr()します。そうしないと、Raphael は のような数値以外の値に対して数値演算子を使用して、中間遷移の「トゥイーン」ポイントを計算しようとしますが、undefinedこれは成功しません。動作しません。

（私の場合、これを防ぐのに十分だと思われるコードがありましたが、エラーを引き起こすのに十分ではなくattr、数値として適切に設定されない原因となる欠陥がありました.Checkアニメートしたい属性に、アニメーションの直前に数値があり、それが機能していないこと)

認識されていない非数値を Raphael 属性に取得してそれをアニメーション化した場合、または Raphael に数値と非数値の間で「トゥイーン」を試行させる別の方法を見つけた場合、同じ問題が発生します。出発点。

コードの作業バージョン。作業customAttributeアニメーションはこちら。

于 2013-03-07T18:34:12.203 に答える