Параметры анимации

Zepto.js предоставляет компактный и лёгкий способ работы с DOM, включая возможности для анимации элементов. Анимация в Zepto основана на методе .animate(), который позволяет плавно изменять CSS-свойства элемента за заданное время. В отличие от jQuery, Zepto использует минимальный набор функций, что делает её более быстрой и лёгкой, но при этом гибкой для большинства стандартных задач.

Метод .animate() имеет следующий синтаксис:

$(selector).animate(properties, duration, easing, callback);
  • properties — объект CSS-свойств и их конечные значения.
  • duration — время анимации в миллисекундах. Можно использовать строковые сокращения 'fast' (200 мс) и 'slow' (600 мс).
  • easing — функция сглаживания изменения свойства ('linear' или 'ease-in-out').
  • callback — функция, вызываемая после завершения анимации.

Свойства для анимации

Можно анимировать любые числовые CSS-свойства, поддерживающие единицы измерения, например:

  • width, height — изменение размеров элементов.
  • opacity — прозрачность.
  • left, top, right, bottom — позиционирование.
  • margin, padding — отступы.

Например, анимация изменения ширины блока и прозрачности:

$('#box').animate({
    width: '300px',
    opacity: 0.5
}, 400, 'ease-in-out', function() {
    console.log('Анимация завершена');
});

Параметр duration

Продолжительность анимации может задаваться числом или строкой. В Zepto стандартные значения:

  • 'fast' — 200 мс
  • 'slow' — 600 мс

Любое число интерпретируется как миллисекунды.

$('#box').animate({height: '200px'}, 1000); // 1 секунда

Функции сглаживания (easing)

Zepto поддерживает несколько предустановленных функций сглаживания:

  • linear — равномерная скорость.
  • ease-in — постепенное ускорение в начале.
  • ease-out — замедление к концу.
  • ease-in-out — комбинированное ускорение и замедление.

Если easing не указан, используется 'linear'.

$('#box').animate({left: '100px'}, 500, 'ease-out');

Callback-функции

Callback-функции позволяют выполнять действия после завершения анимации. Они передаются как четвёртый аргумент метода .animate().

$('#box').animate({opacity: 0}, 300, 'linear', function() {
    $(this).css('display', 'none');
});

Callback-функция получает в контексте текущий элемент, на который применяется анимация, что удобно для последующих манипуляций с ним.

Последовательность анимаций

Для создания цепочек анимаций Zepto использует метод .animate() в комбинации с колбэками. Каждая следующая анимация вызывается внутри callback предыдущей:

$('#box').animate({width: '200px'}, 300, function() {
    $(this).animate({height: '200px'}, 300);
});

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

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

Zepto позволяет задавать относительные изменения свойств через строки с + или -:

$('#box').animate({left: '+=50px'}, 400); // сдвиг вправо на 50px
$('#box').animate({opacity: '-=0.2'}, 200); // уменьшение прозрачности на 0.2

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

Прекращение анимации

Для остановки текущей анимации используется метод .stop(). По умолчанию остановка прекращает текущую анимацию, но оставляет элемент в промежуточном состоянии:

$('#box').stop(); // останавливает текущую анимацию
$('#box').stop(true); // останавливает и завершает анимацию мгновенно

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

  • Использовать анимацию только для визуальных эффектов, не для критических операций, влияющих на логику приложения.
  • Минимизировать количество одновременно анимируемых свойств для повышения производительности.
  • Для плавных эффектов использовать opacity и transform, поскольку они обычно обрабатываются графическим ускорением.

Zepto предоставляет простой и лаконичный способ управления анимацией, сохраняя гибкость и удобство для динамических интерфейсов, особенно на мобильных устройствах с ограниченными ресурсами.

Оглавление