如何用动漫js制作可绘制线条的svg答案

【问题标题】：how to make line-drawable svg with anime js如何用动漫js制作可绘制线条的svg
【发布时间】：2020-06-29 14:12:15
【问题描述】：

我已经将我的多边形转换为路径，我认为它有问题。请看一下

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
      });

【问题讨论】：

标签： javascript svg adobe-illustrator anime.js

【解决方案1】：

Path 应该具有所有预定义的动画所需的属性和样式。

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>

【讨论】：