Какими средствами анимировать линию по типу progress bar проще всего?
Я пошел по пути svg, но не уверен что это разумное решение для данного случая. Может на css лучше делать?
$(document).ready(function () {
// SVG animate
var s = Snap("#svg1");
var line = s.path("M 0 0 L 360 0");
var line_hover = s.path("M 0 0 L 0 0");
line_hover.attr({
fill: "transparent",
stroke: "#4054b2",
strokeWidth: 5
});
line.attr({
fill: "#000",
stroke: "rgba(0, 0, 0, 0.1)",
strokeWidth: 5
});
line_hover.animate({d: "L 360 0"}, 3000);
var s2 = Snap("#svg2");
var line2 = s2.path("M 0 0 L 360 0");
var line2_hover = s2.path("M 0 0 L 0 0");
line2_hover.attr({
fill: "transparent",
stroke: "#4054b2",
strokeWidth: 5
});
line2.attr({
fill: "#000",
stroke: "rgba(0, 0, 0, 0.1)",
strokeWidth: 5
});
line2_hover.animate({d: "L 360 0"}, 6000);
});
.connection__wrap {
text-align: center;
max-width: 1440px;
margin: 0 auto;
}
.connection__content{
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 90px 0;
}
.connection__content-item {
text-align: center;
width: 300px;
}
.connection__content-item-img {
display: flex;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 144px;
height: 144px;
margin: 0 auto 26px;
position: relative;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-align: center;
}
.connection__content-item-img.pink {
background: -webkit-gradient(linear,right top,left top,from(#F64A89),to(#D81B60));
background: linear-gradient(to left,#F64A89,#D81B60);
-webkit-box-shadow: 0 0 20px rgba(216,27,96,.5);
box-shadow: 0 0 20px rgba(216,27,96,.5);
}
.connection__content-item-img.orange {
background: -webkit-gradient(linear,right top,left top,from(#FE8D69),to(#F4511E));
background: linear-gradient(to left,#FE8D69,#F4511E);
-webkit-box-shadow: 0 0 20px rgba(244,81,30,.5);
box-shadow: 0 0 20px rgba(244,81,30,.5);
}
.connection__content-item-img.red {
background: -webkit-gradient(linear,right top,left top,from(#F76763),to(#E53935));
background: linear-gradient(to left,#F76763,#E53935);
-webkit-box-shadow: 0 0 20px rgba(229,57,53,.5);
box-shadow: 0 0 20px rgba(229,57,53,.5);
}
.svg{
top: 50%;
position: absolute;
width: 360px;
height: 10px;
left: 170px;
}
#svg1{
width: 360px;
height: 10px;
margin: 0 auto;
}
#svg2{
width: 360px;
height: 10px;
margin: 0 auto;
}
button{
padding: 15px;
}
Заголовок
Текст
Текст
Текст
Ответ
Вот что у меня получилось, по крайней мере разобрался с анимацией линий. Все дело в циклах ;)
$(document).ready(function () {
// SVG animate
var s = Snap("#svg1");
var linePos = [
{
m1: 0,
m2: 0,
l1: 0,
l2: 0,
dm1: 0,
dm2: 0,
dl1: 360,
dl2: 0,
delay: 800,
timeout: 0
},
{
m1: 556,
m2: 0,
l1: 556,
l2: 0,
dm1: 556,
dm2: 0,
dl1: 916,
dl2: 0,
delay: 800,
timeout: 800
},
{
m1: 1110,
m2: 0,
l1: 1110,
l2: 0,
dm1: 1110,
dm2: 0,
dl1: 1180,
dl2: 0,
delay: 300,
timeout: 1600
},
{
m1: 1180,
m2: 0,
l1: 1180,
l2: 0,
dm1: 1180,
dm2: 0,
dl1: 1180,
dl2: 260,
delay: 500,
timeout: 1900
},
{
m1: 1180,
m2: 260,
l1: 1180,
l2: 260,
dm1: 1180,
dm2: 260,
dl1: 628,
dl2: 260,
delay: 1000,
timeout: 2400
}
];
var i = 0;
linePos.forEach(function(value, currentIndex) {
setTimeout(function() {
createLineAnimate(currentIndex);
i++;
}, linePos[currentIndex].timeout);
});
function createLineAnimate(i) {
s.path("M " + linePos[i].m1 + " " + linePos[i].m2 + " L " + linePos[i].l1 + " " + linePos[i].l2 )
.attr({
fill: "transparent",
stroke: "#827ee9",
strokeWidth: 5
})
.animate({d: "M " + linePos[i].dm1 + " " + linePos[i].dm2 + " L " + linePos[i].dl1 + " " + linePos[i].dl2}, linePos[i].delay);
}
});
.connection__wrap {
text-align: center;
max-width: 1440px;
margin: 0 auto;
}
.connection__content{
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 90px 0;
}
.connection__content-item {
text-align: center;
width: 300px;
}
.connection__content-item-img {
display: flex;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 144px;
height: 144px;
margin: 0 auto 26px;
position: relative;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-align: center;
}
.connection__content-item-img.pink {
background: -webkit-gradient(linear,right top,left top,from(#F64A89),to(#D81B60));
background: linear-gradient(to left,#F64A89,#D81B60);
-webkit-box-shadow: 0 0 20px rgba(216,27,96,.5);
box-shadow: 0 0 20px rgba(216,27,96,.5);
}
.connection__content-item-img.orange {
background: -webkit-gradient(linear,right top,left top,from(#FE8D69),to(#F4511E));
background: linear-gradient(to left,#FE8D69,#F4511E);
-webkit-box-shadow: 0 0 20px rgba(244,81,30,.5);
box-shadow: 0 0 20px rgba(244,81,30,.5);
}
.connection__content-item-img.red {
background: -webkit-gradient(linear,right top,left top,from(#F76763),to(#E53935));
background: linear-gradient(to left,#F76763,#E53935);
-webkit-box-shadow: 0 0 20px rgba(229,57,53,.5);
box-shadow: 0 0 20px rgba(229,57,53,.5);
}
.svg{
position: absolute;
top: 50%;
width: 1180px;
height: 260px;
left: 170px;
}
#svg1{
width: 1180px;
height: 260px;
margin: 0 auto;
}
button{
padding: 15px;
}
Заголовок
Текст
Текст
Текст
Комментариев нет:
Отправить комментарий