Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Анимационные эффекты jQuery: 7-этапное объяснение

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

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


От автора

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

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


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

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

Типичная строка кода выглядит следующим образом:

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

  • $ - Краткая форма записи для объекта jquery. Пользуйтесь jquery, если вы используете другой фреймворк на той же странице, как например jquery(DOM Element).something();
  • (DOM-элемент) – элемент, над которым вы хотите выполнить какие-то действия. Эта часть является скрытым оружием jQuery. Вы можете использовать селекторы CSS для получения элемента. Здесь может быть использована любая форма объявления, работающая в CSS-документе. ID, классы, псевдоклассы, все что угодно.
  • something() – действие, которое вы хотите выполнить над полученным элементом. Это может быть все что угодно: от скрытия элемента до выполнения запроса AJAX или назначения обработчика событий.

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


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

jQuery предоставляет вам кучу встроенных методов, которые вы можете сразу использовать. Среди них имеются методы для показа/скрытия элементов в нескольких вариациях, включая проявление элемента за счет скользящего движения (* постепенно увеличивая их высоту. Здесь и далее примеч. пер.) и постепенное проявление и исчезновение элемента. Также вам предоставляется несколько методов-переключателей, при помощи которых меняется видимость рассматриваемого элемента.

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

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

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

При помощи speed задается продолжительность анимации в секундах. Вы можете передать строковые значения, включая "slow", "normal" или "fast", или же вы можете быть точнее и указать время в миллисекундах.

callback – функция, которая выполняется сразу после завершения анимации. Вы можете использовать ее для выполнения чего угодно: незаметно выполнить запрос AJAX, обновить другую часть пользовательского интерфейса и т.д. Это ограничивается вашей фантазией.

Ниже приведен список поставляемых с jQuery методов:

  • show/hide – методы для показа или скрытия элемента. Метод принимает в качестве параметров speed и callback.
  • toggle – метод, при помощи которого меняется видимость элемента в зависимости от текущего состояния элемента, то есть, если элемент скрыт, он отображается, и наоборот. Использует методы show или hide.
  • slideDown/slideUp – говорят сами за себя. При помощи них изменяется высота элемента для создания эффекта проявления или скрытия элемента за счет скользящего движения.
  • slideToggle – то же самое, что и метод toggle, за исключением того, что он использует методы slideDown/slideUp для проявления или скрытия элементов.
  • fadeIn/fadeOut – при помощи них изменяется прозрачность интересующего нас элемента для создания эффекта постепенного проявления/исчезновения.
  • fadeTo – при помощи него изменяется прозрачность элемента в соответствии с переданным значением. Очевидно, что он принимает дополнительный параметр opacity, причем при передаче 0 элемент будет полностью прозрачным, а при передаче 1 – полностью непрозрачным.

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

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

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


Шаг 3: Создание нашего собственного анимационного эффекта

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

Для создания собственного анимационного эффекта вы используете метод animate. Взгляните.

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

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

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

Обратите внимание на то, что вы можете анимировать не только размеры. Вы можете анимировать целый ряд свойств, включая прозрачность, отступы, поля, границы, размер шрифта. Вышеупомянутый метод также довольно гибок в отношении единиц измерения. Подходят и пиксели, и em (* единица длины относительно размера шрифта элемента), и проценты. Так что нечто так же запутанное, как ниже, подойдет. Просто не будет выглядеть цельно.

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

Обратите внимание: jQuery позволяет анимировать только свойства, в качестве значений которых используются числа. Это означает, что могут быть использованы только основные свойства, а все связанные с цветом свойства не подходят. Но не переживайте. За счет некоторых возможностей jQuery UI (* библиотека готовых компонентов для пользовательского интерфейса, разработанная на основе jQuery) мы будем анимировать цвета с минуты на минуту.


Шаг 4: Подгоняем эффект

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

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

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

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


Шаг 5: Делаем эффекты более реалистичным за счет добавления эффекта сглаживания

(* от англ. easing – сглаживание; изменение анимации с течением времени). Если вы хотели бы сделать эффекты более реалистичными, то вам нужен был бы дополнительный контроль над интенсивностью, с которой они выполняются. Для этого и нужен эффект сглаживания. По сути при помощи сглаживания контролируется ускорение и замедление анимации с течением времени.

В качестве варианта сглаживания по умолчанию используется встроенный в jQuery "swing" (* колебание; анимация выполняется с низкой интенсивностью вначале / в конце, но с высокой – в середине). Плагин, разработанный Робертом Пеннерсом, для добавления эффекта сглаживания позволяет вам воспользоваться рядом его вариантов. Ознакомьтесь с разделом демоверсии для демонстрации эффекта сглаживания, чтобы ознакомиться с каждым из вариантов этого эффекта.

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

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


Шаг 6: Совершенствование эффектов при помощи jQuery UI

В результате перехода на jQuery UI мы получаем набор очень необходимых возможностей. На самом деле вам не нужна вся библиотека, чтобы воспользоваться дополнительными возможностями. Вам всего лишь нужен файл с ключевыми эффектами для получения этих возможностей. Не UI Сore, а только файл компонента Effects Core, вес которого относительно небольшой и составляет 10 Кбайт.

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

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

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

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

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


Шаг 7: Создание нашего первого эффекта, который можно использовать в реальном мире разработки

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

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


Код HTML

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

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

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

Ниже показано, как выглядит наша страница после завершения этого этапа.

Tutorial Image

Код CSS

Здесь вам следует обратить внимание на несколько моментов. У каждого элемента имеется свойство position, в качестве значения которого задано relative (* если у родителя в качестве значения position используется fixed, relative или absolute, то отсчет координат ведется от края родительского элемента), благодаря чему для элементов внутри него можно легко задать позицию. Также в качестве значения свойства overflow элемента установлено hidden, за счет чего мы можем скрыть заголовок и описание за пределами элемента, если они не нужны.

В качестве значения свойства position заголовка и описания задано absolute, благодаря чему их можно точно отпозиционировать внутри элемента с классом item. В качестве значения свойства top заголовка установлено значение 0, так что он располагается вверху, и в качестве значения свойства bottom описания установлено 0, за счет чего оно размещается прямо внизу.

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

Ниже показано, как выглядит наша страница после завершения этого этапа.

Tutorial Image

Магия JavaScript, обусловленная jQuery

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

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

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

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

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

Эффект дополняется тем, что при наведении курсора поверх контейнеров для заголовка и описания их цвет медленно изменяется благодаря возможностям jQuery UI.

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


Заключение


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

Есть вопросы? Хотите пожелать что-то приятное? Имеются какие-либо критические замечания? Перейдите к разделу с комментариями и оставьте мне комментарий. Удачного вам программирования!

  • Подпишитесь на нас на Twitter или на Nettuts+ RSS Feed, чтобы быть в курсе о лучших руководствах по веб-разработке. Готово.

Напишите руководство для Plus

Знали ли вы, что вы можете заработать до $600 за написание руководства и/или скринкаста (* цифровой файл, в котором хранится последовательность изображений с экрана монитора (screen output), зачастую с текстовыми и аудио-подсказками. Скринкасты могут быть очень полезными как часть инструкций для пользователя, отличное средство показать наглядно, что и как можно/нужно делать при работе с приложениями) для нас? Нам необходимы исчерпывающие и грамотно написанные руководства по HTML, CSS, PHP и JavaScript. Если у вас имеются соответственные умения, то свяжитесь с Jeffrey по адресу nettuts@tutsplus.com.

Пожалуйста, учтите, что фактическое вознаграждение будет зависеть от качества конечного руководства и скринкаста.

Write a PLUS tutorial
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.