Невозможно нарисовать линии с помощью аниме JS
У меня проблемы с созданием большего количества путей с помощью библиотеки аниме. Я создал текст в иллюстраторе abode и преобразовал его в контуры рисованной линии аниме. Я вижу, что я могу создать 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 Кто-нибудь, пожалуйста, измените его или скажите, где я ошибся. Это было бы очень признательно. заранее спасибо
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,
});