Использование с Three.js

Для работы с анимациями в Three.js библиотека anime.js предоставляет гибкий и удобный инструмент для плавного изменения свойств объектов сцены. Для начала необходимо подключить anime.js через CDN или npm:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

или через npm:

npm install animejs

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

Анимация позиции объектов

Объекты в Three.js имеют свойства position.x, position.y и position.z, которые можно анимировать через anime.js. Пример плавного перемещения куба:

const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({ color: 0xff0000 })
);
scene.add(cube);

anime({
    targets: cube.position,
    x: 5,
    y: 2,
    z: -3,
    duration: 2000,
    easing: 'easeInOutQuad'
});

Ключевые моменты:

  • targets может принимать объект или массив объектов.
  • duration задаёт время анимации в миллисекундах.
  • easing определяет кривую ускорения/замедления движения.

Вращение и масштабирование

Для плавного вращения объекта используется свойство rotation:

anime({
    targets: cube.rotation,
    x: Math.PI * 2,
    y: Math.PI,
    duration: 3000,
    loop: true,
    easing: 'linear'
});

Для масштабирования применяется объект scale:

anime({
    targets: cube.scale,
    x: 2,
    y: 0.5,
    z: 2,
    duration: 1500,
    direction: 'alternate',
    loop: true,
    easing: 'easeInOutSine'
});

Особенности:

  • loop: true позволяет анимации повторяться бесконечно.
  • direction: 'alternate' меняет направление анимации на обратное после завершения.

Анимация цвета материала

Anime.js может анимировать свойства цвета с использованием формата hex или rgb. Пример плавной смены цвета материала:

anime({
    targets: cube.material.color,
    r: 0,
    g: 1,
    b: 0,
    duration: 2000,
    loop: true,
    direction: 'alternate',
    easing: 'easeInOutQuad'
});

Важно: цвет в Three.js хранится как объект THREE.Color, поэтому свойства r, g, b изменяются в диапазоне от 0 до 1.

Синхронизация с рендер-циклом

Anime.js работает вне рендер-цикла Three.js, но для корректного отображения анимации необходимо обновлять сцену в animate:

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

Все анимации anime.js автоматически обновляют свойства объектов, поэтому достаточно лишь рендерить сцену.

Последовательные и параллельные анимации

Anime.js поддерживает таймлайны, позволяющие комбинировать несколько анимаций:

const timeline = anime.timeline({
    loop: true,
    easing: 'easeInOutQuad'
});

timeline
  .add({
      targets: cube.position,
      x: 3,
      duration: 1000
  })
  .add({
      targets: cube.rotation,
      y: Math.PI,
      duration: 1000
  }, '-=500') // overlap предыдущей анимации на 500ms
  .add({
      targets: cube.scale,
      x: 1.5,
      y: 1.5,
      z: 1.5,
      duration: 800
  });
  • Таймлайн позволяет управлять синхронизацией и задержками.
  • Символ '-=500' задаёт смещение начала текущей анимации на 500 мс раньше завершения предыдущей.

Анимация группы объектов

Для анимации нескольких объектов одновременно используется массив целей:

const spheres = [];
for (let i = 0; i < 5; i++) {
    const sphere = new THREE.Mesh(
        new THREE.SphereGeometry(0.5, 32, 32),
        new THREE.MeshStandardMaterial({ color: 0x0000ff })
    );
    sphere.position.x = i * 2;
    scene.add(sphere);
    spheres.push(sphere);
}

anime({
    targets: spheres.map(s => s.position),
    y: 3,
    duration: 2000,
    direction: 'alternate',
    loop: true,
    easing: 'easeInOutSine'
});

Особенности:

  • Использование map позволяет передать массив объектов, у которых будут изменяться одинаковые свойства.
  • Для разных свойств можно использовать массив объектов с индивидуальными параметрами.

Анимация кривых движения

Можно создавать сложные пути движения с помощью функций:

anime({
    targets: cube.position,
    x: [
        { value: 5, duration: 1000 },
        { value: -5, duration: 1000 }
    ],
    y: [
        { value: 2, duration: 1000 },
        { value: 0, duration: 1000 }
    ],
    easing: 'easeInOutQuad',
    loop: true
});

Ключевые моменты:

  • Массив объектов для x, y, z позволяет задавать пошаговую анимацию.
  • Можно комбинировать с таймлайнами для создания сложных динамических сцен.

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

Анимации можно запускать или изменять по событиям, например при клике мыши:

window.addEventListener('click', () => {
    anime({
        targets: cube.rotation,
        y: cube.rotation.y + Math.PI,
        duration: 800,
        easing: 'easeInOutCubic'
    });
});

Особенности:

  • Anime.js поддерживает динамическое добавление новых анимаций в любой момент.
  • Можно комбинировать анимации изменения позиции, цвета и масштаба одновременно.

Советы по оптимизации

  • Для сложных сцен лучше избегать анимации большого числа объектов через anime.js; использовать Three.js InstancedMesh и шейдерные анимации.
  • Настройка easing и duration помогает создать естественные движения без резких скачков.
  • Таймлайны позволяют управлять сценой централизованно, избегая разрозненных анимаций и конфликтов свойств.

Эти приёмы обеспечивают гибкую интеграцию anime.js с Three.js, позволяя создавать динамические и плавные 3D-анимации без необходимости вручную вычислять каждое кадрирование.

Оглавление