是路径动画可能与SVG.js

有SVG路径动画的例子很多，无论是本地是路径动画可能与SVG.js

与Raphael.js

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

这怎么可能与svg.js library？

来源

2013-05-09 Stan Bondi

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

UPDATE：

现在这是可能的SVG.js开箱即用的，如果你使用paths with equal commands但不同的值。

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

来源

2013-05-09 12:20:12 wout

谢谢Wout，我会试着弄清楚如何做到这一点。你对从哪里开始有任何建议吗？例如，在问题的第一个链接中使用SMIL 标签是否可以接受？我计划能够使用svg.import.js导入复杂路径的动画。 – 2013-05-10 14:05:13

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

如果有一些剪辑-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函数用于逐步增加剪辑宽度。

来源

2013-05-10 11:49:59 SivaRajini

谢谢@Siva Rajini我会研究这样做，但使用'.during'调用步骤，详见我的答案。我不确定它会在我的情况下工作，因为我想动画复杂的路径和“扭曲” – 2013-05-10 14:07:23

有动画一个符合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的插件。问题的第一个链接中使用了哪些内容。

来源

2013-05-10 13:59:51

SMIL的问题是，您无法半途停止动画。你可以，但形状将会跳回到初始状态。例如，假设有60％的路径数据没有办法。如果你在混合中引入用户交互，这使得它非常无用。所以为了实现这个，路径分析器是必需的。我真的很想写一篇，但时间不在我手上。 – wout 2013-05-30 18:34:54

另一种选择是我们使用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-01 15:41:47 lmerino

您可以用动画的svg.path.js插件路径。

查看第一个示例（使用.drawAnimated方法）。

来源

2014-11-07 22:51:30

是路径动画可能与SVG.js

回答

相关问题