Numeric свойства

Velocity.js предоставляет гибкий и высокопроизводительный способ анимации числовых свойств элементов DOM. Числовые свойства — это любые CSS-свойства или атрибуты, которые можно выразить через числа, включая width, height, opacity, translateX, rotate, scale и многие другие. Работа с ними в Velocity.js отличается простотой и расширяемыми возможностями по сравнению с обычным CSS-анимированием.

Основы синтаксиса

Анимация числового свойства задаётся с помощью объекта, где ключ — это название свойства, а значение — конечное состояние анимации. Пример:

Velocity(element, {
    width: "300px",
    opacity: 0.5
}, {
    duration: 1000,
    easing: "ease-in-out"
});

В этом примере width и opacity изменяются плавно за 1000 миллисекунд с применением кривой ускорения ease-in-out.

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

  • Единицы измерения автоматически определяются Velocity.js, если указано строковое значение ("300px", "50%").
  • Можно использовать числовые значения без единиц, например, opacity: 0.5.
  • Любое числовое свойство поддерживает относительные значения, например "+=50" или "-=20".

Относительные значения

Velocity.js позволяет задавать числовые свойства относительно текущего состояния элемента. Это особенно удобно для создания динамических эффектов без необходимости вычислять абсолютные значения:

Velocity(element, {
    width: "+=50px",
    height: "-=20px"
}, {
    duration: 800
});

Здесь width увеличится на 50 пикселей, а height уменьшится на 20 пикселей относительно исходных размеров.

Особенности относительных значений:

  • Поддерживаются знаки + и -.
  • Можно комбинировать с процентами, например: "+=10%".
  • Velocity.js автоматически вычисляет промежуточные значения для плавного перехода.

Анимация нескольких числовых свойств

Velocity.js позволяет анимировать одновременно несколько свойств с разными параметрами. Для этого используется расширенный синтаксис, где каждому свойству можно задать свой объект с value, duration, easing и delay:

Velocity(element, {
    width: { value: "400px", duration: 1200, easing: "ease-in" },
    opacity: { value: 0.2, duration: 800, easing: "linear", delay: 200 }
});

Преимущества такого подхода:

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

Поддержка трансформаций

Velocity.js умеет напрямую работать с CSS-трансформациями (translateX, translateY, rotate, scale). Эти свойства тоже числовые, но требуют специального синтаксиса:

Velocity(element, {
    translateX: "100px",
    rotateZ: "45deg",
    scale: 1.5
}, {
    duration: 1000,
    easing: "ease-out"
});

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

  • Все трансформации объединяются в одну матрицу для оптимизации.
  • Velocity.js поддерживает относительные значения: translateX: "+=50px".
  • Можно комбинировать вращение, масштаб и перемещение без конфликтов.

Кастомные числовые свойства

Velocity.js позволяет анимировать произвольные числовые свойства через tween-функции. Это актуально для анимации данных внутри JavaScript, не связанных напрямую с CSS:

Velocity({progress: 0}, {progress: 100}, {
    duration: 1500,
    progress: function(elements, percentComplete) {
        console.log(percentComplete); // от 0 до 100
    }
});

Преимущества кастомных числовых свойств:

  • Можно синхронизировать анимацию с другими процессами.
  • Доступ к текущему состоянию через progress callback.
  • Поддержка любых числовых диапазонов.

Использование easing для числовых свойств

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

Velocity(element, {
    height: "500px"
}, {
    duration: 1000,
    easing: [ 500, 20 ] // spring: амплитуда и частота
});

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

  • Применяются к каждому числовому свойству отдельно.
  • Позволяют создавать физически реалистичные эффекты.
  • Кастомные кривые можно комбинировать с относительными значениями.

Контроль и управление анимацией

Velocity.js предоставляет API для остановки, повторения и последовательного запуска анимаций числовых свойств:

Velocity(element, "stop"); // немедленно остановить все анимации
Velocity(element, "reverse"); // запустить анимацию в обратном направлении
Velocity(element, { width: "0px" }, { duration: 500 }); // новое значение

Особенности управления:

  • stop можно применять к конкретной очереди.
  • reverse сохраняет текущее состояние числового свойства.
  • Поддерживается управление через очереди анимаций.

Практические советы

  1. Использовать относительные значения для динамических интерфейсов.
  2. Разделять свойства на отдельные объекты, если требуется разная продолжительность или easing.
  3. Трансформации лучше анимировать через Velocity, чем через прямой CSS, для оптимизации производительности.
  4. Кастомные числовые свойства полезны для визуализации прогресса, таймеров или интерактивных элементов.
  5. Проверять единицы измерения, особенно при комбинации px, % и безразмерных значений.

Velocity.js делает работу с числовыми свойствами максимально гибкой, обеспечивая плавность, контроль и точность, недостижимую стандартными CSS-транзишнами.

Оглавление