Как сделать рисование линии SVG с аниме JS - PullRequest
Новая
       40

Как сделать рисование линии SVG с аниме JS

0 голосов
/ 23 октября 2018

Я уже конвертирую свои полигоны в путь, и я думаю, что с этим что-то не так.Пожалуйста, посмотрите

SVG: 

<svg id="Layer_1" viewBox="0 0 1040.5 560.5">
      <path d="M255.05,460.13H174.88V379.95L414.95,139.88h80.18v80.18Zm-79.93-.25h79.82L494.88,219.95V140.13H415.05L175.13,380.05Z" transform="translate(-174.75 -139.75)"/>
      <path d="M655.05,700.13H574.88V619.95l0,0,240-240h80.18v80.18l0,0Zm-79.93-.25h79.82L894.88,459.95V380.13H815.05L575.13,620.05Z" transform="translate(-174.75 -139.75)"/>
      <path d="M815.05,700.13H734.88V619.95l0,0,240-240h80.18v80.18l0,0Zm-79.93-.25h79.82l239.93-239.93V380.13H975.05L735.13,620.05Z" transform="translate(-174.75 -139.75)"/>
      <path d="M975.05,700.13H894.88V619.95l0,0,240-240h80.18v80.18l0,0Zm-79.93-.25h79.82l239.93-239.93V380.13h-79.82L895.13,620.05Z" transform="translate(-174.75 -139.75)"/>
      <path d="M335.05,700.13H254.88V619.95l0,0,240-240h80.18v80.18l0,0Zm-79.93-.25h79.82L574.88,459.95V380.13H495.05L255.13,620.05Z" transform="translate(-174.75 -139.75)"/>
      <path d="M335.05,540.13H254.88V459.95l0,0,160-160h80.18v80.18Zm-79.93-.25h79.82L494.88,379.95V300.13H415.05L255.13,460.05Z" transform="translate(-174.75 -139.75)"/>
      <path d="M655.05,540.13H574.88V459.95l0,0,80-80h80.18v80.18l0,0Zm-79.93-.25h79.82l79.93-79.93V380.13H655.05l-79.93,79.93Z" transform="translate(-174.75 -139.75)"/>
    </svg>

Аниме JS: 

anime({
        targets: '#Layer_1 path',
        strokeDashoffset: [anime.setDashoffset, 0],
        easing: 'easeInOutSine',
        duration: 1500,
        delay: function(el, i) { return i * 250 },
        direction: 'alternate',
        loop: true
      });

1 Ответ

0 голосов
/ 23 октября 2018

Путь должен иметь все необходимые атрибуты и стили, предопределенные для работы анимации. 

var morphing = anime({
        targets: '#Layer_1 path',
        strokeDashoffset: [anime.setDashoffset, 0],
        easing: 'easeInOutSine',
        duration: 1500,
        delay: function(el, i) { return i * 250 },
        direction: 'alternate',
        loop: true
      });
<div ><svg id="Layer_1" viewBox="0 0 1040.5 560.5">
       <g fill="none" stroke="red" stroke-width="1" >
        <path d="M255.05,460.13H174.88V379.95L414.95,139.88h80.18v80.18Zm-79.93-.25h79.82L494.88,219.95V140.13H415.05L175.13,380.05Z" stroke-dasharray="16.85528564453125" style="stroke-dashoffset: 16.402px;" transform="translate(-174.75 -139.75)"/>
		<path d="M655.05,700.13H574.88V619.95l0,0,240-240h80.18v80.18l0,0Zm-79.93-.25h79.82L894.88,459.95V380.13H815.05L575.13,620.05Z" transform="translate(-174.75 -139.75)" stroke-dasharray="16.85528564453125" style="stroke-dashoffset: 16.402px;"/>
      <path d="M815.05,700.13H734.88V619.95l0,0,240-240h80.18v80.18l0,0Zm-79.93-.25h79.82l239.93-239.93V380.13H975.05L735.13,620.05Z" transform="translate(-174.75 -139.75)" stroke-dasharray="16.85528564453125" style="stroke-dashoffset: 16.402px;"/>
      <path d="M975.05,700.13H894.88V619.95l0,0,240-240h80.18v80.18l0,0Zm-79.93-.25h79.82l239.93-239.93V380.13h-79.82L895.13,620.05Z" transform="translate(-174.75 -139.75)" stroke-dasharray="16.85528564453125" style="stroke-dashoffset: 16.402px;"/>
      <path d="M335.05,700.13H254.88V619.95l0,0,240-240h80.18v80.18l0,0Zm-79.93-.25h79.82L574.88,459.95V380.13H495.05L255.13,620.05Z" transform="translate(-174.75 -139.75)" stroke-dasharray="16.85528564453125" style="stroke-dashoffset: 16.402px;"/>
      <path d="M335.05,540.13H254.88V459.95l0,0,160-160h80.18v80.18Zm-79.93-.25h79.82L494.88,379.95V300.13H415.05L255.13,460.05Z" transform="translate(-174.75 -139.75)" stroke-dasharray="16.85528564453125" style="stroke-dashoffset: 16.402px;"/>
      <path d="M655.05,540.13H574.88V459.95l0,0,80-80h80.18v80.18l0,0Zm-79.93-.25h79.82l79.93-79.93V380.13H655.05l-79.93,79.93Z" transform="translate(-174.75 -139.75)" stroke-dasharray="16.85528564453125" style="stroke-dashoffset: 16.402px;"/>
    </svg></div>
...