Первая анимация

Velocity.js — это библиотека для создания высокопроизводительных анимаций в JavaScript, которая сочетает в себе гибкость jQuery-анимаций с ускорением через requestAnimationFrame. В отличие от CSS-анимаций, Velocity.js позволяет контролировать каждое свойство объекта в реальном времени и обеспечивает синхронизацию сложных последовательностей.

Подключение и базовый синтаксис

Для использования Velocity.js необходимо подключить библиотеку к проекту. После этого основной метод Velocity применяется к DOM-элементу следующим образом:

Velocity(element, {
  properties: {
    translateX: "100px",
    opacity: 0.5
  },
  options: {
    duration: 1000,
    easing: "ease-in-out",
    complete: function() {
      console.log("Анимация завершена");
    }
  }
});

Ключевые моменты синтаксиса:

  • element — объект DOM или jQuery-подобная коллекция.
  • properties — набор CSS-свойств и их конечных значений.
  • options — объект с настройками: длительность (duration), функция сглаживания (easing) и callback после завершения (complete).

Velocity.js позволяет задавать как абсолютные значения (100px), так и относительные ("+=50px") для более динамичных анимаций.

Анимация позиции и прозрачности

Velocity.js поддерживает большинство CSS-свойств, включая трансформации и прозрачность. Пример перемещения и изменения прозрачности:

Velocity(document.getElementById("box"), {
  translateX: "200px",
  translateY: "50px",
  opacity: 0.3
}, {
  duration: 1200,
  easing: "easeOutQuart"
});

Особенности работы с трансформациями:

  • Velocity.js использует GPU-ускорение через translate3d для плавных анимаций.
  • Можно комбинировать несколько трансформаций в одной анимации.
  • Поддерживаются относительные значения, что позволяет задавать движение относительно текущего состояния элемента.

Создание цепочек анимаций

Одно из мощных преимуществ Velocity.js — возможность последовательного запуска нескольких анимаций с использованием Promises или метода then:

Velocity(box, { opacity: 0.5 }, { duration: 500 })
  .then(() => Velocity(box, { translateX: "100px" }, { duration: 500 }))
  .then(() => Velocity(box, { scale: 1.5 }, { duration: 500 }));

Преимущества цепочек:

  • Чёткая последовательность анимаций.
  • Возможность вставки функций обратного вызова после каждой анимации.
  • Простота управления временными интервалами без использования setTimeout.

Настройка easing и duration

Velocity.js поддерживает стандартные кривые анимации (linear, ease-in, ease-out) и расширенные варианты (easeInQuart, easeOutBounce). Длительность анимации задаётся в миллисекундах и может быть динамической:

Velocity(element, { opacity: 1 }, {
  duration: 800,
  easing: "easeOutElastic"
});

Советы по выбору easing:

  • Для плавных появлений и исчезновений лучше использовать easeIn/easeOut.
  • Для имитации физики (подпрыгивание, удар) — spring, easeOutBounce.
  • Velocity.js позволяет задавать собственные кривые через массивы вида [0.25, 0.1, 0.25, 1] для точного контроля.

Использование циклов и повторений

Повторение анимации осуществляется с помощью параметра loop. Можно задать количество циклов или бесконечный цикл:

Velocity(box, { rotateZ: "360deg" }, { duration: 1000, loop: 3 });
Velocity(box, { translateY: "50px" }, { duration: 500, loop: true });
  • loop: true — бесконечное повторение.
  • loop: n — повторение n раз.
  • Позволяет создавать эффект постоянного движения или мигания без дополнительного кода.

Управление состоянием анимации

Velocity.js предоставляет методы для управления уже запущенными анимациями:

Velocity(element, "pause");    // приостановка
Velocity(element, "resume");   // возобновление
Velocity(element, "stop");     // остановка и сброс
Velocity(element, "finish");   // завершение всех анимаций

Применение:

  • Позволяет синхронизировать анимации с событиями пользователя.
  • Удобно для интерактивных интерфейсов, где элемент должен реагировать на действия пользователя.

Примеры практических анимаций

Появление элемента с масштабированием:

Velocity(box, { opacity: 1, scale: 1 }, { duration: 600, easing: "easeOutBack" });

Сложная последовательность:

Velocity(box, { translateY: "-50px", opacity: 0 }, { duration: 400 })
  .then(() => Velocity(box, { translateY: "0px", opacity: 1 }, { duration: 400 }));

Анимация нескольких элементов одновременно:

Velocity(document.querySelectorAll(".item"), { translateX: "50px" }, { duration: 700, stagger: 100 });
  • stagger добавляет задержку между элементами, создавая эффект «волны».
  • Полезно для списков и галерей.

Velocity.js обеспечивает полный контроль над анимацией: от простых движений и прозрачности до сложных цепочек с физикой и интерактивными эффектами. Библиотека совместима с современными браузерами и оптимизирована для высокой производительности, позволяя создавать динамичные интерфейсы без использования CSS-анимаций.

Оглавление