4

Ребята, приветствую . Подскажите пожалуйста кто на практике сталкивался с похожей задачей ? необходимо реализовать анимацию притяжения/отталкивания частиц (объектов) при наведении курсора . У объекта есть область действия. По задумке когда наводим на него - объект притягивается и следует за курсором , в определенный момент - перестает следовать за курсором и возвращается в исходное положение. можете посоветовать библиотеку или где можно посмотреть похожий пример реализации ? пока ничего толкового не нашел. Заранее спасибо )

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

0

1 ответ 1

7

Вот примерно такая может быть реализация:

let mouse = {clientX:2e9, clientY:2e9};
let elements = [...Array(10)].map((_, i) => {
    let x = innerWidth*Math.random();
    let y = innerHeight*Math.random();
    let r = Math.random()*Math.min(innerWidth, innerHeight)/10 + 20;
    return {i, x, y, x1:x, y1:y, r}
});

let el = e => `<circle id="el_${e.i}" r="${e.r}" 
    cx="${e.x}" cy="${e.y}" fill="#0006"></circle>`

document.body.innerHTML = `<svg id="svg" width="${innerWidth}" 
    height="${innerHeight}">${elements.map(el)}</svg>`; 

elements.forEach(e => e.element = document.getElementById('el_'+e.i));

addEventListener('mousemove', e => mouse = e);

requestAnimationFrame(function anim() {
    elements.forEach(e => {
       let dx = e.x - mouse.clientX; 
       let dy = e.y - mouse.clientY;
       if (dx*dx + dy*dy > e.r*e.r) {
           dx = e.x - e.x1;
           dy = e.y - e.y1;
       }
       e.element.setAttribute('cx', e.x -= dx/33);   
       e.element.setAttribute('cy', e.y -= dy/33);
    });
    requestAnimationFrame(anim);
})
body {margin:0;overflow:hidden}

7
  • 2
    Хорошо получилось! 24 сен 2020 в 14:03
  • Замечание для автора вопроса: Хорошо бы прикрутить сюда механизм остановки анимации, если курсор не наведен ни на какой элемент (mouseenter, mouseleave). Чтобы оно в фоновом режиме постоянно не крутилось. 24 сен 2020 в 14:30
  • @OPTIMUSPRIME и если элементы не двигаются, иначе на место они не вернутся 24 сен 2020 в 14:32
  • @StrangerintheQ, я обязан был так сделать
    – De.Minov
    24 сен 2020 в 15:10
  • 1
    @CbIPoK2513 сам так делал)) 24 сен 2020 в 15:14

Ваш ответ

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

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