8 ЈаваСцрипт библиотека за анимацију СВГ-а
СВГ је графика независна од резолуције. То значи да хоће изгледају добро на било којој врсти екрана без губитка квалитета. Осим тога, СВГ може оживјети и са неким анимацијским ефектима.
У једном од постова наше СВГ серије раније, показали смо вам како СВГ анимација ради са
Више на Хонгкиат.цом:
- Анимате.цсс - ЦСС3 Либрари за лако креирање анимације
- Лако анимирајте текст помоћу Тектиллате.јс
- Како претворити Пхотосхоп текст у СВГ
- Анимирајте да бисте сакрили и слали садржај помоћу јКуери
1. Вивус
Вивус је ЈаваСцрипт библиотека која даје ваш СВГ изглед извлачења. Вивус ради ван оквира без потребе за било каквим зависностима (нпр. ЈКуери). Једноставно укључите .јс датотеку у ХТМЛ-у и одредите СВГ елемент који желите да анимирате, заједно са неким унапред подешеним опцијама да бисте одмах покренули анимацију.
На пример:
нови Вивус ('свг-елемент', тип: 'онеБиОне', трајање: 200); Горе наведено ће анимирати мој СВГ елемент који има свг-елемент ИД у 200 милисекунди. Сваки елемент СВГ-а ће бити нацртан један за другим у том временском оквиру.
2. Бонсаи
Бонсаи је моћна ЈаваСцрипт библиотека која вам омогућава да цртате, претварате и анимирате графичке елементе на веб страницама. Подржава и ХТМЛ5 графички тип Цанвас и СВГ. Уз Бонсаи, можете направити једноставан правоугаоник или круг или ако желите, а пуноправни мултиплаиер анимирана игра попут ове. Можете да користите Орбит да осетите како Бонсаи ради у живој акцији или проверите неколико импресивних примера из којих можете црпсти инспирацију.
3. Велоцити
Велоцити је ЈаваСцрипт библиотека направљена за брзе анимације. Брзина је брзина при приказивању анимације невероватно брза. У поређењу са тим, он надмашује јКуери, па чак и ЦСС. АПИ Велоцити-а ради слично анимацији у јКуери-ју осим што користи псеудоним за кључне ријечи $ .велоцити () уместо $ .анимате (). Осим тога, можете користити исте кључне речи као што су фадеИн и избледети.
4. Рапхаел
РапхаелЈС је библиотека која вам омогућава да цртате као и анимирате векторски СВГ на веб страницама. Подржава широк спектар претраживача све до ИЕ6, што чини Рапхаела најзависнијом ЈаваСцрипт библиотеком у ниши. Уз РапхаелЈС, можете изградити интерактивне аналитичке карте, карте свијета и интеракције игара сличне онима у Цоунтер Стрике-у.
5. Снап
СнапСВГ је још једна популарна ЈаваСцрипт библиотека за СВГ анимацију коју је развио програмер Рапхаела, Дмитриј Барановски, заједно са тимом Адобе Веб Платформ из темеља. За разлику од Рапхаела, СнапСВГ је намењен само најновијим претраживачима. То омогућава да библиотека буде знатно мања од Рапхаела и да подржава СВГ функције као што су цлиппинг и маскинг.
6. Лази Лине Паинтер
Лази Лине Паинтер је јКуери плугин за анимирање СВГ путања да анимира редослед цртања, сличан Вивусу. Лоша вијест је да овај додатак ради само ову специфичну ствар. Стога, када увезете СВГ из апликација као што су Иллустратор или Инксцапе, осигурајте да у СВГ-у нема боје Филл, само путање.
7. СВГ.јс
СВГ.јс је лагана библиотека за манипулисање и анимирање СВГ-а. Помоћу ове библиотеке моћи ћете да анимирате величину, позицију или боју унутар вашег СВГ елемента. Не само да анимира; можете додати и додатне додатке да бисте додали додатне функционалности. Овај пример користи додатак свг.филтер.јс за примену филтера као што је Гауссиан Блур, десатурате, контраст, сепија итд..
8. Валкваи
Валкваи подржава три типа елемената, путања, лине, и полилинија користи за цртање СВГ линија. Ево примера из Полигона који приказује ПлаиСтатион 4 конзолну анимацију.
