Question

有很多SVG路径动画的例子，本身都是

和Raphael.js

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

svg.js library如何实现这一目标？

Answer 1

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

<强>更新

如果您使用paths with equal commands但值不同，则现在可以使用SVG.js开箱即用。

但我们也有一个path morphing plugin for SVG.js，这可能就是你要找的东西。

Answer 2

使用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)})
    })

动画复杂的SVG路径，如wout所说，需要一个插件。不幸的是，我（还）对SVG知之甚少，但我正在考虑编写一个使用SMIL animation tag的插件。这是问题的第一个链接中使用的内容。

Answer 3

我们可以通过查找路径的边界框来制作路径动画，并且这样做。

如果你的路径有一些剪切 - 矩形意味着如下

<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的宽度。

Answer 4

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

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

Answer 5

我们采用的另一个选择是使用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()

SVG.js是否可以进行路径动画

5 个答案: