Скорость (библиотека JavaScript)
| Оригинальный автор(ы) | Джулиан Шапиро |
|---|---|
| Стабильная версия | |
| Репозиторий | |
| Написано в | JavaScript |
| Операционная система | Кросс-платформенный |
| Платформа | См. поддержку браузера |
| Тип | Библиотека JavaScript , анимация |
| Лицензия | С [ 3 ] |
| Веб-сайт | скоростьjs |
Velocity — это кроссплатформенная библиотека JavaScript, предназначенная для упрощения написания клиентских сценариев анимации веб-сайта. [ 4 ] Velocity — бесплатное программное обеспечение с открытым исходным кодом, распространяемое по лицензии MIT . [ 3 ] Это самый популярный движок веб-анимации с открытым исходным кодом. [ 5 ]
Синтаксис Velocity предназначен для упрощения создания сложных анимаций для элементов HTML и SVG . [ 6 ] Помимо преимуществ рабочего процесса, Velocity обеспечивает производительность анимации, конкурирующую с анимацией на основе CSS . [ 7 ] Velocity достигает своей производительности за счет поддержания внутреннего кэша состояний анимации и сведения к минимуму « перемешивания макета » — нежелательного поведения, которому подвергаются веб-браузеры при быстром визуальном обновлении. [ 7 ] В целом преимущества рабочего процесса и производительности позволяют использовать Velocity для сложного программирования анимации, которое можно интегрировать как в веб-приложения, так и в мобильные приложения. [ 8 ] Широкая поддержка браузеров и устройств делает его идеальным для крупных корпоративных дистрибутивов, которым необходима поддержка маломощных устройств. [ 9 ]
Velocity используется в пользовательских интерфейсах многих известных веб-сайтов, включая Uber , Samsung , WhatsApp , Tumblr , HTC , Mazda и Microsoft Windows . Это один из самых любимых проектов на сервисе хостинга кода GitHub . [ 10 ] В 2015 году Velocity была номинирована на категории «Проект года с открытым исходным кодом» в премию The Net Awards . [ 11 ]
Функции
[ редактировать ]Возможности Velocity включают в себя: [ 4 ]
- Окно браузера и прокрутка элементов
- Независимость от jQuery. фреймворка [ 12 ]
- Реверс анимации (возможность отменить предыдущую анимацию) и зацикливание анимации.
- SVG Анимация элемента [ 13 ]
- RGB и шестнадцатеричная цветовая анимация
- CSS преобразования свойства Анимация
- Предварительно созданные анимационные эффекты с помощью пакета пользовательского интерфейса Velocity. [ 14 ]
- Физическое движение с помощью пружинного типа
- обещаний Интеграция
Поддержка браузера
[ редактировать ]Velocity поддерживает все основные настольные браузеры ( Firefox , Google Chrome и Safari ), а также мобильные операционные системы iOS и Android . Его поддержка распространяется еще на Internet Explorer 8 и Android 2.3. [ 15 ]
Использование
[ редактировать ]В том числе библиотека
[ редактировать ]Библиотека Velocity представляет собой отдельный файл JavaScript, содержащий все ее основные функции. Его можно включить в веб-страницу, связав его с локальной копией или с одной из многих копий, доступных на общедоступных серверах, включая MaxCDN от jsDelivr или Cloudflare от cdnjs .
<script src="velocity.min.js"></script>
Также возможно включить Velocity напрямую из сетей доставки контента. (Атрибут целостности используется для целостности подресурса .)
Рекомендуется всегда использовать HTTPS для ресурсов, но его можно заменить на // использовать относительные URL-адреса протокола .
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js" integrity="sha384-fcLDUAwcSMMfmpKMJ0dO2//SL2WJ5/kkyz/yvgtmLXBEp3GdqrQF9ahRerhdLXn+" crossorigin="anonymous"></script>
Стили использования
[ редактировать ]У Velocity есть два стиля использования:
- The
$.Velocityфункция, которая представляет собой фабричный метод , расширенный из корневого объекта jQuery . Этот метод анимирует необработанные элементы DOM вместо элементов, обернутых jQuery . Этот стиль используется при использовании Velocity без jQuery на странице. - The
$element.velocity()функция. Этот стиль используется для анимации объектов элементов jQuery, когда jQuery присутствует на странице.
Вызовы анимации в Velocity состоят из предоставления желаемых элементов для анимации, карты свойств анимации для указания свойств CSS , подлежащих анимации, и дополнительного объекта параметров для указания настроек анимации (например, длительности ).
Аргументы
[ редактировать ]Velocity принимает один или несколько аргументов. Первый обязательный аргумент может быть либо именем предопределенной команды Velocity (например, прокрутка или реверс ), либо объектом, состоящим из свойств CSS, которые нужно анимировать:
// Animate an element's width to 100px and its left property to 200px
$element.velocity({ width: "100px", left: "200px" });
Второй аргумент, который является необязательным, является объектом. Он используется для указания параметров анимации, таких как длительность , замедление и завершение (произвольная функция, выполняемая после завершения анимации):
// Animate an element's width to 100px over a 1000ms duration after pausing for a 100s delay.
$element.velocity({ width: "100px" }, { duration: 1000, delay: 100 });
Цепочка
[ редактировать ]Создание серии последовательных вызовов анимации в Velocity состоит из Velocity() последовательного размещения вызовов на целевом объекте элемента jQuery :
$element
.velocity({ height: 300 }, { duration: 1000 })
// Continue on to this animation once the previous one has completed
.velocity({ top: 200 }, { duration: 600 })
// And once more...
.velocity({ opacity: 0 }, { duration: 200 });
Прокрутка и переворот
[ редактировать ]Прокрутка в Velocity заключается в передаче слова «прокрутка» в качестве первого аргумента Velocity — вместо типичной карты свойств CSS:
// Scroll with a duration of 750 ms
$element.velocity("scroll", { duration: 750 });
Впоследствии браузер прокрутит вниз до верхнего края элемента, для которого была вызвана Velocity.
Реверс анимации в Velocity состоит из передачи слова «reverse» в качестве первого аргумента Velocity:
// Animate an element's height
$element.velocity({ height: "500px" }, { duration: 500 });
// Reverse the previous animation; animate back to the element's original height using the previous duration
$element.velocity("reverse");
Velocity Команда реверса по умолчанию использует параметры анимации, использованные в предыдущем вызове. Передача нового объекта параметров расширяет предыдущий:
$element.velocity({ height: "500px" }, { duration: 500 });
// Extend the previous reverse call's options object with a new duration value
$element.velocity("reverse", { duration: 1000 });
История
[ редактировать ]Velocity был разработан Джулианом Шапиро для решения проблемы нехватки производительных и ориентированных на дизайнера библиотек анимации JavaScript . [ 16 ] [ 17 ] Stripe , популярная веб-разработчиках, компания, специализирующаяся на интернет-технологическая спонсировала Шапиро грант, чтобы помочь предоставить финансовые ресурсы, необходимые для продолжения постоянной разработки Velocity. [ 18 ]
Высокая производительность внутреннего механизма анимации Velocity помогла повторно популяризировать веб-анимацию на основе JavaScript, которая ранее не пользовалась популярностью у анимации на основе CSS из-за ее преимущества в скорости по сравнению со старыми библиотеками JavaScript, в которых не было внимания к анимации. [ 19 ]
В сентябре 2014 года Шапиро выпустил Velocity Motion Designer — инструмент для разработки анимации на веб-сайтах живого производства, который позволял экспортировать в реальном времени сгенерированный код анимации для последующего использования в IDE . [ 20 ] В марте 2015 года Peachpit опубликовал книгу Шапиро « Веб-анимация с использованием JavaScript» , в которой излагаются как начальные, так и продвинутые принципы разработки веб-анимации с использованием Velocity. [ нужна ссылка ] По состоянию на середину 2015 года Velocity продолжает разрабатываться и поддерживаться исключительно Шапиро. [ 21 ]
Помимо использования Velocity в профессиональных корпоративных средах, он также широко используется для экспериментов в веб-разработке и для начинающих. Проекты веб-разработки, подтверждающие концепцию, созданные на основе Velocity, обычно публикуются в CodePen ( пример ), ведущем сервисе обмена кодом сообщества.
См. также
[ редактировать ]
Дальнейшее чтение
[ редактировать ]- Анимация без jQuery
- Как использовать Velocity для легкого добавления анимации
- Быстрая анимация пользовательского интерфейса с использованием Velocity.js
Внешние ссылки
[ редактировать ]Ссылки
[ редактировать ]- ^ Джулианшапиро. «velocity/README.md в мастере · julianshapiro/velocity · GitHub» . Гитхаб.com . Проверено 13 февраля 2021 г.
- ^ «История package.json — julianshapiro/velocity · GitHub» . Гитхаб.com . Проверено 13 февраля 2021 г.
- ^ Перейти обратно: а б Джулианшапиро (9 октября 2014 г.). «velocity/LICENSE.md в мастере · julianshapiro/velocity · GitHub» . Гитхаб.com . Проверено 20 января 2016 г.
- ^ Перейти обратно: а б «JavaScript-анимация» . 15 июня 2015 г.
- ^ «Основной разработчик технологий с открытым исходным кодом Джулиан Шапиро приоткрывает завесу над использованием SAAS» . Форбс.com . Проверено 20 января 2016 г.
- ^ «Velocity.js для дизайнеров» . Студия Волк . Проверено 20 января 2016 г.
- ^ Перейти обратно: а б «CSS против JS-анимации: что быстрее?» . 28 апреля 2014 г.
- ^ «Velocity — мощный инструмент библиотек JavaScript» . 11 октября 2017 г.
- ^ Джулиан Шапиро (16 июня 2014 г.). «Невероятно быстрая анимация пользовательского интерфейса с использованием Velocity.js» . Sitepoint.com . Проверено 20 января 2016 г.
- ^ «Поиск · звезды:>1 · GitHub» . Гитхаб.com . Проверено 20 января 2016 г.
- ^ «Шорт-лист The Net Awards 2015, отмечающий лучших в области веб-дизайна и разработки» . Thenetawards.com . Проверено 20 января 2016 г.
- ^ «Анимация без jQuery – Smashing Magazine» . Smashingmagazine.com. 04.09.2014 . Проверено 20 января 2016 г.
- ^ «Простое введение в SVG-анимацию» . 31 июля 2014 г.
- ^ «Используйте Velocity.js для применения изящных эффектов движения, подобных приложениям | JavaScript | Веб-дизайнер» . Webdesignermag.co.uk. 21 января 2015 г. Проверено 20 января 2016 г.
- ^ "Велосити.js" . Джулиан.com . Проверено 20 января 2016 г.
- ^ Команда, Awwwards. «Интервью с Джулианом Шапиро» . Awwwards.com . Проверено 20 января 2016 г.
- ^ Шапиро, Джулиан (21 мая 2014 г.). «Относитесь к открытому исходному коду как к стартапу ★ Mozilla Hacks — блог веб-разработчиков» . Hacks.mozilla.org . Проверено 20 января 2016 г.
- ^ Грег Брокман (6 июня 2014 г.). «Грантеры ретрита с открытым исходным кодом» . Stripe.com . Проверено 20 января 2016 г.
- ^ Аурелио Де Роза (23 июня 2014 г.). «Простое улучшение анимации jQuery» . Sitepoint.com . Проверено 20 января 2016 г.
- ^ Сделайте ремикс на это видео (06.09.2014). «Velocity Motion Designer: обзор» . Ютуб . Проверено 20 января 2016 г.
- ^ «Соавторы Джулианшапиро/Velocity» . Гитхаб .