Книга: JavaScript. Подробное руководство, 6-е издание

19.5.2.2. Объект с параметрами анимационного эффекта

19.5.2.2. Объект с параметрами анимационного эффекта

Во втором необязательном аргументе методу animate() может передаваться объект с параметрами анимационного эффекта. Вы уже знакомы с двумя наиболее важными параметрами. Значением свойства duration может быть число, определяющее длительность эффекта в миллисекундах, а также строка «fast», «slow» или любая другая, объявленная в свойстве jQuery.fx.speeds.

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

Свойство queue объекта с параметрами определяет - должен ли данный эффект ставиться в очередь. То есть должно ли откладываться воспроизведение данного эффекта до окончания всех предыдущих эффектов. По умолчанию все анимационные эффекты ставятся в очередь. Если свойству queue присвоить значение false, эффект не будет поставлен в очередь. Воспроизведение таких внеочередных эффектов начинается немедленно. Последующие анимационные эффекты, которые ставятся в очередь, не будут ждать завершения внеочередных эффектов. Рассмотрим следующий пример:

$("img").fadeIn(500)
  .animate({"width”:"+=100"}, {queue:false, duration:1000})
  .fadeOut(500);

Эффекты, запускаемые методами fadeIn() и fadeOut(), будут поставлены в очередь, а эффект, запускаемый вызовом метода animate() (эффект изменения значения свойства width на протяжении 1000 миллисекунд) - нет. Изменение ширины начнется одновременно с эффектом fadeIn(). Эффект fadeOut() начнется сразу после окончания эффекта fadeIn(): он не будет ждать, пока завершится эффект, изменяющий ширину элемента.

В самом простом случае воспроизведение анимационного эффекта заключается в линейном изменении во времени значения свойства. Например, через 100 миллисекунд после начала эффекта, длительность которого составляет 400 миллисекунд, величина изменения значения свойства составит 25%. То есть при линейном изменении свойства opacity от 1,0 до 0,0 (как, например, при использовании метода fadeOut()) в этот момент оно должно иметь значение 0,75. Однако, как оказывается, визуальные эффекты дают более глубокие впечатления, если они выполняются нелинейно. Поэтому библиотека jQuery предусматривает возможность использования «функции перехода», которая отображает проценты от общего времени выполнения эффекта в проценты от конечного значения свойства. Библиотека jQuery передает функции перехода значение времени в диапазоне от 0 до 1, а она должна вернуть другое значение в диапазоне от 0 до 1, исходя из которого библиотека jQuery вычислит значение CSS-свойства, опираясь на его вычисленное значение. Конечно, в общем случае ожидается, что функции переходов будут возвращать значение 0, когда им передается значение 0, и 1, когда им передается значение 1, но между этими двумя значениями они могут быть нелинейными, что будет проявляться в ускорении и замедлении анимационных эффектов.

По умолчанию в библиотеке jQuery используется синусоидальная функция перехода: эффект сначала протекает медленно, затем ускоряется, и затем опять замедляется при приближении к конечному значению. Функции переходов в библиотеке jQuery имеют имена. Функция по умолчанию называется «swing», а линейная функция называется «linear». Вы можете добавлять свои функции переходов в объект jQuery.easing:

jQuery.easing["squareroot"] = Math.sqrt;

Библиотека jQuery UI и расширение, известное как «the jQuery Easing Plugin», определяют весьма исчерпывающий набор дополнительных функций переходов.

Остальные параметры анимационных эффектов имеют отношение к функциям переходов. Свойство easing объекта с параметрами определяет имя функции перехода. По умолчанию библиотека jQuery использует синусоидальную функцию с именем «swing». Если необходимо, чтобы анимационный эффект воспроизводился линейно, следует использовать параметры, как показано ниже:

$("img").animate({"width":"+=100"}, {duration: 500, easing:"linear"});

Напомню, что параметры duration, easing и complete можно также передавать методу animate() в виде отдельных аргументов. То есть предыдущий анимационный эффект можно запустить так:

$("img").animate({"width":"+=100"}, 500, "linear");

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

// Требуется скрыть изображения, подобно методу hide(), при этом изменение
// размеров изображения должно протекать линейно, а изменение непрозрачности -
// с применением функции перехода "swing" по умолчанию
// Первый способ:
// Использовать параметр specialEasing, чтобы указать другую функцию перехода
$("img").animate({ width:"hide", height:"hide", opacity:"hide" },
  { specialEasing: { width: "linear", height: "linear" }});
// Второй способ:
// Передать массивы [целевое значение, функция перехода] в объекте,
// который передается в первом аргументе.
$("img").animate({
  width: ["hide", "linear"], height: ["hide", "linear"], opacity:"hide"
});

Оглавление книги