Как верно ответил @Greg-- нужно точно знать максимальную длину Path
и дальше можно манипулировать изменениями stroke-dasharray
и stroke-dashoffset
для получения разнообразных эффектов анимации, которые можно сделать чисто на CSS или SVG.
Ниже ваш код с вычислением максимальной длины path
<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="path" class="svg-elem-1" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6" stroke-miterlimit="10"/>
</svg>
<script>
let length = Math.round(path.getTotalLength());
console.log(length)
</script>
- Анимация рисования контура с помощью изменения
stroke-dashoffset
от
максимума 504px
до нуля values="0;504;0"
<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="504" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6" stroke-miterlimit="10">
<animate attributename="stroke-dashoffset" dur="4s" values="0;504;0" fill="freeze" repeatCount="indefinite" />
</path>
</svg>
Но в образце анимации начало отрисовки начинается из другой точки. В примере выше со stroke-dasharray
точка начала анимации была начальной точкой векторного пути.
- Чтобы решить эту проблему, будем анимировать рисования контура с
помощью
stroke-dasharray
values="0, 504;504,0;0, 504"
, а начальную точку сдвинем с помощью stroke-dashoffset="252"
У stroke-dasharray может быть несколько пар по два атрибута: черта, пробел
Из формулы
values="0, 504;504,0;0, 504"
следует, что первая пара атрибутов устанавливает максимальный пробел -0, 504
(линия не видна), вторая пара, устанавливает максимальную черту 504,0
(линия полностью видна)
<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="252" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6" stroke-miterlimit="10">
<animate attributename="stroke-dasharray" dur="4s" values="0, 504;504,0;0, 504" repeatCount="indefinite" fill="freeze" />
</path>
</svg>
- Добавляем анимацию изменения толщины линии
<animate attributename="stroke-width" dur="4s" values="1;6;0"
fill="freeze" repeatCount="indefinite" />
<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="252" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6" stroke-miterlimit="10">
<animate attributename="stroke-dasharray" dur="2s" values="0, 504;504,0;0, 504" fill="freeze" repeatCount="indefinite" />
<animate attributename="stroke-width" dur="2s" values="1;6;0" fill="freeze" repeatCount="indefinite" />
</path>
</svg>
Чтобы приблизиться к оригинальной анимации добавим третью анимацию
<animate attributename="stroke-dashoffset" dur="2s" values="252;0"
fill="freeze" repeatCount="indefinite" />
<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="252" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6" stroke-miterlimit="10">
<animate attributename="stroke-dasharray" dur="2s" values="0, 504;504,0" fill="freeze" repeatCount="indefinite" />
<animate attributename="stroke-width" dur="2s" values="1;6;0" fill="freeze" repeatCount="indefinite" />
<animate attributename="stroke-dashoffset" dur="2s" values="252;0" fill="freeze" repeatCount="indefinite" />
</path>
</svg>
Я выдам главный секрет разработчиков лоадеров подобного типа
Вот так прямо сказать, что они хотели получить именно такой лоадер,- сильно сомневаюсь. Разработчики понимают основные принципы анимации и дальше экспериментируют с изменением параметров атрибутов stroke-dasharray
и stroke-dashoffset
и вдруг в одном из вариантов получается что-то очень интересное. Этот вариант и берут за основу.
Я бы посоветовал изучить принципы анимации и пытаться сделать, что-то своё, а не пытаться повторить чужой вариант, поверьте это намного сложнее и скучнее, чем радость творчества в создании собственного "шедевра" Почитать немного об анимации линии можно в статье: Анимация рисования линии
Вариант CSS
За основу взят крайний вариант решения SVG анимации.
Стили и команды анимации SVG перенесены в CSS.
Обратите внимание, что команды анимации SVG закомментированы и оставлены в коде, чтобы легче было сравнить с командами анимации CSS и увидеть, что значения параметров одни и те же и там и там.
.svg-elem-1 {
fill:none;
stroke:#E60000;
stroke-width:6;
stroke-dashoffset:252;
stroke-dasharray:504;
stroke-miterlimit:10;
animation:dash 2s ease infinite,strokeWidth 2s ease infinite,strokeOffset 2s ease infinite;
}
@keyframes dash {
0% {stroke-dasharray:0,504;}
100% {stroke-dasharray:504,0;}
}
@keyframes strokeWidth {
0% {stroke-width:1px;}
50% {stroke-width:6px;}
100% {stroke-width:0px;}
}
@keyframes strokeOffset {
0% {stroke-dashoffset:252;}
100% {stroke-dashoffset:0;}
}
<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795">
<!-- Оставлены команды анимации SVG для сравнения с анимациями CSS -->
<!-- <animate attributename="stroke-dasharray" dur="2s" values="0, 504;504,0" fill="freeze" repeatCount="indefinite" /> -->
<!-- <animate attributename="stroke-width" dur="2s" values="1;6;0" fill="freeze" repeatCount="indefinite" /> -->
<!-- <animate attributename="stroke-dashoffset" dur="2s" values="252;0" fill="freeze" repeatCount="indefinite" /> -->
</path>
</svg>