Пособие по работе с анимацией в jQuery для начинающих
Анимация в jQuery открывает большие возможности для создания динамичных и интерактивных элементов на веб-страницах. Даже самые простые эффекты способны оживить интерфейс и сделать его более привлекательным для пользователей.
В этом пособии мы познакомим вас с основными методами анимации в jQuery. Вы научитесь строить простые цепочки эффектов, контролировать их выполнение и использовать анимацию так, чтобы интерфейс выглядел живее без лишнего кода.
Практическое использование анимации в jQuery
jQuery широко используется для разработки интерактивных элементов, таких как слайдеры, меню, скроллеры и другие. До того, как мы перейдём непосредственно к анимации, я предлагаю вам взглянуть на следующие практические примеры реализации, иллюстрирующие мощь анимации в jQuery.
- Боковое скольжение при прокрутке;
- Слияние рамок изображений с помощью jQuery;
- Анимация «Ночные сны»;
- Анимация открытия занавеса с помощью jQuery;
- Создание раздвигающегося меню навигации с помощью jQuery.
Вы, как новичок, не сможете сразу повторить то, что приведено в этих примерах. Поэтому далее мы разберём основы анимации в jQuery с точки зрения новичков.
Скачать исходные коды Демонстрация
Введение в основы анимации в jQuery
Большинство дизайнеров имеют понятие об основах работы с кодом jQuery или JavaScript. Изменение видимости элемента – распространённая задача, которая встречается почти на всех веб-сайтах.
Мы можем просто скрыть/отобразить элемент, используя CSS атрибуты display или visibility. jQuery упрощает процесс, представляя две функции hide и show. Рассмотрим следующий код для отображения и скрытия HTML элемента.
$("#panel").show();
$("#panel").hide();При помощи приведённого кода элемент появляется и исчезает мгновенно. Пройдя по следующей ссылке, вы можете увидеть демонстрацию этого примера: http://jsfiddle.net/nimeshrmr/bMmFS/
В идеале, нам нужно сгладить процесс скрытия и появления элементов, используя анимацию, чтобы улучшить впечатления пользователя. jQuery предоставляет два встроенных метода для отображения и скрытия элементов с простой анимацией.
- Растворение – реализует процесс постепенного растворения элемента HTML, изменяя его свойство opacity;
- Скольжение – реализует постепенное расширение/сжатие элемента HTML, изменяя его высоту.
Давайте посмотрим, как применять эти методы, чтобы отображать и скрывать элементы с эффектом анимации.
jQuery инкапсулирует сложность анимации, предоставляя встроенные методы для решения различных задач веб-дизайна.
Растворение
Растворение обычно реализуется с помощью функций fadeIn и fadeOut. Значение свойства opacity элемента увеличивается функцией fadeIn и уменьшается функцией fadeOut. Мы также можем передать временной интервал растворения, как показано в следующем примере:
$("#panel").fadeIn("slow");
$("#panel").fadeOut("fast");У нас есть возможность выбрать предопределённые значения slow и fast в качестве интервала времени. Также мы можем передать число миллисекунд, чтобы определить длительность анимации. Вот ссылка с демонстрацией этого примера:
http://jsfiddle.net/nimeshrmr/zcRzL/
Скольжение
Функции скольжения для достижения эффекта анимации изменяют высоту элемента, вместо прозрачности. Функции имеют похожий синтаксис и работают схожим с функциями растворения образом.
При этом slideUp используется для скрытия, а slideDown для отображения элементов. Следующий код показывает основной способ использования функций скольжения:
$("#panel").slideDown("slow");
$("#panel").slideUp("fast");Параметр продолжительности также работает схожим с функциями растворения образом. Демонстрация использования функций скольжения приведена по следующей ссылке:
http://jsfiddle.net/nimeshrmr/nDz6J/
Приступаем к работе с функцией jQuery Animate
Большинство новичков думает, что разработка анимации довольно сложная задача. Определённо это сложно, если вы начинаете с чистого листа. jQuery инкапсулирует всю сложность, предоставляя единственную функцию, которая управляет всеми типами анимации.
В общем случае, анимация создаётся изменением значений атрибутов CSS. После того, как вы освоитесь с jQuery функцией animate, построение сложной анимации станет простой задачей. Давайте начнём с рассмотрения шаблона функции animate:
$( "#panel" ).animate({
// Свойства и значения CSS
}, 5000, "linear", function() {
// Обработка завершения анимации
});Этот код иллюстрирует шаблон использования функции animate. Первый параметр содержит все свойства и значения CSS.
Следующий необязательный параметр определяет длительность анимации. Третий параметр определяет способ растягивания (тип анимации), а последний параметр определяет анонимную функцию, вызываемую при завершении анимации.
Посмотрев на шаблон использования, мы можем перейти к созданию чего-нибудь практического с помощью анимации jQuery.
Анимация частей изображения
В этом разделе мы посмотрим на то, как можно отобразить изображение, применив анимацию к отдельным его частям. Сначала нам нужно разделить изображение на несколько маленьких. Вы можете использовать технику разделения изображений, представленную в этой статье: «Создание головоломки, используя jQuery и PHP».
Вот изображение, которое мы будем использовать для анимации:
В исходных кодах к этой статье вы найдёте 12 изображений, получившихся после разделения. Каждое изображение будет иметь размеры 150 на 150 пикселей. Они разделены на два ряда по 6 штук. Все 6 изображений каждого ряда будут расположены в правом углу страницы, используя следующий код:
<div id="img_panel">
<div class="img_item"><img src="1.jpg" /></div>
<div class="img_item"><img src="2.jpg" /></div>
<div class="img_item"><img src="3.jpg" /></div>
<div class="img_item"><img src="4.jpg" /></div>
<div class="img_item"><img src="5.jpg" /></div>
<div class="img_item"><img src="6.jpg" /></div>
<div class="img_item2"><img src="7.jpg" /></div>
<div class="img_item2"><img src="8.jpg" /></div>
<div class="img_item2"><img src="9.jpg" /></div>
<div class="img_item2"><img src="10.jpg" /></div>
<div class="img_item2"><img src="11.jpg" /></div>
<div class="img_item2"><img src="12.jpg" /></div>
</div>Здесь приведены 12 изображений, расположенных в два ряда при помощи двух классов CSS img_item и img_item2. Теперь посмотрим на код CSS для позиционирования изображений:
.img_item{
position: absolute;
right: 0px;
opacity:0;
top :0;
}
.img_item2{
position: absolute;
right: 0px;
opacity:0;
top:150px;
}Согласно приведённому выше коду все изображения в каждом ряду будут скрыты и расположены поверх друг друга, используя абсолютное позиционирование. Теперь мы можем посмотреть на код jQuery для генерации изображения с помощью анимации:
$(document).ready(function(){
var left = 0;
$(".img_item").each(function(i,val){
$(this).animate({
left: left,
opacity: 1
}, 1500 );
left += 150;
});
left = 0;
$(".img_item2").each(function(i,val){
$(this).animate({
left: left,
opacity: 1
}, 1500 );
left += 150;
});
});Итак, у нас есть два селектора для отбора элементов классов img_item и img_item2. Затем мы применяем функцию animate к отдельным элементам, чтобы плавно изменить значение свойства opacity на 1, а свойство left изменяем относительно положения предыдущей части изображения. По сути, анимация будет применена ко всем частям изображения одновременно, и в результате получится нечто подобное:
Мы можем использовать похожие эффекты внутри слайдеров, заставок, галерей изображений. Здесь приведена демонстрация предыдущего примера.
Теперь вы знаете основы работы с функцией animate. Давайте глубже посмотрим на аспекты анимации, в частности на более детальные настройки.
Разработка последовательности эффектов
В предыдущем примере анимация применялась ко всем элементам сразу после загрузки страницы. Но иногда нам нужно применять эффекты последовательно, когда анимация каждого элемента начинается после завершения анимации предыдущего элемента. Итак, попробуем загрузить то же самое изображение, используя последовательность эффектов. Начнём с HTML кода:
<div id="img_panel">
<div class="img_item"><img src="1.jpg" /></div>
<div class="img_item"><img src="2.jpg" /></div>
<div class="img_item"><img src="3.jpg" /></div>
<div class="img_item"><img src="4.jpg" /></div>
<div class="img_item"><img src="5.jpg" /></div>
<div class="img_item"><img src="6.jpg" /></div>
<div class="img_item"><img src="7.jpg" /></div>
<div class="img_item"><img src="8.jpg" /></div>
<div class="img_item"><img src="9.jpg" /></div>
<div class="img_item"><img src="10.jpg" /></div>
<div class="img_item"><img src="11.jpg" /></div>
<div class="img_item"><img src="12.jpg" /></div>
</div>Единственное отличие от предыдущей версии – использование одного класса CSS вместо двух классов для рядов. Эта реализация сгенерирует ряды, используя код jQuery, вместо их жёсткого кодирования с помощью CSS классов.
Код CSS для реализации этого примера будет таким же, как и в предыдущем случае. Теперь посмотрим на код jQuery для создания последовательности эффектов:
$(document).ready(function(){
var left = 0;
var items = $(".img_item");
animateImg(items,0,0,0);
});После загрузки страницы мы выбираем все элементы изображения, используя класс img_item. Затем мы передаём эти элементы в функцию animateImg для создания анимации. Следующий код демонстрирует реализацию функции animateImg:
var indexNum = 1;
var animateImg = function(items,left,height,indexNum){
if(items.length >= indexNum){
var item = items.get(indexNum);
$(item).animate({
left: left,
top : height,
opacity: 1
}, 1500 ,function() {
left += 150;
indexNum++;
if(indexNum % 6 == 0){
left = 0;
height += 150;
}
animateImg(items,left,height,indexNum);
});
}
};Функция animateImg использует четыре параметра. Первый параметр определяет коллекцию элементов изображения. Второй и третий параметры определяют значения свойств left и top для позиционирования на экране.
Изначально эти два значения устанавливаются в 0, чтобы расположить изображение в верхнем левом углу экрана. Четвёртый параметр – это порядковый номер изображения для разделения их по рядам.
Сначала мы проверяем, достигли ли конца массива элементов, с помощью условия if. Затем выбираем изображение из массива по заданному порядковому номеру.
После этого вызываем функцию animate длительностью 1500 миллисекунд. Наконец мы увеличиваем порядковый номер, чтобы выбрать следующий элемент из массива.
В этом примере у нас два ряда по 6 изображений в каждом. Поэтому мы используем деление по модулю порядкового номера, чтобы проверить, не достигли ли мы конца ряда. В этом случае мы увеличиваем значение top для следующего изображения, чтобы динамически создавать ряды.
Наконец мы рекурсивно вызываем функцию animateImg, чтобы осуществить перебор всех элементов и сгенерировать полную картинку. Следующее изображение демонстрирует последовательность эффектов в действии.
Здесь вы найдёте демонстрацию предыдущего примера.
Как видите, мы использовали функцию завершения функции animate, чтобы выполнять анимацию следующего элемента. Поэтому каждый этап анимации начинается после завершения предыдущего. Мы можем достигнуть похожей функциональности, используя очередь функций animate.
Цепочки эффектов
До сих пор мы создавали по одному эффекту для каждого элемента. В более сложных задачах нам потребуется соединить несколько эффектов для каждого элемента в цепочку. Поэтому давайте изменим предыдущий пример, добавив цепочки эффектов:
var animateImg = function(items,left,height,indexNum){
if(items.length >= indexNum){
var item = items.get(indexNum);
$(item).animate({
left: left,
top : height,
opacity: 1
}, 1500 ,function() {
left += 150;
indexNum++;
if(indexNum % 6 == 0){
left = 0;
height += 150;
}
console.log(items);
animateImg(items,left,height,indexNum);
}).animate({ left:left+150}, 1500);
}
};Мы можем создавать цепочки эффектов для элемента, вызывая функцию animate несколько раз при помощи точечной нотации. В предыдущем примере мы начинаем другую анимацию после первой, используя функцию .animate. Мы можем добавить любое количество эффектов, используя эту технику. Здесь есть демонстрация цепочки эффектов.
Заключение
В этой статье мы рассмотрели способы построения анимации с помощью jQuery функции animate. Мы посмотрели на различные практические приёмы применения анимации к частям изображения, чтобы сгенерировать полную картинку.
Теперь вы можете продолжить изучение методов улучшенной анимации в jQuery, перечисленных в следующем списке:
- Очереди эффектов;
- Управление процессом анимации;
- Управление шагами анимации;
Надеюсь, вы найдёте время и создадите прекрасные анимационные эффекты вроде тех, что мы перечислили в начале статьи. Не стесняйтесь делиться вашим опытом и обсуждать примеры в комментариях.
Комментарии