11 лучших библиотек эффектов движения JavaScript

JavaScript

Перевод: сумасшедший технический ботаник оригинал:blog.bit SRC.IO/11 — Java удаляет RI…

Когда я ищу в Интернете хорошую библиотеку анимации Javascript, я всегда обнаруживаю, что многим из «рекомендуемых» библиотек не хватает постоянного обслуживания.

После некоторых исследований я собрал 11 лучших библиотек, которые вы можете использовать в своих проектах. Также я добавил несколько полезных библиотек, которым не требуется постоянное обслуживание.

намекать:Можно использоватьBitчтобы поделиться своими компонентами, используйте их для создания нескольких проектов и синхронизации изменений с вашей командой. Не изобретайте велосипед.

вот некоторыеReact spinners:

img

Каждый из вышеперечисленных компонентов можно найти и протестировать на сайте, а также использовать непосредственно в собственных проектах.

img

Используйте чистый CSS

Прежде чем погрузиться в эти библиотеки, не забудьте, что есть и чистый CSS. Почему? Поскольку он является стандартным, повышает производительность (GPU), обеспечивает отличную обратную и прямую совместимость, это, вероятно, самый эффективный способ создания динамических эффектов.

1. Three.js

img

Эта популярная библиотека с более чем 43 тысячами звезд является одним из лучших способов создания 3D-анимации в браузере с использованием WebGL. путем предоставления<canvas>,<svg>, средства визуализации CSS3D и WebGL, эта библиотека позволяет нам создавать богатые интерактивные возможности для разных устройств и браузеров. Библиотека была впервые запущена в апреле 2010 года и до сих пор разрабатывается почти 1000 участниками.

гитхаб:GitHub.com/Мистер не понимает ОО/Он и горячий…

2. Anime.js

img

Аниме с более чем 20 тысячами звезд — это библиотека анимации JavaScript, которая может обрабатывать свойства CSS, отдельные переходы CSS, SVG или любое свойство DOM, а также объекты JavaScript. Эта библиотека позволяет связывать несколько свойств анимации, синхронизировать несколько экземпляров, создавать временные шкалы и многое другое.

гитхаб:GitHub.com/Amazing позволяет вам…

3. Mo.js

img

Эта библиотека с 14 000 звездами представляет собой набор инструментов динамической графики для Интернета с простым декларативным API, совместимостью между устройствами и более чем 1500 модульных тестов. Вы можете перемещать созданную вами графику вокруг DOME или SVG DOME или создавать уникальные объекты mo.js. Хотя документации немного не хватает, примеров полно, а вот CSS-трюки mo.jsпредставлять.

гитхаб:GitHub.com/Лего Пастор Р ОО…

4. Velocity

Демо на codepen:код spray.IO/hone/spray/Azi…

Velocity — это быстрый анимационный движок Javascript с jQuery, получивший 15 тысяч звезд.$.animate().тот же API. Он имеет цветную анимацию, преобразования, циклы, градиенты, поддержку SVG и прокрутку. Это высокопроизводительный двигатель Velocity.подразделение, который представляет собой анимацию SVG с использованием библиотекиВведение.

гитхаб:GitHub.com/Julian — это API…

5. Popmotion

img

Размер этой библиотеки со звездой 14K составляет всего 11 КБ. Это позволяет разработчикам создавать анимации и взаимодействия из действий, представляющих собой потоки значений, которые можно запускать и останавливать, а также создавать с помощью CSS, SVG, React, three.js и любого API, принимающего числа в качестве входных данных.

гитхаб:GitHub.com/pop motion/afraid…

6. Vivus

img

С более чем 10 тысячами звезд Vivus — это класс JavaScript с нулевой зависимостью, который позволяет вам анимировать SVG, придавая им вид рисуемых объектов. Существует множество доступных шаблонов анимации, и для рисования SVG можно создавать собственные сценарии. иди туда самVivus-instantВзгляните на пример.

гитхаб:GitHub.com/Максвелл ITO/…

7. GreenSock JS

img

GSAP — это библиотека JavaScript для создания высокопроизводительных кроссбраузерных анимаций с нулевой зависимостью, которая, как утверждается, используется более чем на 4 миллионах веб-сайтов. GSAP очень гибкий и может использоваться с React, Vue, Angular и собственным JS.GSDevtoolsМожет помочь вам изменить анимацию, созданную с помощью GSAP.

гитхаб:GitHub.com/зеленый носок/G…

8. Scroll Reveal

img

Библиотека с 15 тысячами звезд и нулевыми зависимостями обеспечивает простую анимацию прокрутки для веб-браузеров и мобильных браузеров, способную анимировать прокручиваемый контент. Он поддерживает множество изящных эффектов и даже позволяет вам определять анимацию с использованием естественного языка. это короткийУчебное пособие по SitePoint.

гитхаб:GitHub.com/Даже Маркс/Сычуаньцы…

9. Hover (CSS)

img

Ну, это библиотека CSS. С 20 тысячами звезд Hover обеспечивает мощные эффекты наведения CSS3 для ссылок, кнопок, логотипов, SVG, изображений и т. д. Его можно использовать в CSS, Sass и LESS. Вы можете найти эффект, который хотите использовать, в своей собственной таблице стилей и просто скопировать и вставить его или указать ссылку на таблицу стилей.

гитхаб:GitHub.com/Ian LUN N/ho V…

10. Kute.js

img

Полноценный собственный движок анимации JavaScript с базовыми функциями для кросс-браузерной анимации. Но основное внимание уделяется качеству кода, гибкости, производительности и размеру (его основной движок имеет размер всего 17 КБ, а почтовый индекс — всего 5,5 КБ). вотдемо. Библиотека такжеМасштабируемость, так что вы можете добавить свой собственный функционал.

гитхаб:GitHub.com/Зал Высшей Гармонии/Суд…

11. Typed.js

img

Основная функциональность этой звездной библиотеки 6K заключается в том, чтобы позволить вам создавать анимацию набора текста с выбранной скоростью. Вы также можете разместить пользователя невидимым на странице<div>Пометьте и прочитайте контент, который вы хотите вывести из него, и поисковым системам будет удобно его сканировать. Эта библиотека очень популярна и полна новых идей.

гитхаб:GitHub.com/Луис Вин ICI U… Также есть iTyped:GitHub.com/Луис Вин ICI U…

полезный, но в плохом состоянии

Обратите внимание, что большинство из этих 8 библиотек не поддерживаются, поэтому используйте их с осторожностью.

Добро пожаловать на официальный аккаунт Jingcheng Yideng: Jingcheng Yideng, чтобы получить больше галантереи.

Категории