Вероятно, самая полная коллекция интерфейсных библиотек динамических эффектов.

внешний интерфейс CSS

Дата сбора — 28 февраля 2019 г., «★» — количество звезд проекта на github на тот момент.

Animate.css

  • 56401 ★
  • Кроссбраузерная базовая библиотека анимации, решение для многих базовых анимаций. От классических анимаций подпрыгивания до уникальных анимаций скручивания.
  • Размер файла: 55,2 КБ.

Bounce.js

  • 5754 ★
  • Библиотека анимации, которую можно спроектировать и настроить прямо в браузере, поставляется с полным компоновщиком веб-страниц, просто добавьте компонент, выберите предустановку, и вы получите код CSS.
  • В отличие от других подобных инструментов, это не просто библиотека, у него есть реальные функции, с которыми пользователи могут работать напрямую, и он поставляется с полным конструктором веб-страниц. Bounce.js — одна из немногих анимационных библиотек, которую можно разработать и настроить прямо в браузере.
  • Размер файла: 16 КБ.

Anime.js

  • 21084 ★
  • Поддерживает объекты CSS, DOM, SVG и JS.
  • Нажмите «Документация», чтобы просмотреть документ с описанием компонентов анимации для animejs; нажмите «Codepen», чтобы войти в библиотеку анимации и просмотреть редактируемые демонстрации и примеры анимации.
  • Добавляйте анимацию к различным элементам, таким как логотипы, кнопки, изображения и т. д. Он поддерживает различные распространенные триггерные механизмы, такие как щелчок, наведение и скольжение, и с его помощью вы можете определить серию анимаций.
  • Отсутствуют пользовательские эффекты
  • как потенциальная альтернатива Three JS

Magic Animations

  • 5754 ★
  • Очень похожая на Animate.css, это также библиотека CSS, которая предопределяет ряд анимационных эффектов. Но, вероятно, самое большое отличие от Animate.css заключается в том, что анимации, которые он определяет, более ослепительны и круты.
  • Множество анимаций на основе CSS3 с множеством пользовательских стилей, которые вы больше нигде не найдете. Это очень большая коллекция кодовых баз CSS3.
  • Размер файла: 36,5 КБ.

AniJS

  • 3427 ★
  • Библиотека движения, управляемая через JavaScript
  • Известная как «библиотека, которая может улучшить веб-дизайн без кодирования», она может более интуитивно обрабатывать анимацию с помощью простых команд, таких как if, on, do, to и т. д. Ее также можно использовать для управления предыдущим Animate.css для создания анимации. .
  • Размер файла: 10,5 кБ.

CSShake

  • 3781 ★
  • Элементарный дрожащий эффект. Библиотека сумасшедших трясущихся движений, включая направление (горизонтальное, вверх и вниз), тип (фиксированный, сумасшедший), интенсивность (сильная, слабая) и многое другое.
  • Анимация сумасшедшая и уникальная, и она не обязательно работает для каждого веб-сайта.
  • Размер файла: 78,8 КБ.

Velocity.js

  • 14692 ★
  • Простая в использовании, высокопроизводительная, многофункциональная облегченная библиотека JS-анимации. Он отлично работает с jQuery и не зависит от jQuery.
  • Поддержите нативные js, jq, реагируйте на написание, как поклонник vue, разочарован этим,В настоящее время нет плагинов, связанных с vue.
  • Размер файла: 34,8 КБ.

Mo.js (официальный сайт временно недоступен..)

  • 13461 ★
  • Это огромная библиотека движений, созданная исключительно для UI/UX-дизайна.
  • Mo.JS является модульным, вы можете легко удалить ненужные функции, чтобы обеспечить разумный размер и бесперебойную работу.
  • Официальный сайт недоступен, и автор, похоже, его больше не поддерживает, так что давайте искать другие варианты. . --АвторТвиты

Vivus.js

  • 10365 ★
  • Библиотека анимации SVG
  • Облегченная библиотека анимации JavaScript, которая, как и Lazy Line Painter, создает анимацию пути SVG с множеством различных анимаций на выбор, а также возможностью создавать собственные сценарии любым удобным для вас способом Draw SVG. Есть три типа анимации: задержка, синхронизация и последовательное рисование, а также функции синхронизации
  • без всяких зависимостей. Помимо использования SVG, Vivus JS можно использовать для создания красивых кнопок, а также доступны другие потрясающие анимации.

Hover.css

  • 20544 ★
  • Эффект наведения мыши. Предоставляет большое количество эффектов Hover, включая 2D-преобразования, преобразования значков, преобразования фона и многое другое. И его можно применять практически ко всем элементам, включая ссылки, кнопки, логотипы, SVG и даже изображения.
  • Размер файла: 104,2 КБ.

Snabbt.js

  • 5202 ★
  • Всего 5к, поэтому можно использовать в мобильных приложениях. И он также поддерживает синтаксис цепочки, вы можете легко писать сложные комбинации анимации.
  • DEMO:cards,Crazy sticks,Periodic table,Laser words

Dynamics.js

  • 7034 ★
  • Библиотека JS, которая может предоставить вам 9 стандартных эффектов движения, вы можете указать такие данные, как продолжительность, частота, ожидаемый размер и интенсивность, чтобы создать эффекты движения, соответствующие физическим эффектам.

GSAP(GreenSock JS)

  • 7767 ★
  • Вероятно, одна из самых крутых бесплатных анимационных библиотек. Он работает на чистом JavaScript и является одной из самых надежных анимационных библиотек. Такие библиотеки, как EaselJS, хорошо работают с SVG, элементами холста и даже с объектами jQuery. Мощная библиотека веб-анимации.

Popmotion

  • 13777 ★
  • Механизм движения JavaScript объемом 12 КБ для анимации, физики и отслеживания ввода.
  • Библиотека анимации JavaScript для пользовательского интерфейса, включающая четыре мощных инструмента с открытым исходным кодом: pose, popmotion, stylefire и framesync.
  • Библиотека анимации, похожая на Anime JS, для создания потрясающих анимаций в браузере. Библиотека также включает отслеживание указателя, физику пружин, 3D-анимацию и многое другое и может использоваться для создания функциональных, реактивных анимаций.

scrollreveal.js

  • 15499 ★
  • Библиотека JavaScript для определенных анимаций
  • Очень крутой эффект входа.
  • Создавайте очень крутые эффекты прокрутки, это легкий инструмент (без каких-либо зависимостей)
  • Работает с узлами DOM, несколькими контейнерами, асинхронным содержимым и поддерживает трехмерное вращение. ScrollReveal JS, вероятно, является лучшим инструментом для создания эффектов прокрутки, и он поддерживает большое количество браузеров, если они поддерживают функции CSS Transform и CSS Transition.

Lazy Line Painter

  • 1478 ★
  • Библиотека анимации SVG
  • Плагин JQUERY для анимации пути SVG, вы можете использовать его для простого создания анимации пути SVG. Выведите документ SVG в AI, загрузите его в конвертер, и он поможет вам преобразовать его в анимацию и создать документы jQuery. Вы также можете редактировать код для тонкой настройки.

It's Tuesday.

  • 371 ★
  • «Причудливая библиотека CSS-анимации», анимация внутри относительно «холодная».
  • С помощью этой библиотеки вы можете эффективно контролировать появление и исчезновение элементов на странице.
  • Анимации не такие уж крутые, они очень тонкие и действительно улучшают дизайн всей страницы с точки зрения эстетики и взаимодействия с пользователем.
  • Движение в основном известно своей плавностью и элегантностью.

CSS Animate

  • (Не нашел склад GitHub)
  • Позволяет вам установить больше параметров движения, например, вы можете установить координаты, размер и прозрачность начального и конечного состояний эффекта движения одновременно, а также можете создавать более сложные эффекты движения

AOS

  • 6613 ★
  • Полагаясь больше на CSS, он включает в себя серию красивых предопределенных анимаций, запускаемых событиями прокрутки.
  • Разработчики могут анимировать элементы страницы при прокрутке вниз, а затем восстанавливать предыдущее состояние анимации при прокрутке вверх. Эта библиотека также поставляется с рядом предопределенных событий, которые могут быть вызваны событиями прокрутки.

CSS3 Animation

  • (не нашел репозиторий github)
  • Очень простой и удобный в использовании инструмент анимации, вы можете управлять своей анимацией, перетаскивая некоторые индикаторы выполнения в простом графическом интерфейсе, который он предоставляет, сгенерированный код CSS будет автоматически отображаться в текстовом поле ниже, вы можете копировать и вставлять в ваше приложение для прямого использования

Particles JS

  • 15612 ★
  • Специальная библиотека JavaScript для анимации для создания потрясающих анимаций точек и линий.
  • Легкая анимация частиц JS библиотека с открытым исходным кодом
  • Позволяет разработчикам переключать такие параметры, как плотность, цвет, непрозрачность, форма и размер частиц. Однако, поскольку он работает только с фоном частиц, он не подходит для создания других типов анимации.

Three JS

  • 42569 ★

Single Element CSS Spinners

  • 5767 ★
  • Очень хороший набор анимаций CSS3 для загрузки состояний.

Odometer

  • 6531 ★
  • Он используется для анимации чисел, например, с его помощью вы можете хорошо представить связанные с числами анимационные эффекты, такие как увеличение количества людей на сайте, обратный отсчет и так далее.

Wicked CSS

  • 189 ★
  • Он в основном основан на коде CSS, позволяя объектам выполнять различные типы анимационных эффектов, таких как вращение, отражение и скольжение.

Animate Plus

  • 5124 ★
  • Легкая библиотека анимации, она весит всего 2 КБ, но в ней есть все основные функции, необходимые для пользовательских анимаций JavaScript.
  • Можно установить через npm

matter.js

  • 7989 ★
  • Безумное, близкое к реальному физическое движение, столкновение, библиотека инерциальной анимации.

parallax.js

  • 13601 ★
  • Этот эффект также очень распространен и похож на эффект визуального параллакса.
  • Сайт выглядит хорошо

animatable

  • 2450 ★
  • Одно свойство, две ценности, открывающие бесконечные возможности

DynCSS

  • 486 ★
  • Создавайте свои веб-страницы с помощью динамического CSS
  • Размер файла: 36,5 КБ

Favico.js

  • 8150 ★
  • Фавиконы для вашего сайта могут быть созданы с использованием видео, логотипов или изображений.
  • Размер файла: 8,9 КБ.

Kute.js

  • 1605 ★
  • Двигатель чистого движения с отличной производительностью. Он совместим со многими различными браузерами, в том числе с некоторыми относительно традиционными.

SVG.js

  • 6601 ★
  • Предоставляет вам более интуитивно понятную среду для редактирования анимации SVG. Он достаточно мал, синтаксис прост и предоставляет унифицированный API.

Motion UI

  • 857 ★
  • Создавайте интересные CSS-анимации с помощью SASS. Он содержит целый набор предопределенных эффектов, которые можно применять к различным компонентам HTML. Доступны все браузеры, кроме IE9.

WAIT! ANIMATE

  • 179 ★
  • Более простой способ создания анимации задержки и ожидания. Регулируя параметры на панели управления, вы можете добиться более естественных результатов.

choreographer.js

  • 1693 ★
  • Создавайте сложные эффекты движения с помощью пользовательских параметров.

sequence.js (последнее обслуживание 4 года назад)

  • 3373 ★
  • — это анимационный фреймворк на основе CSS для создания пошаговых адаптивных анимаций.

изменчивый (официальный сайт считает, что он больше не поддерживается)

  • 940 ★
  • Мощный, быстрый и гибкий движок анимации, который является проверенной альтернативой GreenSock.

bonsai.js

  • 1965 ★
  • Библиотека JS для расширенной обработки графики с очень простым и удобным API и средством визуализации SVG.

tween.js

transit

  • 7457 ★
  • На самом деле функций не так много, но они охватывают функции идеальных динамических эффектов от 2D до 3D.

rocket

  • 140 ★
  • Обеспечивает динамическое решение для объектов, перемещающихся из одной точки в другую, включая 8 специальных эффектов.

animo.js

  • 99 ★
  • Легкий инструмент обработки движения, он также поддерживает дополнительные плагины для достижения различных стилей эффектов движения, таких как обратный отсчет, вращение и т. д.

shift.css

  • (не нашел репозиторий github)
  • Фреймворк для создания адаптивной анимации элементов

saffron

  • 227 ★
  • Если вам нравятся миксины для легкого управления движением, Saffron обязательно понравится вам. Он написан на Sass, что упрощает установку параметров и переменных.

cssynth

  • (не нашел репозиторий github)
  • Легкий редактор с фиксированным движением, упрощающий настройку эффектов синхронизации или задержки, а затем загрузку соответствующего кода CSS или SCSS.

ceaser

  • (не нашел репозиторий github)
  • Проверенный временем инструмент анимации, создающий классические анимационные эффекты.

morf.js

  • 508 ★
  • Более 40 предопределенных анимаций, и вы можете настроить их в соответствии с вашими потребностями.

voxel.css

  • 3302 ★
  • Инструмент, предназначенный для 3D-рендеринга, даже если вы новичок, вы можете легко освоить 3D-стили CSS.

repaintless.css

  • 964 ★
  • Более плавная анимация с технологией FLIP

mixitup

  • 4173 ★
  • Очень полезная библиотека для создания красивых анимаций в интерфейсе концепций, сортировки, вставки и т.д.

wallop

  • 1156 ★
  • Изящный способ показать и скрыть объект пользовательского интерфейса

ramjet

  • 5246 ★
  • Анимируйте от одного элемента к другому, он работает с элементами DOM, SVG, статическими и динамическими изображениями.

jquery drawsvg

  • 672 ★
  • Основанный на движке jQuery, он может эффективно рисовать все пути в SVG и создавать драматические эффекты движения.

animatic.js

  • 1412 ★
  • Он объединяет правила физического движения и представляет переходы CSS, 3D-переходы и JS для функциональности. Его основная функция заключается в том, чтобы помочь вам сократить время и усилия, затрачиваемые на создание нескольких разных объектов одновременно.

Move.js

  • 4437 ★
  • Простой инструмент, который поможет вам создавать обычные анимации, такие как масштабирование, наклон, перемещение и т. д.

eg.js

  • (не нашел репозиторий github)
  • Коллекция динамических элементов, тщательно объединенных и подобранных для улучшения взаимодействия в интерфейсе, с 8 мощными компонентами, которые помогут вам разобраться в основных задачах.

GFX

  • 2446 ★
  • Привлекательная библиотека 3D-анимации для создания трансформирующей анимации CSS3. Его можно использовать с jQuery для вывода нужного вам эффекта.

stylie

  • 436 ★
  • Встроенные 4 вкладки для управления ключевыми кадрами, замедления, экспорта, HTML

iconate.js

  • 1927 ★
  • Это может сделать вашу анимацию перехода более динамичной и произвести более приятный эффект. Его можно связать с Font Awesome, его также можно использовать с Glyphicons или даже с вашими собственными иконками.

animatemate

  • 1277 ★
  • Небольшой инструмент генерации и экспорта движения для Sketch, он не прихотлив, он может помочь вам освоить ключевые кадры, добавить функции плавности, последовательности управления и многое другое.

CAAT (Canvas Advanced Animation Toolkit) (более устаревший)

  • 736 ★
  • Отличный фреймворк, который работает с JS, интегрируя такие компоненты, как сцены, методы рендеринга, маски обрезки и стандартные пакеты поведения.

Granim.js

  • 4166 ★
  • Небольшая JS-библиотека, помогающая создавать интересные визуальные эффекты путем создания градиентной анимации.

animista

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

obnoxious.css

  • 377 ★
  • Охватывает 5 видов анимационных эффектов на основе CSS, которые могут заставить определенные элементы колебаться, скручиваться, увеличиваться, стробироваться и автоматически изменять толщину шрифта.

animatelo

  • 415 ★
  • Содержит большое количество привлекающих внимание динамических эффектов, заимствованных из мощного Animate.css, а способ реализации более удобен, чем у последнего.

foxholder

  • 96 ★
  • Коллекция из 15 красивых анимаций, призванных улучшить взаимодействие пользователей с формами. Каждая анимация имеет свой эффект: некоторые могут сделать границу ярче, некоторые могут усилить визуальный сигнал и так далее.

rhythm.js

  • 3482 ★
  • Может принести интересный диско-ветер, может создать визуальный эффект, похожий на танец.

colorido.js

  • 7 ★
  • Colorido.js очень похож на Granim.js, этот плагин на основе JS был создан для управления материалами, связанными с цветом. Он может динамически управлять цветовым тоном и непрозрачностью, независимо от того, находятся ли фон, текст, линии или абзацы в пределах его контроля.

barba.js

  • 6802 ★
  • Используйте PJAX (на основе технологии Ajax), чтобы уменьшить ощущение смещения пользователя при обновлении динамического эффекта и разрешить контейнеру бесшумно переключаться между ними.

scrollanim

  • 1464 ★
  • Проще и легче контролировать. Поддерживается CSS3, но также можно добавлять анимацию с помощью JavaScript API.

scrolltrigger

  • 2174 ★
  • Используется для построения веб-страниц с горизонтальной прокруткой. Он позволяет использовать довольно простой синтаксис для создания красивых анимаций CSS3 по оси X.

force.js

  • 522 ★
  • В других инструментах анимации нет сложных опций, он содержит только некоторые базовые практические настройки анимации, которые помогут вам создавать тонкую анимацию.

rellax

  • 3769 ★
  • Созданная для красивой прокрутки параллакса, это легкая библиотека JavaScript Vanilla, которая может добавлять интересные 3D-эффекты в ваш интерфейс.

tilt.js

  • 2405 ★
  • Он может создавать захватывающий эффект наклонного параллакса, который эквивалентен имитации 3D-эффекта наклона в 2D-интерфейсе.

transform-when

  • 139 ★
  • Если вы хотите рассказать историю через веб-страницу, Transform-when — это очень хорошее решение, которое в основном помогает вам контролировать два фактора времени и положения прокрутки, а также помогает вам точно контролировать каждую анимацию в процессе просмотра. история.

curve.js

  • 1040 ★
  • Дайте жизнь линиям, заставьте их кружиться, как волны, и «танцевать».

animator.js

  • 67 ★
  • Гибкий, эффективный, легкий инструмент управления движением, который может управлять ключевыми кадрами и различными эффектами движения CSS, и самое главное, что он совершенно бесплатный.

cel-animation

  • 139 ★
  • Sass Mixin, вы можете управлять ключевыми словами, вы также можете настроить динамический SVG и любые элементы HTML.

scrollissimo

  • 119 ★
  • Это инструмент динамического дизайна, связанный с Greensock, который может создавать динамические объекты, которые перемещаются при прокрутке пользователем.

jqclouds

  • 48 ★
  • Очень простой плагин анимации, который генерирует движущиеся облака для заполнения страниц. Конечно, вы также можете заменить облако чем-то другим.

color animation

  • 27 ★
  • Эта анимация является инструментом, используемым для создания динамических изменений цвета.Объектами могут быть фоновые изображения, границы, текст и другие элементы.На самом деле, пока это элемент с атрибутами цвета, им можно управлять.

flubber

  • 4818 ★
  • Если вы хотите сделать процесс преобразования одного объекта в другой более плавным, то вы не должны упустить инструмент Flubber. Однако его недостатком является то, что он может воздействовать только на 2D-элементы.

3D LINES ANIMATION WITH THREE.JS

  • 231 ★
  • По сравнению с полнофункциональными инструментами анимации частиц выше, это всего лишь небольшой скрипт для добавления красивых эффектов частиц на ваш фон. Управляемые параметры включают цвет, линию и непрозрачность.

Snap.svg

Pixi.js

  • Быстрый и легкий движок рендеринга 2D-анимации.
  • В основном используя технологию webgl, он может помочь отображать интерактивную графику, управлять ею и управлять ею, а также создавать игры.
  • Используя Javascript и другие технологии HTML5 в сочетании с движком PixiJS, вы можете создавать насыщенную интерактивную графику, кроссплатформенные приложения и игры.
  • Размер файла: 55,2 КБ.

PACE.js

  • Плагин индикатора выполнения автоматической загрузки веб-страницы

WOW.js

  • 8760 ★
  • Плагин, который помогает вам запускать эффекты анимации CSS при прокрутке страниц.

Egret

  • Игровой движок, полный набор «игровых решений» для разработки игр.
  • тяжелее

Unity

  • Игровой движок.

Cocos

  • Игровой движок.

Как выбрать правильную технику анимации

Слишком много библиотек динамических эффектов, и я не знаю, какое решение больше подходит для реализации фронтенд-анимации, вы можете обратиться к этой статье."Как выбрать подходящую схему внешнего динамического эффекта? 》

Ссылаться на

Категории