Антон Шевчук // Web-разработчик

jQuery для начинающих. Часть 5. Эффекты // JavaScript

Продолжаем изучать jQuery. Переходим к эффектам…

Материалы данной статьи включены в учебник «jQuery для начинающих». Учебник распространяется бесплатно, и сопровождается интерактивными примерами.

Хотел было написать огромную статью о эффектах, с примерами той или иной анимации, но получилось скорее заметка, которая поможет вам понять суть эффектов в jQuery

Animate

Запомните – все эффекты анимации в jQuery крутятся вокруг функции animate – данная функция берет один или несколько CSS свойств элемента и изменяет их исходного до конечного за N-ое количество итераций (количество итераций зависит от указанного времени, но не реже одной итерации в 13ms (если я правильно накопал это значение)).

Функция animate понимает следующие параметры:

  • params – описание CSS свойств элемента, до которых будет происходить анимация (т.е. есть у нас div с высотой 100px – говорим animate({height:200}) – и высота плавно изменяется до 200px)
  • duration – скорость анимации – указываем в миллисекундах, или используя ключевые слова “fast” = 200ms, “normal” = 400ms или “slow” = 600ms
  • easing – указываем какую функцию будем использовать для наращивания значений, на выбор “linear” или “swing” (хотите больше см. Easing Plugin)
  • callback – функция, которая будет вызвана после окончания анимации

Альтернативный способ инициализации:

  • params – описание CSS свойств элемента, до которых будет происходить анимация
  • options – объект настроек:
    • duration – см. выше
    • easing – см. выше
    • complete – аналогичен ранее описанному callback-параметру
    • step – еще одна callback функция – отвечает за пошаговое изменение параметров – пример ниже
    • queue – флаг очереди, если выставить в false – то данная анимация будет игнорировать очередь и запустится сразу

Если заглянуть в руководство пользователя – то в разделе эффектов можно найти еще несколько вспомогательных функций:

  • show( ) – отображает выбранные элементы
  • hide( ) – скрывает выбранные элементы
  • toggle( ) – переключатель между show/hide
  • slideDown( speed, callback ) – выдвигает объект(ы) вниз – увеличивает высоту от 0 до 100%
  • slideUp( speed, callback ) – задвигает объект(ы) вверх – уменьшает высоту от 100% до 0
  • slideToggle( speed, callback ) – переключатель между slideDown/slideUp
  • fadeIn( speed, callback ) – отображает выбранные элементы – изменяет прозрачность элементов
  • fadeOut( speed, callback ) – скрывает выбранные элементы – изменяет прозрачность элементов
  • fadeTo( speed, opacity, callback )- изменяет прозрачность элементов до указанного значения

Самые простые методы hide и show обходятся без функции animate, т.к. манипулируют лишь атрибутом display (демо):

// вызов метода 
$('#my').hide();

// аналогичен
$('#my').css({display:"none"});

// но если задать скорость анимации либо callback функцию,
// то будут изменятся значения height и width

Как я и говорил ранее – остальные вспомогательные функции лишь обертки над animate, приведу пример (демо):

// вызов метода 
$('#my').slideUp();

// аналогичен
$('#my').animate({height:0,padding:0}, function(){
	$(this).css({display:"none"});
});

// вызов метода 
$('#my').fadeOut();

// аналогичен
$('#my').animate({opacity:0}, function(){
	$(this).css({display:"none"});
});

В действительности, реализация данных методов чуть более сложная, но сути это не меняет

Стоит так же обратить внимание на способ задания параметров CSS для animate:

// установит прозрачность элемента в ноль, прозрачность изменяется от 0 до 1
$('#my').animate({opacity:0});

// наращиваем высоту элемента на 200px
$('#my').animate({height:'+=200px'});

// уменьшаем ширину элемента на 50px
$('#my').animate({width:'-=50px'});

// наращиваем высоту элемента до 20in
$('#my').animate({height:'20in'});

Step Callback

Не стоит забывать и о step-функции, приведу пример использования (демо):

var customStep = function(now, obj) {
	now; // текущее значение анимированного параметра
	
	obj.elem;  // объект анимации
	obj.prop;  // параметр который анимируется
	obj.start; // начальное значение
	obj.end;   // конечное значение
	
	obj.pos;   // коэффициент, изменяется от 0 до 1
	           // значение now вычисляется как now = (obj.end - obj.start) * obj.pos
	
	obj.options; // опции настроек анимации
	
	// сделаем вывод текста
	$(this).html('Height: '+now+obj.unit);
}
$("p").animate({height: height}, {step:customStep});

Отключение

Иногда требуется отключить всю анимацию (для дебага к примеру) – воспользуйтесь следующей конструкцией:

jQuery.fx.off = true;

В очередь, … ©

Немного о очередности работы функции animate – большинство моих читателей уже знакомо с организацией последовательной анимации – для этого мы можем использовать цепочку вызовов:

$('.panel').animate({left:'+=100'})
	  .animate({top:'+=100'}); // данная анимация добавляется в очередь на выполнение

Для параллельного запуска анимации, необходимо будет внести следующие изменения:

$('.panel').animate({left:'+=100'})
	  .animate({top:'+=100'}, {queue:false});  // таким образом мы указываем, что очередь можно игнорировать

Так же есть функции stop – с помощью данной функции мы можем остановить выполнение текущей либо всех анимаций (демо):

$('.panel').stop();            // останавливаем выполнение текущей анимации
$('.panel').stop(true);        // останавливаем выполнение текущей анимации и всех последующих (чистим очередь)
$('.panel').stop(true, true);  // останавливаем выполнение текущей анимации и всех последующих, но применяем результат текущей
$('.panel').stop(false, true); // останавливаем выполнение только текущей анимации, и применяем её результат

Как очистить очередь мы разобрались, теперь можно чуть-чуть копнуть поглубже, и разобраться как можно управлять очередью. Для этой цели в jQuery служат следующие функции:

  • queue( name ) – возвращает очередь – массив функций
  • queue( name, callback ) – добавляет функцию в очередь
  • queue( name, queue ) – заменяет текущую очередь новой
  • dequeue( name ) – берет первую функцию из очереди и выполняет её

По умолчанию все манипуляции производятся с очередью “fx” – т.е. очередь со всей анимацией

Данные функции могут понадобиться для управления анимации (демо):

$(".panel").queue('fx'); // возвращает очередь эффектов анимации
$(".panel").data('fxqueue'); // аналогично предыдущему вызову

$(".panel").queue(function(){ /*...*/ }); // добавляет новую функцию в очередь анимации

$(".panel").queue("fx", []); // данный вызов очищает очередь анимации - мы устанавливает пустой массив в качестве новой очереди

$(".panel").dequeue(); // запускает первый элемент из очереди

Или вот пример реализации очереди отличной от “fx”:

var queue = $(".panel").queue('custom');
queue.push(function(){
	$(".panel").css({background:'#ffdddd'})
		.dequeue('custom');
});
	
$(".panel").queue('custom', queue)
	.dequeue('custom');

Пока я вижу одну недоработку – все анимации используют очередь “fx”, и никак изменить это нельзя, т.е. анимация либо идет вместе со всеми в этой очереди, либо сама по себе запускается сразу, назначить анимации другую очередь нельзя

Easing

Возвращаясь к анимации, думаю стоит обратить внимание на способ “наращивания” значений CSS свойств, происходит это следующим образом:

param = (to − from) × delta + from;

// from — начальное значение параметра
// to — конечное значение параметра
// delta — коэффициент, при 0 мы получаем начальное значение параметра, а при 1 — конечное

По умолчанию, для изменение delta используется линейное уравнение, опционально можно указать ‘swing’, но используя плагин easing, можно разнообразить этот список (демо) :

  • Quad — квадратичная функция (delta = progress2).
  • Cubic — кубическая функция (delta = progress3).
  • Quart — delta = progress4.
  • Quint — delta = progress5.
  • Expo — экспоненциальная функция (delta = 2(progress − 1) × 8)
  • Circ — четверть окружности (delta = 1 − sin(acos(progress)))
  • Sine — кусок синусоиды (delta = 1 − sin((1 − progress) × π / 2))
  • Back — сначала оттягивает delta в минус, а потом плавно доводит до 1
  • Bounce — прыгающий переход
  • Elastic — эластичный переход (резинка)

Данные функции оперируют следующими параметрами (именование параметров из jquery.js):

  • p – коэффициент прохождения анимации, изменяется от 0 до 1
  • n – коэффициент наложенный на время (p*duration)
  • firstNum – начальное значение = 0
  • diff – изменение значения = 1

При подготовке данного раздела использовались материалы из статьи Анимация в MooTools. Основы и не только

Плагины

Есть несколько плагинов, который расширяют функционал animate (возможно вы используете еще какие – то отпишитесь):

  • easing – дополнительные уравнения для easing (позволит разнообразить анимацию)
  • color – позволяет плавно изменять цвет шрифта/фона/границ
  • backgroundPosition – с его помощью можем анимировать фоновое изображение элементов

Вывод

Вывод напрашивается сам собой – большинство плагинов для анимации – это лишь обертки над animate, и следовательно не всегда стоит подключать сторонние плагины для реализации своей цели.

P.S. Для всех моих читателей – RSS канала доступен по адресу http://anton.shevchuk.name/feed/ (единственный верный).

P.P.S. Еще я постоянно зависаю на твиттере, так что следуйте за мной…

Цикл статей

  1. jQuery для начинающих
  2. jQuery для начинающих. Часть 2. JavaScript Меню
  3. jQuery для начинающих. Часть 3. AJAX
  4. jQuery для начинающих. Часть 4. Селекторы
  5. jQuery для начинающих. Часть 5. Эффекты
  6. jQuery для начинающих. Часть 6. События
  7. jQuery для начинающих. Часть 7. Пишем плагины
  8. jQuery для начинающих. Часть 8. Расширяем фильтры
  9. jQuery для начинающих. Часть 9. Пишем плагины анимации

© Антон Шевчук 2007-2016