Инструкция для изучения анимаций
Всем привет! Хотел бы спросить, что нужно знать и где это можно посмотреть, чтобы сделать анимацию вот такого вида?
При скролле до этого блока, должен сначала появляться блок с текстом, потом кружочек и от него идти линия до следующего блока. Сама линия и круги вставлены общей svg. Вот хочу узнать, за сколько времени и что нужно уметь чтобы сделать такое. Делать пробовал, но ничего толком не вышло. Animate.css и AOS такого не подразумевают.
Ответы (1 шт):
Автор решения: Alexandr_TT
→ Ссылка
Пример для старта изучения, как рисуются линии, кружки. Взаимодействие и последовательность анимаций
Ссылка на ответ
.shape svg {
width:100%;
height: auto;
}
#outline1, #outline2 {
fill:none;
stroke-dasharray: 1192;
animation: dash 17s linear forwards;
stroke-linejoin: round;
stroke-width:4;
}
@keyframes dash {
from {
stroke-dashoffset: 1192;
}
to {
stroke-dashoffset: 0;
}
}
.container {
width:100%;
height:100%;
background: linear-gradient(to right,#B452A0, #895FDD );
display: flex;
justify-content: center;
align-items:center;
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="90%" height="90%" viewBox="0 0 1214 863" preserveAspectRatio="xMinYMin meet">
<defs>
</defs>
<image xlink:href="https://i.stack.imgur.com/NZ5NF.jpg" height="100%" width="100%"/>
<path id="outline1" stroke="#EC1E4E" d="m62.2 447c0 0 33.3-38.2 48.5-58.5 12.5-16.7 19.9-37.4 34.7-52.1 13.4-13.3 29.7-24.9 47.5-31.1 16.2-5.6 34.2-7.1 51.2-4.6 18.5 2.7 35.8 11.8 52.1 21 23.5 13.2 43.4 30.3 64.9 48.5 17.3 14.6 39.6 25.5 62.2 27.4 21.3 1.8 41.6-9.9 62.2-15.5 20.5-5.6 40.4-13.7 61.3-18.3 18.6-4.1 37.6-8.4 56.7-8.2 19.4 0.1 39.4 2.3 57.6 9.1 20.5 7.7 36.1 25.1 55.8 34.7 21 10.4 42.4 23.1 65.8 24.7 21.8 1.5 44.6-4.5 64-14.6 19.9-10.4 38.4-16.2 58.5-21 18.8-4.5 38.2-7.4 57.6-7.3 20.9 0.1 41.8 3.6 62.2 8.2 19.1 4.3 36.9 13 55.8 18.3 15.4 4.3 46.6 11 46.6 11v0M62.2 447"/>
<path id="outline2" stroke="#8B0FC5" d="m62.2 447c0 0 33.3 38.2 48.5 58.5 12.5 16.7 19.9 37.4 34.7 52.1 13.4 13.3 29.7 24.9 47.5 31.1 16.2 5.6 34.2 7.1 51.2 4.6 18.5-2.7 35.8-11.8 52.1-21 23.5-13.2 43.4-30.3 64.9-48.5 17.3-14.6 39.6-25.5 62.2-27.4 21.3-1.8 41.6 9.9 62.2 15.5 20.5 5.6 40.4 13.7 61.3 18.3 18.6 4.1 37.6 8.4 56.7 8.2 19.4-0.1 39.4-2.3 57.6-9.1 20.5-7.7 36.1-25.1 55.8-34.7 21-10.4 42.4-23.1 65.8-24.7 21.8-1.5 44.6 4.5 64 14.6 19.9 10.4 38.4 16.2 58.5 21 18.8 4.5 38.2 7.4 57.6 7.3 20.9-0.1 41.8-3.6 62.2-8.2 19.1-4.3 36.9-13 55.8-18.3 15.4-4.3 46.6-11 46.6-11v0" />
<!-- Upper Running Triangle -->
<polyline transform="translate(7 -12.5) rotate(90)" points="0,0 12.5,21.6 25,0" fill="#B51092" >
<animateMotion
id="an1_triangle"
dur="17s"
repeatCount="1"
rotate="auto-reverse"
begin="0s"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#outline1"/>
</animateMotion>
<!-- Lower Running Triangle -->
</polyline>
<polyline transform="translate(7 -12.5) rotate(90)" points="0,0 12.5,21.6 25,0" fill="#6326DD" >
<animateMotion
id="an2_triangle"
dur="17s"
repeatCount="1"
rotate="auto-reverse"
begin="0s"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#outline2"/>
</animateMotion>
</polyline>
<!-- Loader 1st Section -->
<g transform="translate(30 265)">
<circle id="crc1" cx="30" cy="30" r="20" fill="none" stroke-opacity="1" stroke="#EC1E4E" stroke-width="3"
stroke-dasharray="33.88 8" stroke-dashoffset="-4" >
<animate id="an_crc1"
attributeName="stroke-dashoffset"
values="33.88;0"
dur="0.2s"
begin="0s"
repeatCount="12"
restart="whenNotActive" />
<animate id="fill_crc1" attributeName="stroke-opacity" dur="1s" begin="an_crc1.end-0.5s" values="1;0" fill="freeze" />
</circle>
<!-- Animation checkbox 1st section -->
<text x="15" y="43" fill="#00AF00" font-size="54" fill-opacity="0">✔
<animate id="an_check1"
attributeName="fill-opacity"
dur="1s"
begin="fill_crc1.end-0.25s"
values="0;1"
fill="freeze" />
</text>
</g>
<!-- Loader 2nd Section -->
<g transform="translate(330 265)">
<circle id="crc2" cx="30" cy="30" r="20" fill="none" stroke-opacity="1" stroke="#CA0C52" stroke-width="3"
stroke-dasharray="33.88 8" stroke-dashoffset="-4" >
<animate id="an_crc2"
attributeName="stroke-dashoffset"
values="33.88;0"
dur="0.2s"
begin="an_check1.end-0.5s"
repeatCount="12"
restart="whenNotActive" />
<animate id="fill_crc2" attributeName="stroke-opacity" dur="1s" begin="an_crc2.end-0.5s" values="1;0" fill="freeze" />
</circle>
<!-- Animation checkbox 2nd section -->
<text x="15" y="43" fill="#00AF00" font-size="54" fill-opacity="0">✔
<animate id="an_check2"
attributeName="fill-opacity"
dur="1s"
begin="fill_crc2.end-0.25s"
values="0;1"
fill="freeze" />
</text>
</g>
<!-- Loader 3rd Section -->
<g transform="translate(530 265)">
<circle id="crc3" cx="30" cy="30" r="20" fill="none" stroke-opacity="1" stroke="#B51092" stroke-width="3"
stroke-dasharray="33.88 8" stroke-dashoffset="-4" >
<animate id="an_crc3"
attributeName="stroke-dashoffset"
values="33.88;0"
dur="0.2s"
begin="an_check2.end-0.5s"
repeatCount="12"
restart="whenNotActive" />
<animate id="fill_crc3" attributeName="stroke-opacity" dur="1s" begin="an_crc3.end-0.5s" values="1;0" fill="freeze" />
</circle>
<!-- Animation of the 3rd section checkbox -->
<text x="15" y="43" fill="#00AF00" font-size="54" fill-opacity="0">✔
<animate id="an_check3"
attributeName="fill-opacity"
dur="1s"
begin="fill_crc3.end-0.25s"
values="0;1"
fill="freeze" />
</text>
</g>
<!-- Loader 4th section -->
<g transform="translate(730 265)">
<circle id="crc4" cx="30" cy="30" r="20" fill="none" stroke-opacity="1" stroke="#8B0FC5" stroke-width="3"
stroke-dasharray="33.88 8" stroke-dashoffset="-4" >
<animate id="an_crc4"
attributeName="stroke-dashoffset"
values="33.88;0"
dur="0.2s"
begin="an_check3.end-0.5s"
repeatCount="12"
restart="whenNotActive" />
<animate id="fill_crc4" attributeName="stroke-opacity" dur="1s" begin="an_crc4.end-0.5s" values="1;0" fill="freeze" />
</circle>
<!-- Animation checkbox 4th section -->
<text x="15" y="43" fill="#00AF00" font-size="54" fill-opacity="0">✔
<animate id="an_check4"
attributeName="fill-opacity"
dur="1s"
begin="fill_crc4.end-0.25s"
values="0;1"
fill="freeze" />
</text>
</g>
<!-- Loader 5th section -->
<g transform="translate(930 265)">
<circle id="crc5" cx="30" cy="30" r="20" fill="none" stroke-opacity="1" stroke="#6326DD" stroke-width="3"
stroke-dasharray="33.88 8" stroke-dashoffset="-4" >
<animate id="an_crc5"
attributeName="stroke-dashoffset"
values="33.88;0"
dur="0.2s"
begin="an_check4.end-0.5s"
repeatCount="12"
restart="whenNotActive" />
<animate id="fill_crc5" attributeName="stroke-opacity" dur="1s" begin="an_crc5.end-0.5s" values="1;0" fill="freeze" />
</circle>
<!-- Animation of the 5th section checkbox -->
<text x="15" y="43" fill="#00AF00" font-size="54" fill-opacity="0">✔
<animate id="an_check5"
attributeName="fill-opacity"
dur="1s"
begin="fill_crc5.end-0.25s"
values="0;1"
fill="freeze" />
</text>
</g>
<g transform="translate(1085 265)">
<circle id="crc6" cx="30" cy="30" r="20" fill="none" stroke-opacity="1" stroke="#0336E1" stroke-width="3"
stroke-dasharray="33.88 8" stroke-dashoffset="-4" >
<animate id="an_crc6"
attributeName="stroke-dashoffset"
values="33.88;0"
dur="0.2s"
begin="an_check5.end-0.5s"
repeatCount="12"
restart="whenNotActive" />
<animate id="fill_crc6" attributeName="stroke-opacity" dur="1s" begin="an_crc6.end-0.5s" values="1;0" fill="freeze" />
</circle>
<text x="15" y="43" fill="#00AF00" font-size="54" fill-opacity="0">✔
<animate id="an_check6"
attributeName="fill-opacity"
dur="1s"
begin="fill_crc6.end-0.25s"
values="0;1"
fill="freeze" />
</text>
</g>
</svg>
</div>Более подробно здесь, как делается анимация с помощью stroke-dasharray stroke-dashoffset
Можно по изучать ответ по прокладке и анимации маршрута на карте (в вашем случае на картинке)
.container {
width:100%;
height:100%;
}
svg{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.road{
fill:none;
stroke:blue;
stroke-dasharray:12 10;
stroke-dashoffset:0;
stroke-width:3;
}
#steps{
fill:none;
stroke:white;
stroke-dasharray:12 10;
stroke-dashoffset:0;
stroke-width:3;
}
#stepMask{
fill:none;
stroke:black;
stroke-width:3;
stroke-dashoffset: 1887;
stroke-dasharray:1887,1887;
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 890" >
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="white" />
<path id="stepMask" d="m398.8 299.8c0 0 70.7-30.6 108.4-33.9 44.2-3.9 88.7 7.5 132 17 73.3 16 144.1 42.3 215 66.9 22.3 7.8 45.8 13.2 66 25.5 14.7 8.9 32.8 17.8 38.7 33.9 5.1 14-6.6 29.4-6.6 44.3 0.1 76 68.8 157.8 33.9 225.3-25.2 48.8-97.9 50-147.1 74.5-32.6 16.2-62.8 38.9-98.1 48.1-34.1 8.9-70.4 6.9-105.6 5.7-72.5-2.5-163.4 23.6-215.9-26.4-31.9-30.3-9.5-88.1-22.6-130.1-8-25.8-9.6-61.8-33.9-73.5-54.1-26.2-175.4 42.4-175.4 42.4" >
<animate attributeName="stroke-dashoffset" begin="0s" dur="40s" values="1887;0" repeatCount="1" fill="freeze"/>
</path>
</mask>
<g id="Man" transform="translate(0,0) scale(1,-1)">
<path fill="none">
<animate
attributeName="d"
begin="0s"
dur="0.4s"
repeatCount="indefinite"
values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
</path>
</g>
</defs>
<image xlink:href="https://i.stack.imgur.com/Gmr13.jpg"
width="100%" height="100%" />
<g id="Layer_1">
<path class="road" d="m398.8 299.8c0 0 70.7-30.6 108.4-33.9 44.2-3.9 88.7 7.5 132 17 73.3 16 144.1 42.3 215 66.9 22.3 7.8 45.8 13.2 66 25.5 14.7 8.9 32.8 17.8 38.7 33.9 5.1 14-6.6 29.4-6.6 44.3 0.1 76 68.8 157.8 33.9 225.3-25.2 48.8-97.9 50-147.1 74.5-32.6 16.2-62.8 38.9-98.1 48.1-34.1 8.9-70.4 6.9-105.6 5.7-72.5-2.5-163.4 23.6-215.9-26.4-31.9-30.3-9.5-88.1-22.6-130.1-8-25.8-9.6-61.8-33.9-73.5-54.1-26.2-175.4 42.4-175.4 42.4" />
<path id="steps" mask="url(#msk1)" d="m398.8 299.8c0 0 70.7-30.6 108.4-33.9 44.2-3.9 88.7 7.5 132 17 73.3 16 144.1 42.3 215 66.9 22.3 7.8 45.8 13.2 66 25.5 14.7 8.9 32.8 17.8 38.7 33.9 5.1 14-6.6 29.4-6.6 44.3 0.1 76 68.8 157.8 33.9 225.3-25.2 48.8-97.9 50-147.1 74.5-32.6 16.2-62.8 38.9-98.1 48.1-34.1 8.9-70.4 6.9-105.6 5.7-72.5-2.5-163.4 23.6-215.9-26.4-31.9-30.3-9.5-88.1-22.6-130.1-8-25.8-9.6-61.8-33.9-73.5-54.1-26.2-175.4 42.4-175.4 42.4" />
</g>
<use xlink:href="#Man" transform="translate(0,0) scale(2.5)" style="stroke:blue; fill:black;">
<animateMotion id="an2"
begin="0s"
dur="40s"
repeatCount="1" >
<mpath xlink:href="#steps"/>
</animateMotion>
</use>
</svg>
</div>Довольно подробно объяснены основные моменты