Там это ложное убеждение в сообществе веб-разработки, CSS анимация только производительный способ оживить в Интернете.
Этот миф принуждению многих разработчиков отказаться JavaScript-анимации на основе altogether, тем самым (1) заставляя себя, чтобы управлять сложным взаимодействием UI в таблицах стилей (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 1 ,
- Основанная на физике погрузчик animations 2 ,
- График control 3 ,
- Безье translations 4 .
Note Если вы заинтересованы в получении дополнительной информации о производительности, вы можете прочитать Джулиана Шапиро “ CSS против JS анимации:?, Которая работает быстрее 5 ” и Джек Дойл” Миф Разорение: CSSАнимации против JavaScript 6 “. Для демо производительности, обратитесь к производительности pane 7 в документации Velocity и GSAP в” Библиотека Скорость Comparison 8 “демо .
Скорость и GSAP
Два наиболее популярных библиотек JavaScript анимации: Velocity.js 9 и GSAP 10 .Они оба работают с и without 11 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;просто переложить все аргументы вправо на одну позицию, чтобы освободить место для прохождения в целевых элементов в перво …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров