Очень важной частью хорошего внешнего интерфейса является анимация.Использование анимации, которая соответствует сцене, может не только оптимизировать детали взаимодействия на странице веб-сайта, улучшить взаимодействие с пользователем, но также сделать страницу более привлекательной и привлечь больше трафика на сайт. Веб-сайт. Если у вас нет возможности писать все виды анимационных анимаций, то можно собрать представленные ниже библиотеки анимаций~
Three.js
ThreeЭта популярная библиотека в настоящее время прорывается через56K Star, представляет собой средство визуализации WebGL по умолчанию, которое создает простую в использовании, облегченную 3D-библиотеку. В этом примере библиотека также предоставляет средства визуализации canvas 2D, SVG и CSS3D. threejs можно понимать как three + js, three означает 3D, а js означает javascript. Таким образом, three.js означает использование javascript для написания 3D-программ. Three.js — это отличная библиотека WebGL с открытым исходным кодом, которая позволяет JavaScript манипулировать графическим процессором и получать настоящее 3D на стороне браузера.
Если нам нужно использовать Threejs для рисования, нам просто нужно создать минимальную среду рисования. Внизу Threejs фактически вызывает API холста в html5 для реализации рисования. Но в отличие от того, как мы обычно рисуем 2D-изображения, эта библиотека предоставляетcanvas,svg,CSS3Dа такжеWebGLВизуализаторы, которые позволяют нам создавать богатые интерактивные возможности между устройствами и браузерами.ThreejsРазличные элементы, необходимые для 3D-рисования (такие как сцены, камеры, источники света, геометрические изображения, материалы и т. д.), инкапсулированы на верхнем уровне.
Официальные лица предоставили различные образцы, вот два образца, выбранные случайным образом для отображения:
Anime.js
AnimeВ настоящее время в библиотеке есть33K Star, Anime — это библиотека анимации JavaScript, которая работает со свойствами CSS, отдельными переходами CSS, SVG или любыми свойствами DOM и объектами JavaScript. Библиотека позволяет объединять несколько свойств анимации, синхронизировать несколько экземпляров вместе, создавать временные шкалы и многое другое.
Здесь мы также рассмотрим несколько крутых примеров взрыва.
- эффект цветения частицПример
- Наша цель - не только стремление к крутизне, но и знакомство с бизнес-сценой,Псевдоприветствие в форме змеи представляет спецэффекты
- Сотни строк кода для реализации эффекта цветения при щелчке мышью на холсте.Пример
Mo.js
Mo.jsЭта библиотека достигает15K Star, представляет собой набор инструментов для веб-дизайна анимированной графики с простым декларативным API, совместимостью между устройствами и более чем 1500 модульных тестов. Вы можете перемещать контент по DOME или SVG DOME или создавать уникальные объекты mo.js. Несмотря на то, что документация скудна, есть много примеров, и это введение в приемы CSS. Mo.js имеет хорошую совместимость:
- Chrome 4+
- Firefox 4+
- Opera 11.5+
- Safari 4+
- IE 9+
взять каштан
Velocity
Velocityэто быстрый механизм анимации Javascript с тем же API, что и $.animate() в jQuery, и в настоящее время16K Star. Он имеет такие функции, как цветная анимация, преобразование, цикл, масштабирование, поддержка SVG и прокрутка. Так как он в основном совместим с API Дафа JQ, он просто неизвестен нашему маленькому партнеру, и ему не обязательно быть знакомым с новым API напрямую.
popmotion
Эта функциональная библиотека анимации в настоящее время доступна17K Star, весь размер упаковки только11KB, оптимизированная и экстремальная библиотека анимации. Это позволяет разработчикам создавать анимации и взаимодействия на основе действий, представляющих собой потоки значений, которые можно запускать и останавливать, используя CSS, SVG, React, Three.js и любой API, принимающий числа в качестве входных данных.официальный сайт попмоушенПриведены богатые и исчерпывающие примеры. Включая Vue\React и другие демонстрационные примеры, библиотека анимации относительно кратка и проста в использовании, и ее более чем достаточно для выполнения основных бизнес-анимаций.Рекомендуется, чтобы друзья, которые только начинают, могут пойти в воду.
Typed.js
TypedНабрав это выделенная библиотека анимации, теперь имеет9K Star. Позволяет создать анимацию ввода строки с выбранной скоростью. Вы также можете разместить на странице HTML-элемент div и прочитать его, чтобы предоставить доступ поисковым системам и пользователям с отключенным JavaScript. Это и популярно, и удивительно полезно. Ниже мы просто пишем пример
Animate(css)
animate.cssЭто коллекция анимационных эффектов CSS, созданных с использованием анимации CSS3, в которой предустановлены многие виды часто используемых анимаций, и она очень проста в использовании. в настоящее время принадлежит63KStar — одна из основных библиотек CSS-анимации для фронтенд-друзей.Все динамические эффекты просматриваются в режиме реального времени, и ими очень удобно пользоваться.
Hover (css)
HoverЭто библиотека, обеспечивающая эффекты анимации при наведении курсора на CSS.22K Star, hover предоставляет набор поддерживаемых CSS3 эффектов наведения, которые можно применять к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. д., доступным в CSS, Sass и других версиях. Вы можете копировать и вставлять эффекты, которые хотите использовать, в свою собственную таблицу стилей или напрямую ссылаться на таблицу стилей.
Написано в конце, это несколько высококлассных и часто используемых библиотек, которые обычно разрабатываются и организуются в свободное время.Эта статья представляет собой простое введение.Эти библиотеки в основном оснащены полными документами и демонстрациями. это также требует, чтобы все исследовали вместе. Если у вас есть другие лучшие библиотеки, оставьте комментарий, и у нас будет возможность отсортировать их для вас в следующей волне.
Хоть библиотека и хороша, не жадничайте, попробуйте написать или написать от руки~
❤️ наконец-то Если вы находите этот контент вдохновляющим:
Поделитесь, чтобы больше людей могли увидеть этот контент (приветствуем похвалу и внимание)
Обратите внимание на публичный аккаунт «Front-end Gong Xiami» и делитесь галантереей фронт-энда каждую неделю.