javascript - raphael.jsを使用したモーフィングライン

Question

raphael.jsまたはpaper.jsを使用して、アニメーションのモーフィングで移動する矢印で線を描くことは可能ですか？

Answer 1

あなたが何をしようとしているのかは完全には明らかではありませんが、あなたの質問に対する簡単な答えはほぼ間違いなくイエスです。私はRaphaelJSについてしか話すことができませんが、Raphaelにあるパスから別のパスにモーフィングするように指示するのは簡単です。このフィドルとそのフィドルを考えてみてください。どちらも、ラファエルのanimate関数を使用して要素を時間の経過とともに変更することに依存していpathます。多くの場合、1つ以上の変換と組み合わせて使用​​します。唯一の注意点は、ラファエルの組み込みのパスモーフィングが、期待または希望する方法で常にほどけるとは限らないことです。しかし、上の図のようなものをアニメーション化するために、私は次のようなことをします。

var canvas = Raphael( 0, 0, 320, 240 );

var path1 = "M0,120 h300 l10,-10 l10,10 h100";
var path2 = "M0,120 h100 l10,-10 l10,10 h300";

var path = canvas.path( path1 ).attr( { stroke: 'black', fill: 'none', 'stroke-width': 1 } );

path.animate( { path: path2, stroke: 'red', 'stroke-width': 3 }, 3000, function()
              { path.animate( { path: path1, stroke: 'black', 'stroke-width': 1 }, 3000 ); } );

ここで実際の動作を確認できます。