路径动画可以用SVG.js实现吗?

Is path animation possible with SVG.js

本文关键字：js 实现 SVG 动画 路径      更新时间：2023-09-26

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

http://jsfiddle.net/FVqDq/

与拉斐尔.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库是如何实现的?

不，这在svg.js中还不可能。我一直在研究它，这将是一个相当大的实施。由于我尽量保持库小，它永远不会成为库本身的一部分，但我可能会写一个插件。虽然目前我没有太多的时间，所以所有的帮助将不胜感激。

更新:

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

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

有一种快速而肮脏的方法来使用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路径将需要一个插件。不幸的是，我(还)不了解SVG，但我正在考虑编写一个插件，将使用SMIL动画标签。这是在问题的第一个链接中使用的

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

如果你的路径有一些剪切-矩形的意思就像

下面
<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();

在矩形的基础上创建一个矩形，并在path中设置这个矩形作为你的clip-path。

然后在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。动画步进函数用于逐步增加剪贴矩形的宽度。

你可以使用svg.path.js插件动画路径。

参见第一个示例(使用.drawAnimated方法)。

我们采用的另一种方法是先使用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()
相关文章：