CC BY
267
УДК 004.915+004.4'27
ОБЗОР ГРАФИЧЕСКИХ JAVASCRIPT-БИБЛИОТЕК ДЛЯ СОЗДАНИЯ ИНТЕРАКТИВНЫХ ЭЛЕКТРОННЫХ
ИЗДАНИЙ
Лазарева Ольга Юрьевна
ассистент кафедры информатики и информационных технологий Московский государственный университет печати имени Ивана Федорова 127550 Россия, г. Москва, ул. Прянишникова, д. 2А lazarevaoy@gmail. гы
Ложкина Дарья Дмитриевна
студентка института принтмедиа и информационных технологий Московский государственный университет печати имени Ивана Федорова 127550 Россия, г. Москва, ул. Прянишникова, д. 2А lozhkina-daгya@yandex. гы
Аннотация. В работе рассматриваются графические библиотеки JavaScript, такие как Two.js, SVG.js, Snap.svg, D3.js, Jim Knopf, Walkway.js, Vivus.js, Interact.js, и возможности их использования в Adobe Digital Publishing Solution для добавления интерактивности электронным изданиям.
Ключевые слова: графические JavaScript-библиотеки, Adobe Digital Publishing Solution, Two.js, SVG.js, Snap.svg, D3.js
Современные электронные издания [1-3] должны отвечать большому количеству требований: качественный контент, красивое оформление, наличие интерактивности и мультимедийности. Новый продукт компании Adobe — Digital Publishing Solution [4, 5] облегчает задачу создания интерактивности в приложениях и электронных изданиях. Создавать панорамы, галереи изображений, 3D-объекты, прокрутку текста возможно без написания кода, истользуя только инструменты DPS (Digital Publishing Solution). Также данная платформа предусматривает возможность встраивания JavaScript и HTML-кода, что позволяет сделать издание еще более интересным для пользователя. Один из важных элементов при разработке электронного издания или веб-сайта — простота, это стало причиной появления такого большого количества библиотек JavaScript, в том числе графических [6]. Библиотека JavaScript — это сборник классов и/или функций на языке JavaScript [7].
Графические библиотеки JavaScript помогают создавать графику и анимацию, которая позволяет «оживить» страницы издания.
Библиотека SVG.js
SVG.js — компактная библиотека на JavaScript, созданная для работы с SVG-файлами без ограничений (управление и анимация). Поддерживает анимацию позиции, размера, цвета и анимацию с трансформацией. SVG.JS также включает возможность привязывать события к элементам, создавать динамический градиент, задавать прозрачность и настраивать анимацию текста [8].
Библиотека Snap.svg
Snap.svg — это библиотека JavaScript, которая призвана помогать веб-разработчикам поставлять расширенные возможности SVG в Интернет. Данная
библиотека в состоянии загружать, анимировать и даже создавать SVG-графику прямо в браузере. Эта библиотека была разработана для современных браузеров и поддерживает самые новые SVG-свойства вроде маскирования, паттернов, градиентов, группирования и многого другого. Здесь можно отметить несколько очевидных преимуществ, как, например то, что векторную графику можно масштабировать без потери качества. При помощи Snap.svg (рис. 1) можно создавать новые SVG-элементы и работать с теми, которые были разработаны ранее при помощи программ Adobe Illustrator, Inkscape или Sketch, также можно синхронно загружать строки SVG и программировать отдельные фрагменты, что позволяет превратить SVG в спрайт-изображение [8].
Рис. 1. Изображения, созданные с помощью библиотеки Snap.svg
Библиотека Two.js
Two.js позволяет работать с SVG-, Canvas- и WebGL-анимацией. Библиотека сосредоточена на 2D-объектах и позволяет изменять их размер, вращать, перемещать и т.п. В нее входит SVG-конвертер, который позволяет преобразовать файлы из редактора векторной графики в рабочую среду Two.js для дальнейшего манипулирования объектами.
Библиотека Lazy Line Painter
Маленький плагин для SVG анимации рисования линий также хорошо и со стилем выполняет свою задачу. Необходимо пройти три этапа для получения готовой анимации: экспортируем линейную анимацию из Adobe Illustrator как svg-файл, вставляем его в конвертер на сайте, получаем готовый js-код [8].
Библиотека D3.js
D3.js — один из лучших инструментов для интерактивной визуализации сложных данных. Название библиотеке D3 дано по первым буквам D слов Data-Driven Documents, что можно перевести как «документы, движимые данными».
D3 — это JavaScript-библиотека, с помощью которой можно создавать как статичные, так и интерактивные визуализации сложных данных [9, 10].
Главная задача этой библиотеки — наглядная визуализация больших массивов данных, по которой можно было делать выводы и находить закономерности.
Библиотека D3.js (рис. 2) позволяет проводить групповые операции над элементами HTML-документов, применяя к ним данные из массива. Она предназначена для визуализации самой разной информации, и подход, примененный в этой библиотеке, оказался настолько успешным, что она используется в огромном количестве различных инструментов визуализации данных и десятках библиотек JavaScript для построения графиков. Все, что потребуется для начала работы — это минимальные знания HTML, CSS JavaScript. Вначале программируется алгоритм и внешний вид, а затем необходимо загрузить «сырые» данные, которые преобразуются в соответствии с заданными параметрами [9].
Рис. 2. Анимация, созданная с помощью библиотеки D3.js
Библиотеки Walkway.js и Vivus.js
Обе библиотеки максимально просты в использовании и применимы только для path-элементов, поскольку принцип их работы основывается на взаимодействии с CSS свойством strokeDashoffset.
Walkway.js — компактная JavasCript-библиотека
для легкого анимирования SVG-графики, состоящей из линейных и контурных элементов [11]. Библиотека включает простые встроенные функции, а также содержит опции для выбора и установки продолжительности анимации. В настоящее время Walkway.js работает узкоспециализировано только для создания пути и линейных элементов.
Vivus.js — это JavaScript-класс для анимирования SVG без необходимости введения зависимостей. Он позволяет создать асинхронную анимацию, установить задержку и пошаговое выполнение анимации. Так же для создания линий и путей [12].
Библиотека Interact.js
Interact.js — это JavaScript-библиотека для перемещения (drag and drop), масштабирования, вращения и прочих трансформаций блоков с инерцией и привязкой (snap), позволяет перетаскивать SVG и ключевые точки в SVG-объектах. Работает во всех современных браузерах, поддерживает мобильные устройства и мультитач-жесты (multi-touch gestures), не зависит от сторонних библиотек. Представляет мощный API и событийную модель. Библиотека Interact.js — это компактное решение на замену объемных библиотек jQuery и jQuery UI.
Библиотека Jim Knopf
Jim Knopf — это JavaScript библиотека для создания переключателей на основе SVG, также библиотека для создания выпуклостей при помощи SVG. Библиотека не требует установки каких-либо JS-фреймворков и поставляется со встроенными типами переключателей. Созданные элементы управления можно полностью масштабировать (благодаря SVG), их дизайн можно настраивать с помощью CSS.
Кроме того, они могут управляться с помощью курсора мыши, колесика мыши, клавиатуры или тачпада. Существуют опции для установки минимальных и максимальных значений, начального положения и допустимого угла поворота переключателя и т.д. [8]
В настоящее время разработчики электронных изданий вынуждены создавать контент, который был бы не только функциональным и быстроработающим, но и привлекательным для пользователя. Причем последнее играет далеко не последнюю роль. Adobe Digital Publishing Solution — следующее поколение платформы для электронного издательства на мобильных платформах и разработки мобильных приложений, которое позволяет создавать красивый графический и анимационный контент, используя графические Ja-vaScript-библиотеки и встроенные средства DPS.
БИБЛИОГРАФИЧЕСКИЙ СПИСОК
1. Попов Д.И., Арсентьев Д.А., Демидов Д.Г. Программные продукты и технологии для подготовки и создания электронных изданий // Университетская книга: традиции и современность : материалы научно-практической конференции. — Ростов н/Д: Изд-во Южного федерального ун-та, 2015. — С. 102-111.
2. Арсентьев Д.А. Оформление и дизайн электронных изданий. — М.: Изд-во Моск. гос. унт-та печати, 2010. — 174 с.
3. Демидов Д.Г., Федоренко Н.М. Введение в электронные издания. — М.: МГУП, 2009. — 150 с.
4. Лазарева О.Ю., Боломутова М.С. Обзор платформ для разработки и публикации электронных мобильных изданий // Вестник МГУП имени Ивана Федорова. — 2015. — № 5. — С. 1416.
5. Лазарева О.Ю., Ложкина Д.Д. Возможности платформы Adobe Digital Publishing Solution // Вестник МГУП имени Ивана Федорова. — 2015. — № 5. — С. 22-24.
6. Лазарева О.Ю., Грушина Т.С. Выбор библиотеки для разработки веб-сервиса визуализации когнитивной карты // Вестник МГУП имени Ивана Федорова. — 2015. — № 1. — С. 116-122.
7. Библиотека JavaScript [Электронный ресурс]. URL: https ://ru.wikipedia. org/wiki/Библиотека_ JavaScript (дата обращения: 19.03.2016).
8. 10 JavaScript библиотек SVG анимации [Электронный ресурс]. URL: http://postovoy.net/10-javascript-bibliotek-dlya-svg-animacii.html (дата обращения: 19.03.2016).
9. D3js [Электронный ресурс]. URL: https://d3js.org/ (дата обращения: 19.03.2016).
10. Mastering D3.js. Pablo Navarro Castillo — Packt Publishing Ltd, 2014. — 352 p.
11. Несколько интересностей и полезностей для веб-разработчика [Электронный ресурс]. URL: https://habrahabr.ru/post/243343/heskaya-proekciya/ (дата обращения: 19.03.2016).
12. 14 JavaScript библиотек для создания анимации, графиков и диаграмм [Электронный ресурс]. URL: https://te-st.ru/2015/03/24/javascript-chart-and-graph-libraries/ (дата обращения: 19.03.2016).
REVIEW OF GRAPHICAL JAVASCRIPT LIBRARIES FOR CREATION OF INTERACTIVE ELECTRONIC
PUBLICATIONS
Olga Yurievna Lazareva
Moscow State University of Printing Arts 127550Russia, Moscow, Pryanishnikova st., 2A
Darya Dmitrievna Lozhkina
Moscow State University of Printing Arts 127550Russia, Moscow, Pryanishnikova st., 2A
Annotation. This paper considers graphical JavaScript libraries such as Two.js, SVG.js, Snap.svg, D3.js, Jim Knopf, Walkway.js, Vivus.js, Interact.js, and the possibility of their use in the Adobe Digital Publishing Solution for adding interactivity to electronic publications.
Keywords: graphical JavaScript libraries, Adobe Digital Publishing Solution, Two.js, SVG.js, Snap.svg, D3.js.
