Анимация без jQuery

В сообществе веб-разработчиков существует ложное убеждение, что CSS-анимация является единственным эффективным способом оживления в сети. Этот миф принудил многих разработчиков полностью отказаться от анимации, основанной на JavaScript, тем самым заставляя их справляться со сложным взаимодействием пользовательского интерфейса с таблицами стилей, блокируя их от поддержки Internet Explorer 8 и 9, отделяя их от красивой физики дизайна движения, которая возможна только с JavaScript.

Проверено в реальных условиях: анимация, построенная на JavaScript, чаще всего так же быстра, как и анимация на основе CSS – иногда даже быстрее. CSS анимация появляется только чтобы начать действие, что, как правило, сравнимо с очень медленным по своей сути $.animate() в jQuery. Тем не менее, библиотеки JavaScript анимации, обходящие jQuery, показывают невероятную производительность, максимально избегая DOM манипуляций. Эти библиотеки могут быть до 20ти раз быстрее jQuery.

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

Почему JavaScript?

CSS анимации удобны, когда Вы хотите внести свои изменения в стили. Кроме того, они обеспечивают фантастическую производительность с самого начала – Вам даже не придется добавлять библиотеки на страницу. Тем не менее, если Вы пытаетесь использовать CSS переходы, чтобы овладеть богатым дизайном движения (который Вы можете наблюдать в последних версиях iOS и Android), они становятся слишком сложноуправляемыми или их характеристик просто не хватает.

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

  • кросс-браузерная SVG поддержка;
  • загрузочные анимации, основанные на физике;
  • контроль сроков;
  • кривые Безье.

Velocity и GSAP

Две самые популярные JavaScript библиотеки Velocity и GSAP. Они обе работают с и без jQuery. Когда эти библиотеки используются наряду с jQuery, производительность не ухудшается, т.к. они полностью обходят стек jQuery анимации. Если же jQuery есть на Вашей странице, Вы можете использовать Velocity и GSAP так же, как использовали бы $.animate() в jQuery. Например, $element.animate({ opacity: 0.5 }); становится просто $element.velocity({ opacity: 0.5 }).

Эти две библиотеки так же работают и когда jQuery нет на странице. Это значит, что вместо того, чтобы соединять вызов анимации с элементным объектом jQuery– как показано – Вы пропускаете целевой элемент(ы) до вызова анимации:

/* Working without jQuery */ 

Velocity(element, { opacity: 0.5 }, 1000); // Velocity

TweenMax.to(element, 1, { opacity: 0.5 }); // GSAP

Как показано, Velocity сохраняет тот же синтаксис, что и $.animate() в jQuery, даже когда используется без jQuery; просто сдвиньте все аргументы вправо на одну позицию, чтобы освободить место для прохождения целевых элементов в первой позиции.

GSAP, напротив, использует объектно-ориентированное проектирование API наряду с удобными статическими методами. Таким образом, Вы можете получить полный контроль над анимациями.

В обоих случаях Вы анимируете не элементный объект jQuery, а, скорее, материал DOM узла. Как напоминание, Вы проходите материал DOM узла, используя document.getElementByID, document.getElementsByTagName, document.getElementsByClassName или document.querySelectorAll (который работает подобно двигателю селекторов jQuery). Мы вкратце рассмотрим эти функции в следующем разделе.

Работа без jQuery

(Примечание: если Вам нужен базовый учебник по работе с $.animate() в jQuery, обратитесь к первым нескольким панелям в документации Velocity).

Дальше давайте рассмотрим querySelectorAll, потому что, вероятно, это станет Вашим излюбленным методом при выборе элементов без jQuery.

document.querySelectorAll("body"); // Get the body element

document.querySelectorAll(".squares"); // Get all elements with the "square" class

document.querySelectorAll("div"); // Get all divs

document.querySelectorAll("#main"); // Get the element with an id of "main"

document.querySelectorAll("#main div"); // Get the divs contained by "main"

Как показано, Вы просто передаете querySelectorAll CSS селектору (те же селекторы, которые Вы бы использовали в своем перечне стилей) и он вернет все соответствующие элементы в массиве.

Таким образом, Вы можете сделать это:

/* Get all div elements. */

var divs = document.querySelectorAll("div"); 

 

/* Animate all divs at once. */

Velocity(divs, { opacity: 0.5 }, 1000); // Velocity

TweenMax.to(divs, 1, { opacity: 0.5 }); // GSAP

Так как мы больше не соединяем анимации с элементами объектов jQuery, Вам, должно быть, интересно, как мы соединили анимации в цепочку, как это:

$element // jQuery element object

         .velocity({ opacity: 0.5 }, 1000)

         .velocity({ opacity: 1 }, 1000);

В Velocity Вы просто вызываете одну анимацию за другой:

/* These animations automatically chain onto one another. */

Velocity(element, { opacity: 0.5 }, 1000);

Velocity(element, { opacity: 1 }, 1000);

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

(Совет: С пакетом интерфейса Velocity Вы можете создавать свои собственные multi-call анимации и давать им пользовательские имена, которые затем использовать как первый аргумент Velocity)

В случае с GSAP, его выразительный объектно-ориентированный API позволяет размещать анимацию в сроки, давая Вам контроль над планированием и синхронизацией. Вы не ограничены скованными анимациями одна-после-другой; Вы можете вкладываться в сроки, заставлять анимации пересекаться и т.д.:

var tl = new TimelineMax();

/* GSAP tweens chain by default, but you can specify exact insertion points in the timeline, including relative offsets. */

tl

  .to(element, 1, { opacity: 0.5 })

  .to(element, 1, { opacity: 1 });

Автор: Джулиан Шапиро

3 комментариев Сен 26, 2014

Оставить комментарий

Последние комментарии

  1. CharlesEDido - 2017-11-19 14:03

    Данные вредные привычки увеличивают возраст мозга на несколько лет. Из-за этого, в свою очередь, страдают память и способность к обучению. К такому выводу пришли сотрудники Университета Турку, подробнее читайте на сайте [url=http://womaan.ru]womaan.ru[/url]

  2. neeply - 2017-06-29 03:42

    A formidable share, I just given this onto a colleague who was doing a bit evaluation on this. And he in truth purchased me breakfast as a result of I discovered it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I really feel strongly about it and love studying extra on this topic. If potential, as you turn into expertise, would you mind updating your weblog with more details? It's extremely useful for me. Large thumb up for this blog publish!
    http://www.tupx.com/glojew/forum.php?mod=viewthread&tid=17520&extra=
    http://www.sexybang.top/gal/5742.html
    http://www.sexybang.top/gal/4585.html
    http://forums.littlebud.com/viewtopic.php?f=44&t=27592&p=95118#p95118

  3. BennyJough - 2017-06-14 05:08

    wh0cd55133 augmentin

  4. Антон - 2014-09-30 10:03

    Спасибо, полезно!