Как применить анимацию притяжения/отталкивания частиц?

260

20 апреля 2022, 02:00

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

Answer 1

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

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);
})