Там же ложное убеждение в сообществе веб-разработки, CSS анимация только производительной способ оживить в Интернете.
Этот миф принуждению многих разработчиков отказаться JavaScript-анимации на основе altogether, тем самым (1) заставляя себя, чтобы управлять сложное взаимодействие пользовательского интерфейса в стиле листов, (2) замок себя из поддержки Internet Explorer 8 и 9, и (3)отказ физику движения красивый дизайн, которые можно только с JavaScript .

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

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

Почему JavaScript

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

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

• Кросс-браузерный SVG support ¹
• Основанная на физике погрузчик animations ²
• График control ³
• Безье translations ⁴ .

Note Если вы заинтересованы в получении дополнительной информации о производительности, вы можете прочитать Джулиана Шапиро “ CSS против JS Анимация: что быстрее ⁵ ” и Джек Дойл” Миф Разорение: HTML Анимации против JavaScript ⁶ “Для демо производительности, обратитесь к производительности pane ⁷ в документации Velocity и GSAP в” библиотеки.Скорость Comparison ⁸ “демо .

Скорость и GSAP

Два наиболее популярных библиотек JavaScript анимация являются Velocity.js ⁹ и GSAP ¹⁰ .Они оба работают с и without ¹¹ JQuery.Когда эти библиотеки используются наряду JQuery, нет никакой деградации производительности, потому что они полностью обойти анимации стека JQuery в .

Если JQuery присутствует на вашей странице, вы можете использовать скорость и GSAP, как вы бы JQuery в $.animate().Например, $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

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

< ...

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров