Форум Сайтостроение Веб-строительство

Анимация контура в SVG и возникновение непонятной задержки между path?

RT
На сайте с 07.04.2008
Offline
56
ReifTer
659

Возникла проблема, при анимации контура в SVG файле. Использую плагин habibhadi.com/lab/svgPathAnimation/demo проверял другим, тоже самое. SVG создаю в иллюстраторе. 


<!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: me@habibhadi.com*/

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>

Первый вариант с одним path работает нормально, а второй c двумя path неправильно/ Почему-то в этом варианте, идёт задержка, между отрисовкой разных path. Один отрисует, потом непонятная пауза, и рисует второй, а должно быть без паузы, как только первый отрисовал, сразу должен второй рисоваться. Причем, если убрать группировку объектов в иллюстраторе, рисует без задержек.

Кто-нибудь сталкивался с такой проблемой?

Студия «Дз» (http://dddzzz.ru/) — создание сайтов, графический дизайн

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий