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 = progress²).
Cubic — кубическая функция (delta = progress³).
Quart — delta = progress⁴.
Quint — delta = progress⁵.
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. Еще я постоянно зависаю на твиттере, так что следуйте за мной…