Просматривая Интернет в поисках аккуратной библиотеки анимации Javascript, я нашел множество «рекомендуемых» библиотек анимации, которые некоторое время не поддерживались.
После некоторых исследований я собрал 11 лучших библиотек для использования в вашем приложении. Я также добавил несколько, в основном не поддерживаемых, полезных библиотек.
При использовании компонентов пользовательского интерфейса вы также можете использоватьBitЛегко обменивайтесь этими компонентами между различными приложениями вместо их копирования и вставки, внесения изменений из разных проектов и совместной работы с другими проектами.
Bit — делитесь и создавайте с помощью компонентов кода _Bit помогает вам обмениваться, находить и использовать компоненты кода между проектами и приложениями для создания новых функций и... _bitsrc.io
Используйте чистый CSS
Прежде чем погрузиться в эти библиотеки, не забудьте использовать чистый CSS. Почему? Поскольку он является стандартным, он повышает производительность (GPU), обеспечивает обратную и прямую совместимость и, вероятно, является наиболее эффективным способом создания анимации. здесь есть10 примеров анимации на чистом чистом CSS.
1. Three.js
Эта популярная библиотека с более чем 43 тысячами звезд является отличным способом создания 3D-анимации в браузере с использованием WebGL. поставка<canvas>,<svg>, средства визуализации CSS3D и WebGL, эта библиотека позволяет нам создавать богатые интерактивные возможности для разных устройств и браузеров. Библиотека, впервые запущенная в апреле 2010 года, до сих пор разрабатывается почти 1000 участниками.
mrdoob/three.js_three.js — 3D-библиотека JavaScript._github.com
2. Anime.js
Аниме с более чем 20 тысячами звезд — это библиотека анимации JavaScript, которая может обрабатывать свойства CSS, отдельные переходы CSS, SVG или любые свойства DOM, а также объекты JavaScript. Эта библиотека позволяет вам связывать несколько свойств анимации, синхронизировать несколько экземпляров, создавать временные шкалы и многое другое.
juliangarnier/anime_anime — JavaScript Animation Engine_github.com
3. Mo.js
Эта библиотека имеет 14 000 звезд и представляет собой набор инструментов для создания анимированной графики для Интернета с простым декларативным API, совместимостью между устройствами и более чем 1500 модульных тестов. Вы можете перемещать предметы по DOME или SVG DOME или создавать уникальные объекты mo.js. Хотя документации несколько скудно, примеров много, вот несколько приемов CSSпредставлять.
legomushroom/mojs_mojs — инструментарий анимированной графики для web_github.com
4. Velocity
В компании 15Kstars Velocity представляет собой быстрый механизм анимации Javascript с тем же API, что и $.animate() в jQuery. Он имеет цветную анимацию, преобразования, зацикливание, смягчение, поддержку SVG и прокрутку. Это высокопроизводительный двигатель Velocity.подразделение, вот SVG с использованием библиотекиВведение в анимацию.
julianshapiro/velocity_velocity — Ускоренная анимация JavaScript._github.com
5. Popmotion
На 14Kstars эта функциональная и реактивная библиотека анимации весит всего 11 КБ. Это позволяет разработчикам создавать анимации и взаимодействия из действий, которые можно запускать и останавливать, а также создавать с помощью CSS, SVG, React, three.js и любого API, который принимает числа в качестве входных данных.
Popmotion/popmotion_popmotion — функциональная библиотека реактивной анимации._github.com
6. Vivus
Vivus, получивший более 10 тысяч звезд, представляет собой класс JavaScript с нулевой зависимостью, который позволяет анимировать SVG, чтобы они выглядели нарисованными. Вы можете использовать одну из множества доступных анимаций или создать собственный скрипт для рисования SVG. Проверьте Vivus-instant для живого примера, чтобы получить его в свои руки.
maxwellito/vivus_vivus — JavaScript-библиотека для анимации рисования на SVG_github.com.
7. GreenSock JS
GSAP — это библиотека JavaScript для создания высокопроизводительной кроссбраузерной анимации с нулевой зависимостью, которая, как утверждается, используется более чем на 4 миллионах веб-сайтов. GSAP очень гибкий и может использоваться с React, Vue, Angular и vanilla JS.GSDevtoolsТакже может помочь улучшить анимацию, созданную с помощью GSAP.
greensock/GreenSock-JS_GreenSock-JS — библиотека JavaScript-анимации GreenSock GSAP (включая Draggable)._github.com
8. Scroll Reveal
С 15 тысячами звезд и нулевыми зависимостями библиотека предоставляет простые анимации прокрутки для веб-браузеров и мобильных браузеров для анимации прокручиваемого контента. Он поддерживает несколько изящных эффектов и даже позволяет вам определять анимацию с использованием естественного языка. это короткийУчебное пособие по SitePoint.
jlmakes/scrollreveal_scrollreveal — Простая анимация прокрутки для веб-браузеров и мобильных браузеров._github.com
9. Hover (CSS)
Ну, это библиотека CSS. На 20 000 звезд Hover предоставляет набор мощного зависания CSS3, который можно применять к ссылкам, кнопкам, логотипам, svg, избранным изображениям и т. д., можно использовать в CSS, SASS и LESS. Вы можете копировать и вставлять эффекты, которые хотите использовать, в свою собственную таблицу стилей или справочную таблицу стилей.
IanLunn/Hover_Hover — Набор CSS3-эффектов наведения для применения к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. д.…_github.com
10. Kute.js
Полноценный собственный движок анимации JavaScript с базовыми функциями для кросс-браузерной анимации. Основное внимание уделяется качеству кода, гибкости, производительности и размеру (основной движок составляет 17 КБ в минуту и 5,5 КБ в сжатом виде) — этодемо. Библиотека также доступнарасширять, так что вы можете добавить свой собственный функционал.
thednp/kute.js_kute.js - Kute.js - это родной анимационный двигатель JavaScript с отличным качеством кода, характеристики Badass, SVG ... _Github.com
11. Typed.js
Эта звездная библиотека 6K в основном позволяет создавать анимацию набора текста для строк с выбранной скоростью. Вы также можете размещать HTML-элементы div на странице и читать их, чтобы предоставить доступ поисковым системам и пользователям с отключенным JavaScript. Эта библиотека, используемая Slack и другими, одновременно популярна и удивительно полезна.
mattboldt/typed.js_typed.js — Анимация набора текста в JavaScript Library_github.com
- Также см:iTyped
Отложенные добавления: AirbnbLottie
Lottie — мобильная библиотека для Интернета, iOS для парсинга использованияBodymovinэкспортировать как jsonAdobe After Effectsанимацию и визуализировать ее нативно.
airbnb/lottie-web_lottie-web — рендеринг анимаций After Effects изначально в Интернете, Android и iOS, а также React Native…_github.com