Javascript - 动画管或线来写入文本

Question

是否可以使用一些效果来制作矢量线动画以写入文本/绘制图像？

这是我正在寻找的示例；

我会怎样

1. 从直线过渡到直线？

2. 从一种形状过渡到另一种形状？

3. 它是否从侧面进入并跟踪图像(如视频游戏“贪吃蛇”或“创周期”)？

用纯粹的编程术语来说，我认为这意味着移动一个点并留下一条轨迹。

最好是矢量而不是 Canvas 。

Answer 1

矢量图形(IMO)的最佳 JS 库是 http://raphaeljs.com/

以下示例向您展示如何为形状设置动画 http://raphaeljs.com/animation.html

像下面这样的东西将从正方形动画到三 Angular 形

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