7

SVG路径动画的例子很多，都是原生的

http://jsfiddle.net/FVqDq/

和 Raphael.js

http://jsfiddle.net/d7d3Z/1/

p.animate({path:"M140 100 L190 60"}, 2000, function() {
    r.animate({path:"M190 60 L 210 90"}, 2000);
});

svg.js 库怎么可能做到这一点？

4

5 回答 5

5

不，这对于svg.js来说是不可能的。我一直在研究它，这将是一个相当大的实现。当我试图保持库很小时，它永远不会成为库本身的一部分，但我可能会编写一个插件。虽然目前我没有太多时间在我手上所以所有的帮助将不胜感激。

更新：

如果您使用具有相同命令但值不同的路径，现在可以使用 SVG.js 开箱即用。

但是我们也有一个用于 SVG.js 的路径变形插件，这可能是您正在寻找的东西。

于 2013-05-09T12:20:12.277 回答
3

使用 svg.js 为线条制作动画有一种快速而肮脏的方法：http: //jsfiddle.net/c4FSF/1/

draw
    .line(0, 0, 0, 0)
    .stroke({color: '#000', width: 2})
    .animate(1000, SVG.easing.bounce) // Using svg.easing.js plugin(not required)
    .during(function(t, morph) {
        this.attr({x2:morph(0, 100), y2: morph(0, 100)})
    })

如 wout 所说，动画复杂的 SVG 路径将需要一个插件。不幸的是，我（还）对 SVG 了解不够，但我正在考虑编写一个使用SMIL动画标签的插件。这是问题的第一个链接中使用的内容。

于 2013-05-10T13:59:51.263 回答
1

我们可以通过找到路径的边界框和这样做来制作路径动画。

如果您的路径有一些裁剪 -rectangle 意味着如下所示

<g id="container_svg_SeriesGroup_0" transform="translate(128.8,435)" clip-path="url(#container_svg_SeriesGroup_0_ClipRect)"><path id="container_svg_John_0" fill="none" stroke-dasharray="5,5" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M 0 -17.25 L 21.7 -112.12499999999999 M 21.7 -112.12499999999999 L 43.4 -51.75 M 43.4 -51.75 L 86.8 -25.875 M 86.8 -25.875 L 108.5 -155.25 "/><defs><clipPath id="container_svg_SeriesGroup_0_ClipRect"><rect id="container_svg_SeriesGroup_0_ClipRect" x="0" y="-155.25" width="118.5" height="148" fill="white" stroke-width="1" stroke="transparent" style="display: inline-block; width: 118.5px;"/></clipPath></defs></g>

var box = $("#"+ path.id")[0].getBBox();

根据框创建矩形，并将此矩形设置为路径中的剪辑路径。

然后在 jquery.animate 中逐步增加矩形的宽度。

doAnimation: function () {

//cliprect is your clipped rectangle path.

        $(clipRect).animate(
                                 { width: 1000},
                                 {
                                     duration: 2000,

                                     step: function (now, fx) {
                                         $(clipRect).attr("width", now);
                                     }
                                 });


    },

jquery.animate step 函数用于逐步增加clip-rect 的宽度。

于 2013-05-10T11:49:59.767 回答
1

您可以使用svg.path.js插件为路径设置动画。

请参阅第一个示例（使用.drawAnimated方法）。

于 2014-11-07T22:51:30.287 回答
0

我们采取的另一种选择是使用 textPath 然后使用字符。

在我们的例子中，我们使用 • 实体，但我认为如果您在 .svg、.woff 等文件中创建自己的排版，您可以拥有任何类型的平面形状。

所以你会在这里使用你的角色：

http://jsfiddle.net/wbx8J/3/

   /* create canvas */
    var draw = SVG('canvas').size(400,400).viewbox(0, 0, 1000, 1000)

    /* create text */
    var text = draw.text(function(add) {
      add.tspan('•').dy(27)
    })
    text.font({ size: 80, family: 'Verdana' })

    /* add path to text */
    text.path('M 100 400 C 200 300 300 200 400 300 C 500 400 600 500 700 400 C 800 300 900 300 900 300')

    /* visualise track */
    draw.use(text.track).attr({ fill: 'none'/*, 'stroke-width': 1, stroke: '#f09'*/ })

    /* move text to the end of the path */
    function up() {
        text.textPath.animate(3000).attr('startOffset', '100%').after(down)
    }

    /* move text to the beginning of the path */
    function down() {
        text.textPath.animate(3000).attr('startOffset', '0%').after(up)  
    }

    /* start animation */
    up()
于 2014-04-01T15:41:47.750 回答