Анимации средствами JavaScript
Интернет давно уже перестал быть источником исключительно текстовой информации. С каждым годом все больше и больше возможностей пытаются реализовать в онлайн режиме. Редкое приложение, даже не развлекательного характера, представлена без надлежащей графики. Стали появлятся потрясающие игры, написанные на JavaScript. Как пример можно привести Drawastickman
Так стали появлятся библиотеки, которые использует для работы SVG и VML и служат для облегчения работы с векторная графикой в вебе.
На текущий момент популярностью пользуются 3 библиотеки: Paper.js Vs. Processing.js Vs. Raphael.js. Их подробный анализ представлен здесь. В статье автор приводит все основные преимущества и недостатки каждого, а также критерии выбора для каждого случая.
Применить графику в интернете можно где угодно, не только в играх. Например, интерактивные графики, с помощью современных способов визуализации, позволяют отобращать намного больше полезное информации. Пример графика с помощью библиотеки Raphaёl
Целью данной работы была приобщиться к работе с графикой в Javascript. Я решил не начинать с нуля, Я попробывал продолжить уже существующий opensource проект. Таким образом был сделан форк opensource проекта
Этот проект посвящен реализации интеллект-карт на JS. Ключевую роль в приложении играет библиотека Raphaёl, которая позволяет делать объекты на странице по-настоящему интерактивными. Простой Javascript - умеет делать элементы движущимися. В свое время это была революция для интернета. Но сейчас, этим невозможно удивить искушенного пользователя.
На текущий момент развития интернет технологий, элементы в окне браузера должны двигаться плавно. Анимация их движения не должна уступать обычным приложениям. Именно это придало огромную популярность Raphaёl, и подобным ей библиотекам
Стоит также отметить, что качество анимации - это не единственное положительное их свойство. Также повышается производительность работы, по сравнению с ручными операциями над DOM. Особенно это становится заметно при большом количестве элементов
В целом, js-mindmap представляет собой небольшую библиотеку которая позволяет преобразовывать HTML набор элементв LI в дерево сущностей, которые отрисовывается в окне, с учетом иерархии.
Стоит отметить, что в проекте также используется javascript framework jQuery. Он не используется для анимации, но необходим для удобной работы с элементами DOM, а также используется для создания javascript модулей - виджетов - для структурирования кода
В мой форк были включены следующие дополнения:
- Была подключена библиотека Jquery UI, для работы с диалогами в приложении.
- Возможность добавлять элементы
- Возможность удалять элементы
- Возможность переименовать элементы
- Возможность изменять цвет
В качестве примера была создана небольшая интеллект-карта, которая описывает требования к сдача сайта магистра.
Приложение построено так, что отображает текущий элемент интеллект-карты, его предка, и дочерние элементы. При запуске отображается корень карты. После того, как один из его разделов будет выбран, он становится активным и перемещается в центр, расскрывая список своих дочерних элементов. Окно настроек становится активным после двойного щелчка по элементу. В окне пользователь получит возможность управлять отображаемой картой: производить добавление, удаление, и редактирование элементов.
Разумеется, исходники также являются открытыми для просмотра и изменения. Расположен проект в открытом доступе на крупнейшем open source коллекторе GitHub
Предалагется посмотреть Демо
К сожалению, Internet Explorer не совместим c Raphaёl. Я не считаю это проблемой, так как его доля на рынке стремительно уменьшается.
Для активации меню для элемента дерева дважды щелкните по нему
Источники:
- http://habrahabr.ru/post/140286
Подробное описание javascript библиотек: Paper.js Vs. Processing.js Vs. Raphael.js.
- http://habrahabr.ru/post/59386/
Обзор javascript библиотеки Raphael для анимации в Web
- http://ru.wikipedia.org/wiki/SVG
Определение термина SVG
- http://habrahabr.ru/post/41647/
Общее описание принципов построенея графики в javascript с примерами