Анимация с jQuery: 7-шаговая программа (jquery animate)

jQuery

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

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Предисловие автора

Анимация: концепция, которая часто вызывает противоположные реакции людей. Некоторые хвалят ее полезность, в то время как прочие клянут за слишком частое применение. Тем не менее, правильно используемая анимация часто оживляет пользовательский интерфейс и делает его гораздо более привлекательным и аккуратным. В этом учебнике мы начнем с основ jQuery, затем узнаем, как создать свою первую анимацию (jquery animate), затем как построить эффекты и, наконец, разработаем нечто действительно высококлассное.

Заинтересованы? Давайте начнем прямо сейчас! Пожалуйста, заметьте, все адресовано исключительно новичкам, поэтому я буду заострять внимание на некоторых моментах. Шагайте вместе со мной.

Шаг 1. Основы jQuery

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

Обычная строка кода выглядит вот так:

$(DOM Element).something();

Давайте рассмотрим каждую ее часть:

$ — сокращение от «объект jQuery». Используйте jQuery в случае, если вы берете другую рамку на той же самой странице, как здесь: jquery(DOM Element).something();

(DOM Element) – элемент, с которым вы что-то хотите сделать. Это один из тузов в рукаве jQuery. Здесь для получения одного из элементов можно использовать селекторы CSS. Любое объявление, которое работает в CSS-документе, может быть употреблено здесь. ID, классы, псевдоклассы — все, что хотите.

something() – то, что нужно сделать с полученным элементом. Это может быть все, что угодно – от скрывания элемента до AJAX-вызова к обработчику событий.

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

Шаг 2. Использование встроенных эффектов

jQuery предлагает тысячу встроенных методов, которые вы может использовать без дополнительной установки. К ним относятся методы отображения/скрытия элементов с огромным количеством вариантов, включая скольжение и исчезновение элемента. К вашим услугам также множество методов-переключателей, которые переключают видимость элемента, о котором идет речь.

Прежде чем мы рассмотрим каждый из этих методов, вот общий формат для каждого метода:

$("#element").effect([speed, callback]);

Следуя общей парадигме jQuery, мы изначально ориентированы на нужный элемент, использующий селекторы CSS. Далее мы просто вызываем любой из встроенных методов.

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

Скорость означает продолжительность анимации в секундах. Вы можете установить в строках замедленную, нормальную или быструю скорость, или же можете более точно установить время в миллисекундах.

Обратный вызов – это функция, которая исполняется, когда анимация закончена. Ее можно использовать, чтобы что-то сделать, выполнить вызов AJAX в фоновом режиме, обновить другую часть пользовательского интерфейса и так далее. Пределом служит только ваша фантазия.

Вот список функций, идущих в комплекте с jQuery:

show/hide (показать/скрыть)– методы показа и сокрытия элемента. В качестве параметров использует скорость и обратный вызов.

toggle (переключение)– метод, который управляет отображением элемента в зависимости от его текущего состояния, например, если элемент скрыт, то начинает отображаться, и наоборот. Использует методы показа и скрытия.

slideDown/slideUp (смещение вниз/смещение вверх)- говорит сам за себя. Меняет высоту элемента для создания скользящей анимации, позволяющей проявить или скрыть элемент.

slideToggle (скользящее переключение)- то же самое, что и метод переключения, за исключением того, что использует методы slideDown/slideUp для проявления или сокрытия элементов.

fadeIn/fadeOut (усиление/затухание)- меняет непрозрачность элемента, о котором идет речь, для создания эффекта постепенного изменения.

fadeTo – видоизменяет непрозрачность элемента идентично переданной величине. Очевидно, он использует дополнительный параметр непрозрачности, где 0 – абсолютная прозрачность, а 1 – полная непрозрачность.

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

Например, если вы хотите переключить только список элементов, которые имеют класс effect(эффект), ваш код будет выглядеть вот так:

$("li").toggle( $(this).hasClass("effect") );

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

Шаг 3. Построение собственной анимации

Часто встроенные методы не совсем подходят под ваши нужды, и в этом случае вы, очевидно, захотите построить свои собственные эффекты. jQuery позволит вам это сделать. Довольно легко, в общем-то.

Чтобы сделать собственный анимационный эффект, вы используете метод animate. Позвольте показать вам.

$("#somelement").animate({property: value}, [speed, callback] );

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

Параметры speed и callback аналогичны предыдущему методу. Объект — набор свойств, который может содержать несколько пар ключ/значение – это именно то, что делает метод уникальным. Вы передаете каждое свойство, которое нужно анимировать, вместе с конечным значением. Например, предположим, что вы хотите анимировать элемент на 90% от его текущей ширины, тогда вам придется сделать что-то вроде следующего:

$("#somelement").animate({width: "90%"}, 350, function()
{alert ("The animation has finished running.");});

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

Обратите внимание, что вы не ограничены в размерах. Можно анимировать широкий набор свойств, включая непрозрачность, поля, дополнение пробелами, границы, размеры шрифтов. Метод также очень гибок, когда речь заходит о модулях программы. Работает все – пиксели, проценты. Заработает все перемешенное, как показано ниже. Правда, выглядеть связным оно не будет.

$("#somelement").animate({
width: "90%"
fontSize: "14em",
height: "183px",
opacity: 0.8,
marginTop: "2cm",
marginLeft: "0.3in",
borderBottom: "30mm",
}, 350, function(){alert ("The animation has finished running.");});

При определении свойства, которое состоит более чем из одного слова, заметьте, что его нужно определять слитно прописными буквами без разделяющих дефисов (т.н. camel case). Это контрастирует с обычным синтаксисом CSS, так что обратите внимание. Правильно borderTop, а не border-top.

Примечание: jQuery позволяет анимировать только свойства, принимающие числовые значения. Это означает, что можно использовать только основные свойства, а все что связано с цветом — нет. Но не волнуйтесь. С помощью jQuery UI мы вскоре сможем анимировать и цвета.

Шаг 4. Тонкая настройка эффекта

Если вы посмотрите на простой эффект в демо-ролике, можете заметить, что иногда он немного нарушается. Неоднократное движение курсора мыши над элементом создает длинную очередь, из-за которой анимация повторяется несколько раз.

Самый простой способ избежать этой проблемы – использовать метод stop сразу перед началом анимации. Он эффективно очищает очередь и анимация может идти как обычно. Например, таким будет привычный код.

$("#someelement")
  .hover(function() {
    $(this).animate({ top: 20 }, 'fast');
  }, function() {
    $(this).animate({ top: 0 }, 'fast');
  });

Если использовать stop во избежание надстроек, ваш новый код будет таким:

$("#someelement")
  .hover(function() {
    $(this).stop().animate({ top: 20 }, 'fast');
  }, function() {
    $(this).stop().animate({ top: 0 }, 'fast');
  });

Довольно просто, не так ли? Но этот метод имеет небольшую проблемку. Быстрое движение не приведет к излишним повторениям, но анимация останется незавершенной. Если хотите полностью избавиться от этого недостатка, вам придется использовать плагин типа hoverFlow.

Шаг 5. Добавим немного реализма — ускорение

Если хотите добавить немного реализма, вам нужно лучше контролировать скорость прохождения анимации. Вот где и таится easing (ускорение). Оно, по существу, управляет ускорением и замедлением анимации во времени.

По умолчанию метод easing – это качель, встроенная в jQuery. Плагин easing Robert’а Penner’а позволяет использовать множество эффектов ускорения. Обратитесь к разделу easing в демо-ролике, чтобы взглянуть на каждый эффект ускорения.

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

$("#somelement").animate({
width: "90%"
height: "183px",
}, 550, "easeInElastic");

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

Шаг 6. Подгоняем «тютелька в тютельку» — jQuery UI

Обновление до jQuery UI добавляет множество очень нужных функций. Вам, фактически, не нужна вся библиотека для того, чтобы пользоваться дополнительными функциями. Вам требуется только файл эффектов ядра, чтобы воспользоваться всей функциональностью. Не ядро UI, а только файл эффектов ядра, который весит каких-то мизерных 10 килобайт.

Важные функции, которые добавляет в таблицу библиотека эффектов jQuery UI – это поддержка анимирования цветов, ускорение и трансформация классов.

Если помните, я уже упоминал, что с ядром библиотеки jQuery вы ограничены только анимированием тех качеств, которые принимают числовые значения. В jQuery UI все ограничения снимаются. Теперь можно легко анимировать цвет фона элемента, цвет его границы и так далее.

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

$(".block").hover(function() {
    $(this).animate({ borderColor: "black" }, 1000);
},function() {
    $(this).animate({ borderColor: "red" }, 500);
});

Трансформация классов отвечает за анимацию между классами. Используй вы базовую библиотеку, если убрали, а затем добавили класс, который изменил внешний вид элемента, переход бы произошел мгновенно. При наличии библиотеки UI на борту вы получаете опцию перехода в дополнительные параметры, чтобы продумать скорость анимации, методы ускорения и обратного вызова. Как и в предыдущей функции, эта функциональность построена на основании существующего jQuery API, который ускоряет процесс перехода.

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

Шаг 7. Построение нашего первого по-настоящему высококлассного эффекта

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

Представьте: вы хотите показать изображение, и когда мышь пользователя указывает на него, вы демонстрируете два раздела внутри картинки. Один показывает заголовок, а второй показывает крошечное описание изображения. Я уверен, вы найдете буквально несметное множество плагинов, которые делают то же самое, но сегодня мы собираемся построить его с нуля. Я обещаю вам, что это не так сложно, как казалось бы. Фактически, это весьма легко и можно построить очень быстро. Давайте начнем.

HTML-код

Во-первых, нам нужна простая базовая разметка, на которой можно строить.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Beginning Animations with jQuery - by Siddharth for NetTuts</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<script type="text/javascript" src="js/mojo.js"></script>
</head>
<body>

<div id="container">

<h1>Beginning Animations with jQuery</h1>
<div>by Siddharth for the lovely folks at Net Tuts</div>
<p>A simple real world usage of the animation effects followed by demos for the article's text demonstrating a fix for animation build up and the different easing methods available.</p> 

<div class="bblock">
<h2>A Simple Real World Effect</h2>
<p>When the method is changed, it goes to zero height using the standard jQuery easing and then expands using the specified easing method.</p>

<div class="item">
<div class="title">ThemeForest</div>
<img src="images/tf.jpg" alt="Image" />
<div class="desc">The only place you need for site templates and themes </div>
</div>

<div class="item last">
<div class="title">CodeCanyon</div>
<img src="images/cc.jpg" alt="Image" />
<div class="desc">The premier destination for scripts and code snippets</div>
</div>

</div>

<!-- Rest of the code for the demo -->
</div>
</body>
</html>

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

Прочие части довольно обычные и говорят сами за себя. Мы начинаем с включения библиотеки jQuery, библиотеки jQuery UI и нашего файла, который содержит обычный код JavaScript. Заметьте, что мне понадобилось только часть ядра эффектов jQuery UI, так что я скачал только его. Если вам нужно больше встроенных эффектов, то нужна пользовательская сборка. Ее можно скачать здесь.

Вот как выглядит наша страница на этом этапе.

jQuery

CSS

.item {
	position: relative;
	margin: 20px 60px 40px 0;
	overflow: hidden;
}

.item .title, .item .desc {
	background: #000;
	color: #fff;
	position: absolute;
	display: block;
	width: 638px;
	opacity: 0.4;
}

.item .title {
	top: 0;
	font-size: 16px;
	padding: 12px 10px 25px 0;
	text-align: right;
}

.item .desc {
	bottom: 0;
	font-size: 12px;
	padding: 5px 0 15px 10px;
}

Здесь вы должны кое-что взять на заметку. Каждый элемент имеет свойство position установленное как relative (относительная), так, что элементы внутри него могут быть установлены в абсолютных координатах. Кроме того, свойство overflow(переполнение) установлено на hidden(скрыто), так что мы можем скрывать название и описание за пределами видимой области, пока они нам не понадобятся.
Название и описание имеют свойство position установленным на absolute(абсолютный) и могут быть точно заданы внутри внешнего элемента. Название имеет верхнее значение top(верх) установленным на 0, так что оно находится сверху, а описание имеет свое нижнее значение bottom(низ) равным 0, так что находится прямо в самом низу.
Помимо того, CSS очень шаблонен и занимается главным образом разметкой текста, немного позиционированием и стилями. Ничего слишком радикального.

Вот как выглядит наша страница на этой стадии.

jQuery

Магия JavaScript, включенная с помощью jQuery

$(document).ready(function()
{
	// Code for other parts of the demo

	$(".item").children("div.title").animate({top: -60}, 300);
	$(".item").children("div.desc").animate({bottom: -40}, 300);

$(".item").hover(
		function()
		{
			$(this).children("div.title").stop().animate({top: 0}, 700, "easeOutBounce");
			$(this).children("div.desc").stop().animate({bottom: 0}, 700, "easeOutBounce");
		},
		function(){
			$(this).children("div.title").stop().animate({top: -60}, 500);
			$(this).children("div.desc").stop().animate({bottom: -40}, 400);
		}
		);

$(".title, .desc").hover(
		function()
		{
			$(this).stop().animate({backgroundColor: "#444"}, 700, "easeOutSine");
		},
		function(){
			$(this).stop().animate({backgroundColor: "#000"}, 700);
		}
		);
});

Может быть, выглядит слишком впечатляюще, но на самом деле это не так. Я объясню каждую часть.

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

Во-первых, мы убираем название и описание из виду. Мы делаем это при помощи JavaScript, а не CSS по очень конкретной причине. Даже если JavaScript отключен, он выглядит довольно изящно. Название и описание по-прежнему наложены поверх изображения и все это смотрится как в стадии проведения над ним мышью. Если для скрытия названия и описания использовать CSS, и при этом отключить JavaScript, они будут полностью скрыты и совершенно бесполезны. Я выбрал для грязной работы JavaScript в интересах обеспечения лучшего качества.

Мы изначально привязали наш пользовательский код к функции hover каждого элемента класса item. Это позволяет сделать этот обработчик довольно универсальным и многократно используемым. Добавление этой функциональности к любым другим элементам так же просто, как и придание им класса item. Первая функция – для события hover, вторая – для события unhover.
В рамках функции параметр this относится к элементу, который запустил событие. Для изменения соответствующих значений мы пользуемся методом animate. Мы также используем немного ускорения для того, чтобы сделать его более броским. На mouseout или unhover мы просто изменили их значения обратно к значениям по умолчанию.

И еще, когда над контейнерами названия и описания проводят мышью, они медленно трансформируют цвета благодаря jQuery UI.

Собственно, мы закончили. Не так уж много времени все заняло, не так ли? И не так уж плохо для крошечного скрипта, который кажется еще более крошечным, если учесть, сколько строк было выделено исключительно в фигурных скобках.

Заключение

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

Вопросы? Похвала? Критика? Напишите разделе комментариев. Счастливого кодирования!

Скачать исходники zip архивом

Просмотр Demo

Автор: Siddharth

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (6)

  1. Владимир

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

  2. Sirius

    Спасибо.

  3. Никита

    что-то демо-пример не отображается и не только в этой статье.
    Такое впечатление, что вы свой архив не поддерживаете
    Экономите на серверном пространстве? Так есть много свободных файловых обменников.

    • Виктор Рог

      Посмотрим. Вроде все демо работали. Во всяком случае должно было. Поправили!

  4. WEB-WORKER

    Здравствуйте! Большое спасибо за статью. Очень много полезного узнал.
    Скажите пожалуйса Шаг 4 без дополнительного плагина не должен работать? Просто в статье не сразу написано о плагине. Я начал проверять и у меня не заработало.

    • Андрей Кудлай

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree