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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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