Анимация проходит быстрее чем заданное время
Пробую GSAP.
Подскажите,пожалуйста, почему у меня анимация заканчивается быстрее, чем указанное время продолжительности анимации. Рисование лого заканчивается на 4 секунде, а время анимации стоит 10 секунд.
var tl = new TimelineLite();
tl.staggerFrom("#mask0 path", 10,{ drawSVG: 0, ease: "none" })
Т.е. логотип отрисовался за 4 секунды, а дальше ничего не анимиурется, хотя время анимации идет до 10 секунд.
https://codepen.io/sergej-panow/pen/PoNZrYy
Ответы (1 шт):
Если посчитать общую длину с помощью getTotalLength(), то получится - 4987px
Сделаю анимацию прорисовки линий аналогичную вашему примеру на codepen, но с помощью
stroke-dasharray
<animate id="dash" attributeName="stroke-dasharray"
dur="10s" values="0,4987;4987,0" fill="freeze" />
Чтобы увидеть, когда заканчивается анимация рисования линий, запустим сразу после её окончания, анимацию заполнения цветом.
<animate attributeName="fill" dur="1s" begin="dash.end"
values="white;#0091E2" fill="freeze" />
Также, как и в вашем примере будет пауза, после окончания первой анимации
<svg width="588" height="588" viewBox="0 0 588 588" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="path1" d="M528.49 216.816L231.47 294.976L526.535 365.323V404.373L572.254 294L528.49 188.347V216.816Z
M442.51 449.351L153.306 380.956V203.134L428.832 138.652L159.168 87.8455L87.6862 467.68L97.2454 490.755L262.441 559.18L442.51 449.351Z
M502.83 500.745C502.554 501.157 502.242 501.539 501.89 501.89C501.539 502.242 501.157 502.554 500.745 502.83C500.33 503.105 499.896 503.338 499.438 503.53L296.894 587.426C296.436 587.615 295.962 587.758 295.474 587.854C294.989 587.95 294.498 588 294 588C293.502 588 293.011 587.95 292.526 587.854C292.038 587.758 291.564 587.615 291.106 587.426L88.5624 503.53C88.1044 503.338 87.6696 503.105 87.258 502.83C86.8431 502.554 86.4614 502.242 86.1096 501.89C85.7577 501.539 85.4457 501.157 85.1703 500.745C84.8948 500.33 84.6624 499.896 84.4699 499.438L0.574233 296.894C0.385039 296.436 0.242271 295.962 0.146014 295.477C0.0497582 294.989 0 294.498 0 294C0 293.502 0.0497582 293.011 0.146014 292.526C0.242271 292.038 0.385039 291.564 0.574233 291.106L84.4699 88.5625C84.6624 88.1044 84.8948 87.6696 85.1703 87.258C85.4457 86.8431 85.7577 86.4614 86.1096 86.1096C86.4614 85.761 86.8431 85.4457 87.258 85.1703C87.6696 84.8948 88.1044 84.6624 88.5624 84.4699L291.106 0.574233C291.564 0.385039 292.038 0.242321 292.526 0.146065C293.011 0.0498088 293.502 0 294 0C294.498 0 294.989 0.0498088 295.474 0.146065C295.962 0.242321 296.436 0.385039 296.894 0.574233L499.438 84.4699C499.896 84.6624 500.33 84.8948 500.745 85.1703C501.157 85.4457 501.539 85.761 501.89 86.1096C502.242 86.4614 502.554 86.8431 502.83 87.258C503.105 87.6696 503.338 88.1044 503.53 88.5625L587.426 291.106C587.615 291.564 587.758 292.038 587.854 292.526C587.95 293.011 588 293.502 588 294C588 294.498 587.95 294.989 587.854 295.477C587.758 295.962 587.615 296.436 587.426 296.894L503.53 499.438C503.338 499.896 503.105 500.33 502.83 500.745Z
M15.7462 294L59.5096 399.653V188.347L15.7462 294Z" fill="none" stroke="#0091E2" stroke-width="2">
<!-- Анимация рисования линий -->
<animate id="dash" attributeName="stroke-dasharray" dur="10s" values="0,4987;4987,0" fill="freeze" />
<!-- Анимвация заполнения цветом -->
<animate attributeName="fill" dur="1s" begin="dash.end" values="white;#0091E2" fill="freeze" />
</path>
</svg>
<script>
var path = document.querySelector('#path1');
var len = Math.round(path.getTotalLength() );
console.log("Длина пути - " + len);
</script>Откуда берется пауза после окончания анимации?
Посмотрите на формулу path в вашем примере.
Внутри расположены вложенные path, каждый из которых начинается с символа М Moveto)
Поэтому анимация этих путей идет параллельно.
Скорость прорисовки одинакова, но заканчиваются они в разное время, так как у всех разная длина.
Если посчитать отдельно длину каждого подпатча, входящего в общий path:
id="path1" - 912px
id="path2" - 1834px
id="path3" - 1801px
id="path4" - 440px
Итого: 4987px
Вы задали общее время анимации 10s Парсер SVG рассчитал, что скорость прорисовки будет равна 4987 / 10 = 498 px/s
Общее время, видимой анимации рисования линии будет расcчитано по самому длинному path
1834 / 498 = 3.68s Остальное время, оставшееся до 10s рисоваться ничего не будет.
Отсюда и получается такой эффект - задано время анимации рисования 10s, а прорисовка линий идёт всего около 4s
Как убрать паузу после окончания видимой анимации?
Так как анимация идет параллельно несколькими линиями, то необходимо установить параметр stroke-dasharray равный длине самого длинного подпатча, а именно 1834px
<animate id="dash" attributeName="stroke-dasharray"
dur="10s" values="0,1834;1834,0" fill="freeze" />
Теперь анимация закраски контура, должна начаться сразу же, без пауз, после окончания анимации рисования линий
<svg width="588" height="588" viewBox="0 0 588 588" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="path1" d="M528.49 216.816L231.47 294.976L526.535 365.323V404.373L572.254 294L528.49 188.347V216.816ZM442.51 449.351L153.306 380.956V203.134L428.832 138.652L159.168 87.8455L87.6862 467.68L97.2454 490.755L262.441 559.18L442.51 449.351ZM502.83 500.745C502.554 501.157 502.242 501.539 501.89 501.89C501.539 502.242 501.157 502.554 500.745 502.83C500.33 503.105 499.896 503.338 499.438 503.53L296.894 587.426C296.436 587.615 295.962 587.758 295.474 587.854C294.989 587.95 294.498 588 294 588C293.502 588 293.011 587.95 292.526 587.854C292.038 587.758 291.564 587.615 291.106 587.426L88.5624 503.53C88.1044 503.338 87.6696 503.105 87.258 502.83C86.8431 502.554 86.4614 502.242 86.1096 501.89C85.7577 501.539 85.4457 501.157 85.1703 500.745C84.8948 500.33 84.6624 499.896 84.4699 499.438L0.574233 296.894C0.385039 296.436 0.242271 295.962 0.146014 295.477C0.0497582 294.989 0 294.498 0 294C0 293.502 0.0497582 293.011 0.146014 292.526C0.242271 292.038 0.385039 291.564 0.574233 291.106L84.4699 88.5625C84.6624 88.1044 84.8948 87.6696 85.1703 87.258C85.4457 86.8431 85.7577 86.4614 86.1096 86.1096C86.4614 85.761 86.8431 85.4457 87.258 85.1703C87.6696 84.8948 88.1044 84.6624 88.5624 84.4699L291.106 0.574233C291.564 0.385039 292.038 0.242321 292.526 0.146065C293.011 0.0498088 293.502 0 294 0C294.498 0 294.989 0.0498088 295.474 0.146065C295.962 0.242321 296.436 0.385039 296.894 0.574233L499.438 84.4699C499.896 84.6624 500.33 84.8948 500.745 85.1703C501.157 85.4457 501.539 85.761 501.89 86.1096C502.242 86.4614 502.554 86.8431 502.83 87.258C503.105 87.6696 503.338 88.1044 503.53 88.5625L587.426 291.106C587.615 291.564 587.758 292.038 587.854 292.526C587.95 293.011 588 293.502 588 294C588 294.498 587.95 294.989 587.854 295.477C587.758 295.962 587.615 296.436 587.426 296.894L503.53 499.438C503.338 499.896 503.105 500.33 502.83 500.745ZM15.7462 294L59.5096 399.653V188.347L15.7462 294Z" fill="none" stroke="#0091E2" stroke-width="2">
<!-- Анимация рисования линий -->
<animate id="dash" attributeName="stroke-dasharray" dur="10s" values="0,1834;1834,0" fill="freeze" />
<!-- Анимация заполнения цветом -->
<animate attributeName="fill" dur="1s" begin="dash.end" values="white;#0091E2" fill="freeze" />
</path>
</svg>