用raphael.js变形线

Question

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

Answer 1

目前还不完全清楚你要做什么，但对你的问题的简短回答几乎肯定是肯定的。我只能代表RaphaelJS，但很容易让拉斐尔从一条路走到另一条路。考虑this小提琴和that小提琴，两者都依赖于使用raphael的animate函数来修改path元素，通常与一个或多个变换结合使用。唯一需要注意的是，raphael的内置路径变形并不总是以您期望或渴望的方式放松。但是为了尝试像上图这样的动画，我会做这样的事情：

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

您可以在行动here中看到这一点。