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);
};