javascript - 动画自定义矢量形状

Question

我想对以下矢量形状进行动画处理，不幸的是，由于边缘无法将其转换为路径。 (如果有人知道如何将形状保留为路径，那就值得称赞!)

目标是拥有一个跟随形状的动画:

我正在尝试使用 SVG 动画，但似乎无法对形状进行动画处理。路径动画是可能的。我的问题是，是否可以使用 <canvas>像附加的 fiddle 中的元素并在那里设置动画？

http://jsfiddle.net/Na6X5/

Answer 1

我在 Illustrator 中重新创建了形状，所以它不是很完美，但非常接近。然后我将其保存为 SVG 路径。

这是执行我认为您想要的操作的工作代码。

SVG 形状:

<?xml version="1.0" encoding="utf-8"?>
<svg id="myshape" version="1.1" id="Layer_1" xmlns="http://www.w3.org  /2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 571.1 437.5" style="enable-background:new 0 0 571.1 437.5;" xml:space="preserve" stroke="#000" stroke-width="90" stroke-miterlimit="10">
<g>
  <path id="mypath" d="M519,300.4l-76.4,75.9c-14,13.9-36.7,13.9-50.7-0.1l-83.5-83.5c-13.2-13.2-34.6-13.3-48-0.2
    l-93.9,92.1c-11.2,11-29.4,10.4-39.9-1.4l-73.5-82.6c-11.4-12.8-10.8-32.2,1.3-44.3L255.7,55.5c14-14,36.6-14,50.7-0.1l212.5,210.7
    C528.5,275.6,528.5,291,519,300.4z" />
</g>
</svg>

JavaScript

drawTime = 2000; //2 seconds
path = document.getElementById("mypath");
length = path.getTotalLength();
path.style.strokeDashoffset = length; //starting position
path.style.strokeDasharray = length + ', ' + length;
path.style.fill = "none"; //make it have no fill to begin with
path.style.transition = path.style.WebkitTransition = 'none';
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset ' + (drawTime / 1000) + 's ease-in-out';
path.style.strokeDashoffset = '0'; //finishing position

JSFiddle(纯 JavaScript):https://jsfiddle.net/900nayr2/4/

JSFiddle(使用我编写的 jQuery 插件):https://jsfiddle.net/vL5bz5mn/1/

对于 jQuery...我大约一年前为 jQuery 1.10 或类似的东西编写了 DrawSVG 插件。我希望这有帮助!如果您愿意，可以只使用 JavaScript。