Привязка к движению мыши

Anime.js позволяет создавать динамичные анимации, которые реагируют на действия пользователя, включая движение мыши. Для этого используется отслеживание координат курсора и передача их значений в параметры анимации. Основная идея — связывать свойства анимируемого объекта с текущей позицией мыши на странице.

Отслеживание координат мыши

Для получения координат курсора используется событие mousemove:

document.addEventListener('mousemove', function(event) {
    const mouseX = event.clientX;
    const mouseY = event.clientY;
});
  • event.clientX — горизонтальная координата мыши относительно окна браузера.
  • event.clientY — вертикальная координата мыши относительно окна браузера.

Эти значения можно использовать напрямую или нормализовать для дальнейших вычислений.

Привязка позиции объекта к координатам мыши

Самый простой способ — напрямую изменять свойства translateX и translateY элемента:

const box = document.querySelector('.box');

document.addEventListener('mousemove', (event) => {
    anime({
        targets: box,
        translateX: event.clientX - box.offsetWidth / 2,
        translateY: event.clientY - box.offsetHeight / 2,
        duration: 300,
        easing: 'easeOutQuad'
    });
});
  • duration задаёт плавность движения.
  • easing контролирует кривую анимации, позволяя избежать резких рывков.

Интерполяция и сглаживание движения

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

let mouseX = 0, mouseY = 0;
let currentX = 0, currentY = 0;

document.addEventListener('mousemove', (event) => {
    mouseX = event.clientX;
    mouseY = event.clientY;
});

function animate() {
    currentX += (mouseX - currentX) * 0.1;
    currentY += (mouseY - currentY) * 0.1;

    anime.set('.box', {
        translateX: currentX - 50,
        translateY: currentY - 50
    });

    requestAnimationFrame(animate);
}

animate();

Здесь 0.1 — коэффициент сглаживания, который регулирует скорость «догоняющего» движения.

Привязка свойств кроме позиции

Anime.js позволяет анимировать практически любое CSS-свойство, включая:

  • scale — изменение размера при движении мыши;
  • rotate — поворот элемента в зависимости от направления движения;
  • backgroundColor — цветовой отклик на позицию курсора.

Пример поворота элемента в зависимости от координат:

document.addEventListener('mousemove', (event) => {
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;
    const deltaX = event.clientX - centerX;
    const deltaY = event.clientY - centerY;

    anime({
        targets: '.box',
        rotate: deltaX * 0.1,
        scale: 1 + Math.abs(deltaY / window.innerHeight),
        duration: 200,
        easing: 'easeOutQuad'
    });
});

Использование данных мыши для сложных анимаций

Можно комбинировать несколько эффектов, создавая интерактивные системы:

  • Параллакс-эффект: разные слои двигаются с разной скоростью в зависимости от координат мыши.
  • Анимированные линии и кривые: изменение координат control points в SVG на основе движения мыши.
  • Динамическая цветовая гамма: цвет или прозрачность элементов плавно меняется при перемещении курсора.

Пример параллакса с несколькими слоями:

const layers = document.querySelectorAll('.layer');

document.addEventListener('mousemove', (event) => {
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;

    layers.forEach((layer, index) => {
        const speed = (index + 1) * 0.05;
        anime({
            targets: layer,
            translateX: (event.clientX - centerX) * speed,
            translateY: (event.clientY - centerY) * speed,
            duration: 300,
            easing: 'easeOutQuad'
        });
    });
});

Каждый слой двигается с разной амплитудой, создавая ощущение глубины.

Интеграция с другими событиями

Анимации, привязанные к мыши, можно комбинировать с кликами, наведением и скроллом. Например, при наведении элемент может увеличиваться, а при движении — следовать за курсором. Это достигается объединением обработчиков событий:

const box = document.querySelector('.box');

box.addEventListener('mouseenter', () => {
    anime({
        targets: box,
        scale: 1.2,
        duration: 300,
        easing: 'easeOutQuad'
    });
});

box.addEventListener('mouseleave', () => {
    anime({
        targets: box,
        scale: 1,
        duration: 300,
        easing: 'easeOutQuad'
    });
});

Одновременное использование событий мыши и anime.js открывает возможности для создания интерактивных интерфейсов с плавной и отзывчивой анимацией.

Оглавление