javascript - 用 raphael.js 变形线

Question

是否可以使用 raphael.js 或 paper.js 绘制一条带有箭头的线，该箭头随着动画变形而移动？

Answer 1

目前尚不完全清楚您要做什么，但您的问题的简短回答几乎肯定是肯定的。我只能代表 RaphaelJS，但很容易告诉 Raphael 从一条路径转变为另一条路径。考虑一下这个小提琴和那个小提琴，它们都依赖于使用 raphael 的animate函数来随着时间的推移修改path元素，通常与一个或多个变换结合使用。唯一需要注意的是，拉斐尔的内置路径变形并不总是以您可能期望或期望的方式展开。但是为了尝试像上图那样制作动画，我会做这样的事情：

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

您可以在这里看到这一点。