2

Как реализовать анимацию Drag-and-drop для иконок, а именно сделать движущиеся иконки на странице, но не понимаю как их связать пунктирной линией, которая будет соединять две и более иконки друг с другом и при перемещении их по странице данная пунктирная линия будет растягиваться и уменьшаться между ними, ну и в целом нужно чтобы визуально выглядело все как на скриншоте, какие сторонние библиотеки использовать и как правильней и легче это реализовать?

введите сюда описание изображения

3
  • 3
    Тот, кто будет перемещать иконку, должен перемещать и соответсвующие концы линий.
    – Qwertiy
    3 сен 2021 в 8:27
  • я на тостере видел этот вопрос но так и не понял, как это должно работать ? что должно произойти ? 3 сен 2021 в 8:34
  • Не думаю, что есть библиотека, которая соединяет иконку Avochato с Agile CRM рядом кружочков с эффектом градиента от основного цвета одной иконки до основного цвета другой. Но можно написать такую с помощью canvas как минимум точно.
    – Leonid
    3 сен 2021 в 12:17

1 ответ 1

5

как можно реализовать подобную анимацию, .....

ну и в целом нужно чтобы визуально выглядело все как на скриншоте,

А вот это как раз самоё трудоёмкое, без помощи автора вопроса.
Было бы очень неплохо, если бы при оформлении вопроса 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>

LIVE DEMO

4
  • Привет Саша, а что там должно происходить ? 4 сен 2021 в 18:52
  • да я с мобилы смотрел как обычно ..и там не работает это и потому уточнил - что там вообще - оказывается надо с PC смотреть 5 сен 2021 в 2:10
  • Спасибо большое за помощь, теперь тоже самое нужно сделать правда на Vue.js
    – Roman Ag
    14 сен 2021 в 8:05
  • 1
    галочку поставил Александр , просто тут недавно и не знал про галочку, и еще раз спасибо большое за решение и потраченное на него время, а про вью да вопрос актуальный.
    – Roman Ag
    4 окт 2021 в 7:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.