Обратные анимации

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

Использование метода reverse

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

// Применение прямой анимации
$("#box").velocity({ opacity: 0.5, left: "200px" }, { duration: 1000 });

// Обратная анимация
$("#box").velocity("reverse");

Особенности метода reverse:

  • reverse возвращает элемент в состояние до последнего вызова .velocity().
  • Можно комбинировать с опциями duration, easing и delay, чтобы изменить параметры обратного движения.
  • Поддерживает цепочку вызовов через .then(), позволяя строить сложные последовательности анимаций.

Настройка обратной анимации через опции

Velocity.js позволяет задавать индивидуальные параметры для обратного эффекта. При этом можно:

  • Изменить скорость анимации (duration).
  • Применить иную кривую ускорения (easing).
  • Добавить задержку перед началом обратной анимации (delay).
$("#box")
  .velocity({ left: "300px", opacity: 0.2 }, { duration: 1200 })
  .velocity("reverse", { duration: 600, easing: "ease-in-out", delay: 200 });

В этом примере элемент сначала перемещается вправо с уменьшением прозрачности, а затем возвращается обратно быстрее, с другой кривой ускорения и с небольшой задержкой.

Управление обратными анимациями в последовательностях

Velocity.js поддерживает создание последовательностей анимаций через массив объектов. Обратные анимации можно встроить в последовательность, обеспечивая возврат элементов после выполнения основной анимации.

var sequence = [
  { e: "#box", p: { left: "400px" }, o: { duration: 1000 } },
  { e: "#box", p: "reverse", o: { duration: 800 } }
];

$.Velocity.RunSequence(sequence);

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

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

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

Для динамических сценариев Velocity.js предоставляет возможность программного инвертирования анимаций. Это особенно полезно, когда анимационные свойства вычисляются в реальном времени.

var animProps = { left: "500px", top: "100px", opacity: 0.3 };

// Выполнение прямой анимации
$("#box").velocity(animProps, { duration: 1000 });

// Создание обратной анимации
var reverseProps = {};
for (var prop in animProps) {
  reverseProps[prop] = $("#box").css(prop); // сохраняем текущее состояние
}

$("#box").velocity(reverseProps, { duration: 800 });

Такой подход гарантирует точное восстановление исходного состояния независимо от начальных параметров элемента.

Обратные анимации с использованием колбэков

Velocity.js поддерживает колбэки complete и progress, которые позволяют выполнять действия после завершения анимации или в процессе её выполнения. Для обратных анимаций это удобно для запуска дополнительных эффектов или синхронизации с другими элементами.

$("#box").velocity({ left: "300px" }, {
  duration: 1000,
  complete: function() {
    $(this).velocity("reverse", {
      duration: 600,
      complete: function() {
        console.log("Элемент вернулся в исходное состояние");
      }
    });
  }
});

Комбинирование reverse с loop

Velocity.js позволяет создавать циклические анимации, где элемент перемещается туда и обратно бесконечно или заданное количество раз.

$("#box").velocity({ left: "400px" }, { duration: 800, loop: 2, easing: "ease-in-out" });

Здесь элемент совершает анимацию туда и обратно два раза, автоматически используя обратные переходы без необходимости явно вызывать reverse.

Особенности работы с transform и color

Обратные анимации в Velocity.js корректно работают с любыми CSS-свойствами, включая transform и цветовые свойства. Для transform Velocity.js хранит внутренние состояния, что позволяет плавно инвертировать вращения, масштабирование и смещения:

$("#circle")
  .velocity({ rotateZ: "45deg", scale: 1.5 }, { duration: 1000 })
  .velocity("reverse", { duration: 800, easing: "ease-in-out" });

Для цвета используется плавная интерполяция RGB или HEX:

$("#box").velocity({ backgroundColor: "#ff0000" }, { duration: 1000 })
         .velocity("reverse", { duration: 800 });

Закрепление состояния после обратной анимации

Для случаев, когда требуется, чтобы элемент остался в исходном состоянии после обратной анимации, можно использовать флаг display или дополнительные стили через complete:

$("#box").velocity({ left: "300px" }, { duration: 1000 })
         .velocity("reverse", {
           duration: 800,
           complete: function() {
             $(this).css("background-color", "initial");
           }
         });

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

Оглавление