Path animation in SVG - why the incomprehensible delay between path?

R

reifter2015-05-04 22:46:12

JavaScript

reifter, 2015-05-04 22:46:12

There was a problem when animating a path in an SVG file. I use the plugin habibhadi.com/lab/svgPathAnimation/demo checked by others, the same thing. I create SVG in illustrator.

Example:</i>

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

/*https://github.com/im4aLL/svgPathAnimation @author: [email protected]*/
function SvgAnimation(a){this.svg=$(a.elem),this.increaseBy=void 0!==a.increaseBy?a.increaseBy:5,this.timeout=void 0!==a.timeout?a.timeout:1,this.reverse=void 0!==a.reverse?a.reverse:!1,this.currentPath=1,this.totalPath=0,this.init()}SvgAnimation.prototype.animate=function(a){"function"==typeof a?this.runAnimation(a):this.runAnimation()},SvgAnimation.prototype.init=function(){var a=this.reverse;this.svg.find("path").each(function(b,c){var e=$(c),f=c.getTotalLength();e.attr("stroke-dasharray",f+" "+f).attr("stroke-dashoffset",a===!0?-f:f)})},SvgAnimation.prototype.runAnimation=function(a){this.totalPath=this.svg.find("path").length;var b={currentPath:this.currentPath,totalPath:this.totalPath,pathElem:this.svg.find("path:eq("+(this.currentPath-1)+")")};this.pathAnimation(a,b)},SvgAnimation.prototype.pathAnimation=function(a,b){var c=this,d=b.pathElem,e=parseFloat(d.attr("stroke-dashoffset")),f=this.increaseBy,g=setInterval(function(){if(c.reverse===!0&&e>=0||c.reverse===!1&&0>=e){if(clearInterval(g),"function"==typeof a&&a.call(this,{obj:d,current:b.currentPath,total:c.totalPath}),b.currentPath++,b.currentPath<=c.totalPath){var h={currentPath:b.currentPath,pathElem:c.svg.find("path:eq("+(b.currentPath-1)+")")};c.pathAnimation(a,h)}}else c.reverse===!0?(e+=f,d.attr("stroke-dashoffset",e>=0?0:e)):(e-=f,d.attr("stroke-dashoffset",0>=e?0:e))},this.timeout)};	


</script>
</head>

<body>

  <div style="width:150px;float:left;margin-right:150px;">
    <svg version="1.1" id="svg-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve" class="svg replaced-svg">
      <path fill="none" stroke="#2B2523" stroke-width="12" stroke-miterlimit="10" d="M104.3,370.3c-6.3,30.3-29.5,277-29.5,277  c-3.6,42.9,40.7,46.4,48.7,14.6l23.7-122.5c1.3-10.6,8.1-13.7,15.4-13.7c9.9,0.2,14.1,3.3,16.2,13.6l24.3,122.5  c7.9,31.8,52.5,28.3,48.8-14.6c0,0-24.8-244.7-30-275.3L104.3,370.3z M215.5,284.6V331v46.4V284.6z M107.9,375.6c0,0,0-26,0-39.1  s0-40.4,0-40.4V375.6z M103,377.3h119.2H103z M104.3,370.3C64.9,374,49.8,471.5,49.8,471.5c2.3,8.4,6.3,42.4-21,40.4  C3.1,510.1,7,473.1,20,460.6c-1.2-57.8,30.3-123.7,46.4-139.4c7.9-7.8,17.5-14.4,27.8-19.2c6-2.8,12.4-5,18.7-6.5  c3.8-1.3,8.6-2,13.7-2.5l1.7-0.2c0.2,0,1,0,1.2,0c8.6-0.7,59.6-7,61.6-7c39.1-1,73-15.2,84.9-41.2c2.3-22.5,2.3-51,1.5-67.9  c-9.6-3.6-15.6-18-15.7-29.8c-0.2-20.4,5.1-38.1,20.7-38.1c27.6,0,30.5,41.7,24.7,66.1c9.1,23,15.2,79.6,12.2,104.3  c-17.2,45.4-59.6,66.9-97.2,92.5L104.3,370.3z M160.7,288.7c32.9,0,59.8-32.1,59.8-67.2s-26.7-60.1-59.8-60.1  c-32.9,0-59.8,24.8-59.8,60.1C101.1,256.7,127.8,288.7,160.7,288.7z"/>
      <path fill="none" stroke="#2B2523" stroke-width="12" stroke-miterlimit="10" d="M551.6,429.9H438 M561.3,453.3l17.2,32.9l17.2,32.9  h-100h-100l19.4-34.6l19.4-34.6 M479.6,519.7v138.1c0,31.6-41.6,31.6-41.6,0c0,1.5,0-46.8,0-138.1 M511.5,519.7  c0,91.2,0,139.5,0,138.1c0,31.6,41.6,31.6,41.6,0V519.7 M436.9,176.5c0-34.6,23.8-59.3,53.5-59.3c29.5,0,53.5,24.5,53.5,59.3  c0,34.6-23.8,66.2-53.5,66.2C460.9,242.7,436.9,211.1,436.9,176.5z M448.3,429.9c-2.5-46.2-10.3-86.1-10.3-97.8c0,9.9,0,89.2,0,99.2  c0,41.9-42,36.3-42,6.5c0-119,12.2-142.9,20.9-152.8c17.4-19.9,62.6-24.8,71.3-25.2h4c8.8,0.2,64.4,5.3,81.8,25.2  c8.8,9.9,20.9,34.4,20.9,153.5c0,29.8-41.9,31.5-41.9-10.4c0-9.9,0-86.1,0-96c0,10.1-7.8,50.5-10.3,97.8L448.3,429.9z M525.1,265.2  c0,18.7-15.2,33.9-33.9,33.9c-18.7,0-33.9-15.2-33.9-33.9H525.1z"/>
    </svg>
  </div>

  <div style="width:150px;float:left;">
    <svg version="1.1" id="svg-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve" class="svg replaced-svg">
      <path fill="none" stroke="#2B2523" stroke-width="12" stroke-miterlimit="10" d="M104.3,370.3c-6.3,30.3-29.5,277-29.5,277c-3.6,42.9,40.7,46.4,48.7,14.6l23.7-122.5c1.3-10.6,8.1-13.7,15.4-13.7c9.9,0.2,14.1,3.3,16.2,13.6l24.3,122.5c7.9,31.8,52.5,28.3,48.8-14.6c0,0-24.8-244.7-30-275.3L104.3,370.3z M215.5,284.6V331v46.4V284.6z M107.9,375.6c0,0,0-26,0-39.1s0-40.4,0-40.4V375.6z M103,377.3h119.2H103z M104.3,370.3C64.9,374,49.8,471.5,49.8,471.5c2.3,8.4,6.3,42.4-21,40.4C3.1,510.1,7,473.1,20,460.6c-1.2-57.8,30.3-123.7,46.4-139.4c7.9-7.8,17.5-14.4,27.8-19.2c6-2.8,12.4-5,18.7-6.5c3.8-1.3,8.6-2,13.7-2.5l1.7-0.2c0.2,0,1,0,1.2,0c8.6-0.7,59.6-7,61.6-7c39.1-1,73-15.2,84.9-41.2c2.3-22.5,2.3-51,1.5-67.9c-9.6-3.6-15.6-18-15.7-29.8c-0.2-20.4,5.1-38.1,20.7-38.1c27.6,0,30.5,41.7,24.7,66.1c9.1,23,15.2,79.6,12.2,104.3c-17.2,45.4-59.6,66.9-97.2,92.5L104.3,370.3z M160.7,288.7c32.9,0,59.8-32.1,59.8-67.2s-26.7-60.1-59.8-60.1c-32.9,0-59.8,24.8-59.8,60.1C101.1,256.7,127.8,288.7,160.7,288.7z M551.6,429.9H438 M561.3,453.3l17.2,32.9l17.2,32.9h-100h-100l19.4-34.6l19.4-34.6 M479.6,519.7v138.1c0,31.6-41.6,31.6-41.6,0c0,1.5,0-46.8,0-138.1 M511.5,519.7c0,91.2,0,139.5,0,138.1c0,31.6,41.6,31.6,41.6,0V519.7 M436.9,176.5c0-34.6,23.8-59.3,53.5-59.3c29.5,0,53.5,24.5,53.5,59.3c0,34.6-23.8,66.2-53.5,66.2C460.9,242.7,436.9,211.1,436.9,176.5z M448.3,429.9c-2.5-46.2-10.3-86.1-10.3-97.8c0,9.9,0,89.2,0,99.2c0,41.9-42,36.3-42,6.5c0-119,12.2-142.9,20.9-152.8c17.4-19.9,62.6-24.8,71.3-25.2h4c8.8,0.2,64.4,5.3,81.8,25.2c8.8,9.9,20.9,34.4,20.9,153.5c0,29.8-41.9,31.5-41.9-10.4c0-9.9,0-86.1,0-96c0,10.1-7.8,50.5-10.3,97.8L448.3,429.9z M525.1,265.2c0,18.7-15.2,33.9-33.9,33.9c-18.7,0-33.9-15.2-33.9-33.9H525.1z"/>
    </svg>	
  </div>
  

<script type="text/javascript">


(function( $ ){

    var example_one = new SvgAnimation({ "elem" : "#svg-1", "increaseBy" : 5, "timeout" : 0 });
    example_one.animate();
    
    var example_one2 = new SvgAnimation({ "elem" : "#svg-2", "increaseBy" : 5, "timeout" : 0 });
    example_one2.animate();

})( jQuery );

</script>	
  
</body>
</html>

The first option with one path works fine, and the second with two paths is wrong / For some reason, in this option, there is a delay between drawing different paths. One draws, then an incomprehensible pause, and the second one draws, but it should be without a pause, as soon as the first one has drawn, the second one should immediately be drawn. Moreover, if you remove the grouping path draws without delay.

Has anyone encountered such a problem?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

rmaksim, 2015-05-05
@rmaksim

you have several lines in each path and the plugin does not correctly calculate the total length, etc. etc.
if you split your path into single lines, then everything will work, but drawing will be slower, you will need to increase increaseBy
jsfiddle.net/1pp5dgrq