javascript - Javascript - チューブやワイヤーを動かしてテキストを書く

Question

テキストを書いたり画像を描いたりするために、ベクター線をいくつかの効果でアニメーション化することは可能ですか?

これが私が探しているものの例です。

どのように私は

1. 直線からそれに移行？

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

3. 横から入ってきて、イメージをなぞっていますか (ビデオ ゲームの「スネーク」や「トロン サイクル」のように)?

純粋なプログラミング用語で言えば、これはポイントを移動して軌跡を残すことを意味すると思います。

できれば、これはキャンバスではなくベクトルにすることをお勧めします。

Answer 1

ベクター グラフィックス (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);
};