40% Анимация

Библиотека jQuery позволяет очень легко анимировать DOM-элементы, для этого предусмотрено несколько функций. Но обо всём по порядку. Начнём с простых «.hide()» и «.show()», эти два метода, соответственно, скрывают либо отображают элементы:

▷

// скроем все картинки
$('img').hide();

▷

// теперь вернём их на место
$('img').show();

Данные вызовы оперируют лишь CSS-атрибутом «display» и переключают его из текущего состояния в «none» и обратно. В качестве первого параметра можно задать скорость анимации, для этого можно использовать одно из зарезервированных слов «slow» или «fast», либо же указывать скорость в миллисекундах (1000 мс = 1 сек):

▷

// медленно спускаемся с горы и… скрываем все картинки
// **slow == 600**
// **fast == 200**
$('img').hide('slow');

▷

// теперь вернём их на место, чуть быстрее
$('img').show(400);

В таком случае исчезновение элементов будет сопровождаться изменением атрибутов «width», «height», «opacity» и прочих. В довесок к этим двум методам есть ещё метод «.toggle()», который работает как переключатель «hide → show» или «show → hide»:

▷

// запустите пару раз
$('img').toggle();

Дальше – больше, вторым параметром в приведенных методах может быть callback-функция – она будет выполнена по окончании анимации элементов:

▷

// скрываем все картинки
$('img').hide('slow', function(){
    // опосля отображаем alert
    alert("Images was hidden");
});

Анимацию таких атрибутов как «height», «width» и «opacity» видно невооружённым взглядом, в действительности же это далеко не всё. Заглянув внутрь jQuery, можно увидеть, что так же изменяются внутренние и внешние отступы – «padding» и «margin» – так что не стоит об этом забывать.

Идём дальше – у нас на очереди набор методов из семейства slide: «.slideUp()», «.slideDown()» и «.slideToggle()». Их поведение схоже с предыдущими функциями, но анимация будет затрагивать лишь высоту блоков:

▷

// скроем все картинки
$('img').slideUp();

▷

// теперь вернём их на место
$('img').slideDown();

▷

// поменяем значение
$('img').slideToggle();

Прежде, чем перейти к десерту, упомяну семейство функций fade — они манипулируют лишь атрибутом «opacity»:

$('img').fadeIn() – изменяет «opacity» от 0 до предыдущего значения

$('img').fadeOut()– изменяет «opacity» от текущего до 0

$('img').fadeToggle() – переключатель между «In» и «Out»

$('img').fadeTo("slow", 0.5) – изменяет значение «opacity» до требуемого значения

А теперь самое сладкое – все эффекты анимации в jQuery крутятся вокруг метода «.animate()». Данная функция берёт один или несколько CSS-свойств элемента и изменяет их от исходного до заданного за N-ое количество итераций (количество итераций зависит от указанного времени, но не реже одной итерации в 13мс, если я правильно накопал это значение). Ну что же, от слов к делу, попробуем реализовать функции «.fadeIn()» и «.fadeout()» с помощью «.animate()» :

▷

// fadeOut()
$('img').animate({
    'opacity': 'hide'
})

▷

// fadeIn()
$('img').animate({
    'opacity': 'show'
})

Всё просто. Давайте-ка теперь усложним задачу – изменим размер блоков и прозрачность:

▷

// значения указанных свойств будут плавно изменяться
// от текущих до заданных
$('img').animate({
    'opacity': 0.5,
    'height': '100px',
    'width': '100px'
})

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

▷

// изменяем, шаг за шагом
$('img').animate({
    'opacity': '+=0.1',
    'height': '+=12px',
    'width': '+=20px'
})

Поигрались и хватит, пора усложнить вам жизнь. У метода «.animate()» может быть более одного параметра, и пора приступить к их разбору. Набор параметров может быть разным; приведу первый, тот, что попроще:

properties – CSS-свойства – с этим мы уже познакомились

duration – скорость анимации, уже упоминалась ранее, указывается в миллисекундах, или используя ключевые слова «fast» или «slow»

easing – указываем, какую функцию будем использовать для изменения значений

complete – функция, которая будет вызвана после окончания анимации

Из приведённых параметров нам только «easing» не встречался ранее – я его берёг для данного момента. Этот параметр указывает, какая функция будет использоваться для процесса анимации значений. Это могут быть линейные, квадратичные, кубические и любые другие функции. «Из коробки» мы можем выбрать лишь между «linear»:

и «swing»:

Заглянув в код jQuery, мы легко найдём соответствующий код:

jQuery.easing = {
    linear: function( p ) {
        return p;
    },
    swing: function( p ) {
        return 0.5 - Math.cos( p * Math.PI ) / 2;
    },
    _default: "swing"
};

p – коэффициент прохождения анимации, изменяется от 0 до 1.

Сложно? Хотите больше и сразу? Тогда ищите easing plugin на странице http://gsgd.co.uk/sandbox/jquery/easing/, он действительно из разряда «must have».

В качестве путеводителя по easing-функциям можете использовать страничку http://easings.net/.

Но давайте вернёмся к методу «.animate()», который в качестве параметров может принимать ещё один набор параметров, который уже не будет казаться таким простым:

properties – CSS-свойства (уже было)

options – целый набор возможностей, часть которых уже описывалась ранее:

• duration – скорость анимации
• easing – функция («linear» или «swing»)
• queue – флаг/параметр очереди; чуть позже опишу подробнее
• specialEasing – хэш, в котором можно описать, какую именно easing-функцию следует использовать для изменения определённых параметров
• step – функция, которая будет вызвана на каждом шаге анимации для каждого CSS-свойства; о ней расскажу чуть ниже
• complete – функция, которая будет вызвана после окончания анимации
• start – функция, которая будет вызвана до начала анимации
• progress – функция, которая будет вызвана на каждом шаге, но только единождый для элемента, вне зависимости от количества CSS-свойств
• done – функция, которая будет вызвана после успешного окончания анимации
• fail – функция, которая будет вызвана после неудачного окончания анимации
• always – функция, которая будет вызвана после окончания анимации при любом исходе

Поддержка последних пяти функций добавлена в версии 1.8. Данный релиз jQuery ознаменовался глобальным рефакторингом анимации и переездом на Deferred.

▷

// изменяем высоту и ширину
$('img').animate({
    'height': '+=10px',
    'width': '+=10px'
}, {
  'start':    () => console.log('start'),
  'progress': () => console.log('progress'),
  'done':     () => console.log('done'),
  'fail':     () => console.log('fail'),
  'always':   () => console.log('always')
})

Результат выполнения данного кода доступен в консоли.