26.07.2017
Среда 14:53

Привет, Гость
Ali Abai
Войти на сайт через:

Или зарегистрируйтесь
Категории
Авто [5]
Всяко разно [9]
Города и регионы [2]
Дом и быт [2]
Дизайн [0]
Закон [3]
Заметки [5]
Заработать [1]
Здоровье и красота [1]
Игры [0]
Интернет [4]
Кино [5]
Компьютеры и софт [0]
Кулинария [2]
Маркетинг [1]
Мобильная связь [1]
Музыка [1]
Недвижемость [0]
Неопознанное [0]
Производство [0]
Произведение [2]
Спорт [0]
Строительство и ремонт [1]
Тема связанная со строительством, строительными материалами, строительными компаниями, а так же с ремонтом домов, квартир, дач и т.п..
Туризм и отдых [1]
Учёба [3]
Хобби [1]
Экономика [1]
ЦОН филиал №2 п.Топар
Абайское такси АБВ

Новости г.Абай

Информация о происшествиях, событиях и многое другое

добавить на Яндекс
Быстрые сообщения
Рекламный блок
Опросник
Что установили в место памятника Абая К. в центре
Всего ответов: 363




10.02.2015

8 библиотек JavaScript, для анимации SVG


SVG - независимое от разрешения изображение. Это означает, что картинка будет выглядеть хорошо на любом типе экрана, не неся потери качества. Кроме того, Вы также можете заставлять SVG ожить с некоторыми эффектами анимации.

Мы совместно рассмотрим несколько библиотек JavaScript, что поможет расширить эффект анимацию SVG до профессионального уровня.

1. Vivus

Vivus - библиотека JavaScript, которая дает Вашему SVG оттянутое появление. Vivus работает без потребности в любых библиотеках (например, jQuery). Просто подключайте .js файл в свой HTML и определите элемент SVG, который Вы хотите анимировать, вместе с некоторыми предварительно установленными опциями для запуска анимации.

Например:

new Vivus( 'svg-element', { type: 'oneByOne', duration: 200 });

Этот код выше анимирует элемент SVG, у которого указан ID 'svg-element' в 200 миллисекундах. Каждый элемент этого SVG будет оттянут один за другим в указанном периоде времени.

2. Bonsai

Bonsai - мощная библиотека JavaScript, которая позволяет Вам тянуть, превращать, а также анимировать графические элементы на веб-страницах. Поддерживается в HTML5 графический тип Canvas и SVG. С Bonsai Вы можете создать простой прямоугольник или круг или если Вам нравится, законченная многопользовательская оживленная игра как эта. Вы можете использовать Orbit, чтобы увидеть, как работает Bonsai в кино с живыми актерами или просмотреть несколько таких впечатляющих примеров, чтобы черпать вдохновение.

3. Velocity

Velocity - библиотека JavaScript, созданная для быстрых анимаций. Скорость Velocity при рендеринге анимации невероятно быстра. Это выигрывает у jQuery, и даже CSS. Velocity`s API, подобно анимации в jQuery кроме того, что используют  псевдоним вызова $.velocity() вместо $.animate(). Вы можете использовать те же самые вызовы анимации, такие как постепенное появление и постепенное исчезновение.

4. Raphael

RaphaelJS - библиотека, которая позволяет Вам тянуть, а также анимировать векторное изображение SVG на веб-страницах. Это поддерживает большинство браузеров, что в значительной степени делает Raphael самой надежной библиотекой JavaScript в своей нише. С RaphaelJS Вы можете создать интерактивные аналитические диаграммы, мировые карты и игровые взаимодействия, схожие на Counter Strike.

5. Snap

SnapSVG - другая популярная библиотека JavaScript для анимации SVG, разработанной разработчиком Raphael, Дмитрием Барановским, вместе с Командой Adobe Web Platform с нуля. В отличие от Raphael, SnapSVG предназначается только для последних браузеров. Это позволяет библиотеке быть значительно меньше, чем Raphael и поддерживать функции SVG как отсечение и маскирование.

6. Lazy Line Painter

Lazy Line Painter - плагин jQuery для анимации путей SVG, анимирование последовательности рисунка, на подобне Vivus. Дурные вести - этот плагин, делает только эту очень определенную вещь. И значит, когда Вы импортируете SVG из приложений как Illustrator или Inkscape, должны убедиться, что нет никакой заливки на Вашем SVG.

7. SVG.js

SVG.js - легкая библиотека для управления и анимации SVG. С этой библиотекой Вы будете в состоянии анимировать размер, позицию или цвет в Вашем элементе SVG. Это не только анимация, Вы можете также применить дополнительные плагины, чтобы добавить дополнительную функциональность. Этот пример использует svg.filter.js плагин, чтобы применить фильтры как  размытие гаусса, desaturate, контраст, сепия и т.д. к изображению.

8. Walkway

Walkway поддерживает три типа элементов, пути, строки, и ломаная линия раньше проводила линии SVG. Вот пример Многоугольника, который показывает консольную анимацию PlayStation 4.



Рассказать друзьям
Категория: Интернет | Опубликовал: admin | Просмотров: 2036 | Комментарии: 0
Теги: javascript, Анимация, SVG, Animation



Фото к статье:

Комментарии с сайта

Уважаемые посетители, просим Вас оставлять свои комментарии. Ваши мнения и замечания по блогу "8 библиотек JavaScript, для анимации SVG" важны нам и особенно их авторам.
0 комментариев

Ваш комментарий
avatar