Question

我在使用动漫库创建更多路径时遇到问题。我在abode illustrator中创建了文本并将其转换为动画绘制线的路径。我可以看到我能够创建6个字符但超过6个字符没有显示出来。我的代码是`

<div id="lineDrawing"> <svg viewBox="0 25 280 35" preserveAspectRatio="xMaxYMax meet">

  <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1" class="lines">
   <path  fill="#3c8dbc" d="M113.5,10.3h-4.4v5.5h4.9v1.7h-6.4V2.1h6.1v1.7h-4.7v4.9h4.4V10.3z" stroke-dasharray="316.85528564453125" style="stroke-dashoffset: 0px;"></path>
    <path fill="#3c8dbc" d="M125.4,10.8c-0.1-2.1-0.2-4.7-0.2-6.6h-0.1c-0.4,1.8-0.9,3.7-1.4,5.8l-2,7.5h-1.1l-1.8-7.3
    c-0.5-2.2-1-4.1-1.3-6h0c0,1.9-0.1,4.5-0.2,6.8l-0.3,6.6h-1.4l0.8-15.4h1.9l1.9,7.4c0.5,1.9,0.9,3.6,1.1,5.2h0.1
    c0.3-1.6,0.7-3.2,1.2-5.2l2-7.4h1.9l0.7,15.4h-1.4L125.4,10.8z" stroke-dasharray="150" style="stroke-dashoffset: 0px;"></path>
    <path fill="#3c8dbc" d="M131.4,3.8H128V2.1h8.4v1.7h-3.5v13.7h-1.5V3.8z" stroke-dasharray="441.1739501953125" style="stroke-dashoffset: 0px;"></path>
    <path  fill="#3c8dbc" d="M95.8,29.5H98v20.9h7.1V53h-9.2V29.5z" stroke-dasharray="316.85528564453125" style="stroke-dashoffset: 0px;"></path>
    <path fill="#3c8dbc" d="M108.7,29.5v13.9c0,5.3,1.7,7.5,3.9,7.5c2.5,0,4-2.3,4-7.5V29.5h2.2v13.7c0,7.2-2.7,10.2-6.3,10.2
    c-3.4,0-6-2.8-6-10V29.5H108.7z" stroke-dasharray="150" style="stroke-dashoffset: 0px;"></path>
    <path fill="#3c8dbc" d="M122.5,53V29.5h2.3l5.3,11.9c1.2,2.8,2.2,5.2,3,7.6l0,0c-0.2-3.1-0.2-6-0.2-9.7v-9.8h2V53h-2.2l-5.3-11.9
    c-1.2-2.6-2.3-5.3-3.1-7.8l-0.1,0c0.1,3,0.2,5.8,0.2,9.7v10H122.5z" stroke-dasharray="441.1739501953125" style="stroke-dashoffset: 0px;"></path>
    <path fill="#3c8dbc" d="M141.4,45.6l-1.7,7.4h-2.2l5.6-23.5h2.6l5.7,23.5h-2.3l-1.8-7.4H141.4z M146.9,43.2l-1.6-6.8
    c-0.4-1.5-0.6-2.9-0.9-4.3h0c-0.2,1.4-0.5,2.8-0.8,4.3l-1.6,6.8H146.9z" stroke-dasharray="338.3053894042969" style="stroke-dashoffset: 20.531px;"></path>
    <path fill="#3c8dbc" d="M158.7,42.4v2.3h-6.1v-2.3H158.7z" stroke-dasharray="406.8699035644531" style="stroke-dashoffset: 92.2605px;"></path>
    <path fill="#3c8dbc" d="M161.3,53V29.5h2.3l5.3,11.9c1.2,2.8,2.2,5.2,3,7.6l0,0c-0.2-3.1-0.2-6-0.2-9.7v-9.8h2V53h-2.2l-5.3-11.9
    c-1.2-2.6-2.3-5.3-3.1-7.8l-0.1,0c0.1,3,0.2,5.8,0.2,9.7v10H161.3z" stroke-dasharray="301.8561706542969" style="stroke-dashoffset: 147.687px;"></path>
    <path fill="#3c8dbc" d="M190.2,52c-1,0.5-2.9,1.3-5.1,1.3c-2.5,0-4.6-0.9-6.2-3.1c-1.4-2-2.3-5.1-2.3-8.7c0-7,3.4-12.1,9-12.1
    c1.9,0,3.4,0.6,4.1,1.1l-0.5,2.5c-0.9-0.6-2-1-3.7-1c-4,0-6.7,3.6-6.7,9.4c0,6,2.5,9.5,6.4,9.5c1.4,0,2.4-0.3,2.9-0.6v-7h-3.4v-2.4
    h5.5V52z" stroke-dasharray="301.8561706542969" style="stroke-dashoffset: 147.687px;"></path>
 <path fill="#3c8dbc" d="M190.2,52c-1,0.5-2.9,1.3-5.1,1.3c-2.5,0-4.6-0.9-6.2-3.1c-1.4-2-2.3-5.1-2.3-8.7c0-7,3.4-12.1,9-12.1
    c1.9,0,3.4,0.6,4.1,1.1l-0.5,2.5c-0.9-0.6-2-1-3.7-1c-4,0-6.7,3.6-6.7,9.4c0,6,2.5,9.5,6.4,9.5c1.4,0,2.4-0.3,2.9-0.6v-7h-3.4v-2.4
    h5.5V52z" stroke-dasharray="301.8561706542969" style="stroke-dashoffset: 147.687px;"></path>
  </g>
</svg> </div>`

使用Javascript：

    <script>
       var lineDrawingg = anime({
  targets: '#lineDrawing .lines path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) { return i * 250 },
  direction: 'alternate',
  loop: true
});

       </script>

为方便起见，我创建了代码笔： https://codepen.io/waheedshah/pen/ZxWZMW 有人请修改它或告诉我哪里出错了。这将非常感谢。提前致谢

Answer 1

我知道我迟到了，但对于其他正在寻找解决方案的人：

您的选择器有误

https://jsfiddle.net/6hfo3sev/

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

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

body {
     background: #202020;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Draw SVG</title>
        <link rel="stylesheet" href="master.css" />
    </head>
    <body>
        <svg viewBox="0 25 280 35" preserveAspectRatio="xMaxYMax meet">
            <g
                fill="none"
                fill-rule="evenodd"
                stroke="currentColor"
                stroke-width="1"
                class="lines"
            >
                <path
                    fill="#3c8dbc"
                    d="M113.5,10.3h-4.4v5.5h4.9v1.7h-6.4V2.1h6.1v1.7h-4.7v4.9h4.4V10.3z"
                    stroke-dasharray="316.85528564453125"
                    style="stroke-dashoffset: 0px"
                ></path>
                <path
                    fill="#3c8dbc"
                    d="M125.4,10.8c-0.1-2.1-0.2-4.7-0.2-6.6h-0.1c-0.4,1.8-0.9,3.7-1.4,5.8l-2,7.5h-1.1l-1.8-7.3
                 c-0.5-2.2-1-4.1-1.3-6h0c0,1.9-0.1,4.5-0.2,6.8l-0.3,6.6h-1.4l0.8-15.4h1.9l1.9,7.4c0.5,1.9,0.9,3.6,1.1,5.2h0.1
                 c0.3-1.6,0.7-3.2,1.2-5.2l2-7.4h1.9l0.7,15.4h-1.4L125.4,10.8z"
                    stroke-dasharray="150"
                    style="stroke-dashoffset: 0px"
                ></path>
                <path
                    fill="#3c8dbc"
                    d="M131.4,3.8H128V2.1h8.4v1.7h-3.5v13.7h-1.5V3.8z"
                    stroke-dasharray="441.1739501953125"
                    style="stroke-dashoffset: 0px"
                ></path>
                <path
                    fill="#3c8dbc"
                    d="M95.8,29.5H98v20.9h7.1V53h-9.2V29.5z"
                    stroke-dasharray="316.85528564453125"
                    style="stroke-dashoffset: 0px"
                ></path>
                <path
                    fill="#3c8dbc"
                    d="M108.7,29.5v13.9c0,5.3,1.7,7.5,3.9,7.5c2.5,0,4-2.3,4-7.5V29.5h2.2v13.7c0,7.2-2.7,10.2-6.3,10.2
                 c-3.4,0-6-2.8-6-10V29.5H108.7z"
                    stroke-dasharray="150"
                    style="stroke-dashoffset: 0px"
                ></path>
                <path
                    fill="#3c8dbc"
                    d="M122.5,53V29.5h2.3l5.3,11.9c1.2,2.8,2.2,5.2,3,7.6l0,0c-0.2-3.1-0.2-6-0.2-9.7v-9.8h2V53h-2.2l-5.3-11.9
                 c-1.2-2.6-2.3-5.3-3.1-7.8l-0.1,0c0.1,3,0.2,5.8,0.2,9.7v10H122.5z"
                    stroke-dasharray="441.1739501953125"
                    style="stroke-dashoffset: 0px"
                ></path>
                <path
                    fill="#3c8dbc"
                    d="M141.4,45.6l-1.7,7.4h-2.2l5.6-23.5h2.6l5.7,23.5h-2.3l-1.8-7.4H141.4z M146.9,43.2l-1.6-6.8
                 c-0.4-1.5-0.6-2.9-0.9-4.3h0c-0.2,1.4-0.5,2.8-0.8,4.3l-1.6,6.8H146.9z"
                    stroke-dasharray="338.3053894042969"
                    style="stroke-dashoffset: 20.531px"
                ></path>
                <path
                    fill="#3c8dbc"
                    d="M158.7,42.4v2.3h-6.1v-2.3H158.7z"
                    stroke-dasharray="406.8699035644531"
                    style="stroke-dashoffset: 92.2605px"
                ></path>
                <path
                    fill="#3c8dbc"
                    d="M161.3,53V29.5h2.3l5.3,11.9c1.2,2.8,2.2,5.2,3,7.6l0,0c-0.2-3.1-0.2-6-0.2-9.7v-9.8h2V53h-2.2l-5.3-11.9
                 c-1.2-2.6-2.3-5.3-3.1-7.8l-0.1,0c0.1,3,0.2,5.8,0.2,9.7v10H161.3z"
                    stroke-dasharray="301.8561706542969"
                    style="stroke-dashoffset: 147.687px"
                ></path>
                <path
                    fill="#3c8dbc"
                    d="M190.2,52c-1,0.5-2.9,1.3-5.1,1.3c-2.5,0-4.6-0.9-6.2-3.1c-1.4-2-2.3-5.1-2.3-8.7c0-7,3.4-12.1,9-12.1
                 c1.9,0,3.4,0.6,4.1,1.1l-0.5,2.5c-0.9-0.6-2-1-3.7-1c-4,0-6.7,3.6-6.7,9.4c0,6,2.5,9.5,6.4,9.5c1.4,0,2.4-0.3,2.9-0.6v-7h-3.4v-2.4
                 h5.5V52z"
                    stroke-dasharray="301.8561706542969"
                    style="stroke-dashoffset: 147.687px"
                ></path>
                <path
                    fill="#3c8dbc"
                    d="M190.2,52c-1,0.5-2.9,1.3-5.1,1.3c-2.5,0-4.6-0.9-6.2-3.1c-1.4-2-2.3-5.1-2.3-8.7c0-7,3.4-12.1,9-12.1
                 c1.9,0,3.4,0.6,4.1,1.1l-0.5,2.5c-0.9-0.6-2-1-3.7-1c-4,0-6.7,3.6-6.7,9.4c0,6,2.5,9.5,6.4,9.5c1.4,0,2.4-0.3,2.9-0.6v-7h-3.4v-2.4
                 h5.5V52z"
                    stroke-dasharray="301.8561706542969"
                    style="stroke-dashoffset: 147.687px"
                ></path>
            </g>
        </svg>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</html>

无法使用动画js绘制线条

1 个答案: