Javascript - テキストを書くためにチューブやワイヤーをアニメ化する

Question

テキスト/描画イメージを書き込むために、いくつかのエフェクトを使ってベクターラインをアニメートすることはできますか？

ここに私が探しているものの例があります。

どのように私はそれまで直線からの移行

1. でしょうか？

2. ある形状から別の形状への移行？

3. ビデオゲーム「ヘビ」や「トロンサイクル」のように、側面から泳いで画像をトレースしましたか？

純粋なプログラミング用語では、これは、ポイントを移動してトレイルを残すことを意味すると仮定します。

これはベクトルでキャンバスではありません。

Answer 1

ベクトルgrapics（IMO）のための最高のJSライブラリは、次の例http://raphaeljs.com/

では、次のような何かが三角形

に広場からアニメーションしまう形に http://raphaeljs.com/animation.html

をアニメーション化する方法を示しています

var path1 = "M170,220l40,0 0,40 -40,0z", 
    path2 = "M290,220l20,40 -40,0z"; 
r.path("M170.5,220.5l40,0 0,40 -40,0z").attr(dashed); 
r.path(path2).attr(dashed); 
var el = r.path(path1).attr({fill: "none", stroke: "#fff", "stroke-width": 2}), 
    elattrs = [{path: path2}, {path: path1}], 
    now = 1; 
r.arrow(240, 240).node.onclick = function() { 
    el.stop().animate(elattrs[+(now = !now)], 1000); 
};