Как реализовать анимацию Drag-and-drop для иконок, а именно сделать движущиеся иконки на странице, но не понимаю как их связать пунктирной линией, которая будет соединять две и более иконки друг с другом и при перемещении их по странице данная пунктирная линия будет растягиваться и уменьшаться между ними, ну и в целом нужно чтобы визуально выглядело все как на скриншоте, какие сторонние библиотеки использовать и как правильней и легче это реализовать?
-
3Тот, кто будет перемещать иконку, должен перемещать и соответсвующие концы линий.– Qwertiy ♦3 сен 2021 в 8:27
-
я на тостере видел этот вопрос но так и не понял, как это должно работать ? что должно произойти ?– Monkey Mutant3 сен 2021 в 8:34
-
Не думаю, что есть библиотека, которая соединяет иконку Avochato с Agile CRM рядом кружочков с эффектом градиента от основного цвета одной иконки до основного цвета другой. Но можно написать такую с помощью canvas как минимум точно.– Leonid3 сен 2021 в 12:17
1 ответ
как можно реализовать подобную анимацию, .....
ну и в целом нужно чтобы визуально выглядело все как на скриншоте,
А вот это как раз самоё трудоёмкое, без помощи автора вопроса.
Было бы очень неплохо, если бы при оформлении вопроса TC добавлял бы конкретные иконки. Тогда и вопрос был бы более конкретным и шанс получить конкретный ответ был бы выше.
Связать две иконки линией, состоящей из кружков, которые динамично меняют своё взаимное расположение при перетаскивании иконок, получилось сделать с помощью техники
Необычные эффекты stroke-dasharray
Прямую линию заменил на кубическую кривую Безье так как прямая линия при перетаскивании заходит за иконки и это не оч. хорошо выглядит.
Для реализации drag and drop использовал jQuery
var dvA = document.querySelector("#a");
var dvB = document.querySelector("#b");
var arrowR = document.querySelector("#arrowR");
var drawConnector = function() {
var posnAR = {
x: dvA.offsetLeft + dvA.offsetWidth + 4,
y: dvA.offsetTop + dvA.offsetHeight / 2
};
var posnBR = {
x: dvB.offsetLeft + dvB.offsetWidth + 8,
y: dvB.offsetTop + dvA.offsetHeight / 2
};
var StrRight =
"M" +
(posnBR.x ) + "," + (posnBR.y) + " " +
"C" +
(posnBR.x + 150) + "," + (posnBR.y) + " " +
(posnAR.x + 150) + "," + (posnAR.y) + " " +
(posnAR.x ) + "," + (posnAR.y);
arrowR.setAttribute("d", StrRight);
};
$("#a, #b").draggable({
drag: function(event, ui) {
drawConnector();
}
});
setTimeout(drawConnector, 250);
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background:#F8F8F8;
}
#a, #b {
padding: 10px;
position: fixed;
width: 108px;
height: 135px;
}
#a {
background-image:url(https://i.stack.imgur.com/RJ21B.png);
background-size:cover;
left:100px;
top: 20px;
}
#b {
background-image:url(https://i.stack.imgur.com/XBflv.png);
background-size:cover;
left:250px;
top: 180px;
}
#c {
text-align:center;
position: fixed;
top:5%;
left:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g fill="none" stroke="#8DBDAD" stroke-width="10" stroke-dasharray="0,20 " stroke-linecap="round" >
<path id="arrowR"/>
</g>
</svg>
<div id="c"> Перемещайте иконки </div>
<div id="a"></div>
<div id="b"></div>
Update
Добавлена анимация перемещения кружков в связующем звене
Для большей наглядности перетаскивайте мышкой иконки
var dvA = document.querySelector("#a");
var dvB = document.querySelector("#b");
var arrowR = document.querySelector("#arrowR");
var drawConnector = function() {
var posnAR = {
x: dvA.offsetLeft + dvA.offsetWidth + 2,
y: dvA.offsetTop + dvA.offsetHeight / 2
};
var posnBR = {
x: dvB.offsetLeft + dvB.offsetWidth + 8,
y: dvB.offsetTop + dvA.offsetHeight / 2
};
var StrRight =
"M" +
(posnBR.x ) + "," + (posnBR.y) + " " +
"C" +
(posnBR.x + 150) + "," + (posnBR.y) + " " +
(posnAR.x + 150) + "," + (posnAR.y) + " " +
(posnAR.x ) + "," + (posnAR.y);
arrowR.setAttribute("d", StrRight);
arrowR.setAttribute("stroke", '#8DBDAD');
};
$("#a, #b").draggable({
drag: function(event, ui) {
drawConnector();
}
});
setTimeout(drawConnector, 250);
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background:#F8F8F8;
}
#a, #b {
padding: 10px;
position: fixed;
width: 108px;
height: 135px;
}
#a {
background-image:url(https://i.stack.imgur.com/RJ21B.png);
background-size:cover;
left:100px;
top: 20px;
}
#b {
background-image:url(https://i.stack.imgur.com/XBflv.png);
background-size:cover;
left:250px;
top: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<linearGradient id="Lg>
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<g fill="none" stroke-width="12" stroke-dasharray="0,18 " stroke-linecap="round" >
<path id="arrowR">
<animate id="anT" attributeName="stroke-dashoffset" begin="0" values="0;400;400;0;0" dur="8s" repeatCount="indefinite" />
</path>
</g>
</svg>
<div id="a"></div>
<div id="b"></div>
-
-
да я с мобилы смотрел как обычно ..и там не работает это и потому уточнил - что там вообще - оказывается надо с PC смотреть 5 сен 2021 в 2:10
-
Спасибо большое за помощь, теперь тоже самое нужно сделать правда на Vue.js– Roman Ag14 сен 2021 в 8:05
-
1галочку поставил Александр , просто тут недавно и не знал про галочку, и еще раз спасибо большое за решение и потраченное на него время, а про вью да вопрос актуальный.– Roman Ag4 окт 2021 в 7:34