2020 년에 사용할 최고의 JavaScript 애니메이션 라이브러리 10 개 이상

최고의 JavaScript 애니메이션 라이브러리


웹 사이트 방문자의 관심을 끌고 싶다면 애니메이션보다 더 좋은 점은 무엇입니까? 웹에서 자유롭게 사용할 수있는 많은 응용 프로그램 엔진을 사용하면 웹 사이트의 요소를 쉽게 페이드, 바운스 또는 후싱 할 수 있습니다. 오늘 포스트에서 볼 수 있습니다 JavaScript 애니메이션 라이브러리가 도움이되는 방법 모든 것.

먼저 JavaScript 애니메이션에 대해 조금

한 번의 동작 (예 : 전환)이 필요한 간단한 애니메이션을 추가하는 것이 중요합니다. 이를 위해 항상 간단한 CSS 애니메이션을 사용할 수 있습니다. 그러나보다 복잡하거나 고급 효과를 위해서는 JavaScript가 더 나은 도구입니다. CSS를 사용하는 것보다 JavaScript를 사용하여 애니메이션을 만드는 것이 더 어렵다는 것은 말할 나위도 없습니다..

그럼에도 불구하고 JavaScript는 CSS로는 할 수없는 것을 처리 할 수 ​​있습니다. 이를 통해 개발자는 여러 움직이는 부분을 조정해야하는 복잡한 애니메이션을보다 강력하게 제어 할 수 있습니다.

자바 스크립트 애니메이션은 요소 스타일에 점진적인 변경 사항을 추가하여 구현됩니다. 코드의 일부로 인라인으로 추가하거나 다른 객체에 포함시킬 수 있습니다. 렌더링 할 때 이러한 변경 사항은 타이머에 의해 호출됩니다. 또한 변경 시간 간격을 조정하여 애니메이션의 연속성을 제어 할 수 있습니다.

최고의 JavaScript 애니메이션 라이브러리

웹 사이트에 멋진 애니메이션을 추가하는 데 사용할 수있는 JavaScript 애니메이션 라이브러리 목록은 다음과 같습니다.

1. Anime.js

자바 스크립트 애니메이션 라이브러리 : Anime.js

Anime.js로이 JavaScript 애니메이션 라이브러리 목록을 시작하겠습니다. 이 가벼운 애니메이션 라이브러리는 35K + 이상의 별을 볼 수 있습니다. 깃 허브. 강력한 단일 API를 사용하여 HTML, CSS, JS, SVG 및 DOM 속성에 애니메이션을 적용 할 수 있습니다. 내장 스 태거 시스템을 사용하면 잔물결, 방향 이동, 추종 및 겹치는 효과를 간단하게 만들 수 있습니다. 이 시스템은 타이밍과 속성 모두에서 사용할 수 있습니다.

내장 콜백 및 제어 기능을 사용하면 할 수있는 일이 많이 있습니다. 예를 들어, 동기화 된 이벤트를 재생, 일시 정지, 제어, 역전 및 트리거 할 수 있습니다. 이 라이브러리를 사용하여 가능한 것이 무엇인지 확인하려면 다음을 방문하십시오. 코드 펜.

2. Velocity.js

Velocit.js

Velocity.js는 최고의 jQuery와 CSS 전환을 결합합니다. 17K에 가까운 별을 평가합니다. 깃 허브 WhatsApp 및 Mailchimp와 같은 유명한 사용자를 자랑합니다. 반복, 반전, 지연, 요소 숨기기 / 표시, 속성 수학 (+,-, *, /) 및 하드웨어 가속은 모두 기능의 일부.

Velocity.js를 사용하여 브라우저 창을 스크롤 할 수 있습니다. 브라우저에로드 된 jQuery와 독립적으로 작동하며 이전 애니메이션을 취소 할 수도 있습니다.

삼. 팝 모션

팝 모션

에 가까이 18K 별, Popmotion은 모든 JavaScript 환경을위한 기능성 애니메이션 라이브러리입니다. React, Three.js, A-Frame 및 PixiJS와 같은 숫자를 입력으로 받아들이는 거의 모든 API에서 작동 할 수 있습니다.

Popmotion의 무게는 11.7kB에 불과하지만 펀치를 포장합니다. 키 프레임, 붕괴, 여러 인스턴스 동기화를위한 타임 라인 등과 같은 애니메이션을 제공합니다. 일련의 애니메이션 또는 함수를 엇갈리게 배치하고 순수한 기능을 사용하여 자신 만의 구성을 구성.

4. Three.js

자바 스크립트 애니메이션 라이브러리 : Three.js

Three.js는 60K 이상의 별이있는 JavaScript 애니메이션 라이브러리 목록에서 최상위를 차지합니다. 깃 허브. 그것은 의존 WebGL 브라우저에서 3D 애니메이션 생성 및 렌더링.

도움이되는 수많은 문서가 있으며, 학습 곡선을 지나면이 라이브러리를 사용하여 달성 할 수있는 것이 많지 않습니다. 먼저 Three.js 편집기를 사용하여 장면을 만듭니다. 그런 다음 기하학적 도형을 추가하고 조명 및 카메라를 조정합니다. 머티리얼, 텍스처, 오브젝트, 컬러 및 포깅을 모두 조정할 수 있으며 최종 파일이 프로젝트에 게시됩니다..

5. GreenSock JS

GreenSock

GreenSock의 GSAP는 모든 주요 브라우저에서 애니메이션을 멋지게 보이게하는 작은 JavaScript 파일 세트와 함께 작동합니다. 여러 애니메이션 속성을 부드럽게 연결하고 브라우저 버그를 제거합니다..

GSAP 작업에는 Canvas에서 애니메이션을 만들고 장면의 객체 애니메이션을 포함합니다. 또한 경로를 따라 객체를 점진적으로 노출, 변형 또는 이동합니다. 이를 위해 SVGPlugins, PixiPlugin, WebGL, Adobe Animate 및 EaseJS와 같은 다양한 소프트웨어 응용 프로그램과 함께 작동합니다. 모듈 식 구조로 필요한 기능 만 선택할 수 있습니다. 8 백만 명의 사용자와 10K 이상의 별이 깃 허브, 이 강력한 라이브러리에는 많은 것들이 있습니다..

6. 애니 제스

애니 제스

이 목록의 JavaScript 라이브러리 중에서 AniJS는 다소 독특합니다. 간단한 ‘문과 같은’구조로 요소에 애니메이션을 추가 할 수있어 애니메이션을 처음 접하는 사람들에게 좋습니다. 또한 비 특정 특성으로 거의 모든 사람이 일상적인 UX 디자인에 사용할 수 있습니다..

의 위에 깃 허브, AniJS는 별 3.5K 이상을 평가합니다. 타사 라이브러리에 의존하지 않으며 일반적으로 개발 속도를 높이는 데 도움이됩니다. 그것은 안드로이드와 iOS뿐만 아니라 모든 인기있는 브라우저에서도 잘 작동합니다.

7. Mo.js

Mo.js

모션 그래픽은 애니메이션에서 중요한 역할을하며 Mo.js는 영향을 줄 수있는 옵션 중 하나입니다. 초보자를위한 다양한 자습서와 데모를 통해 초보자는 점에 기하학적 모양과 시간 애니메이션을 만들기가 어려울 수 있습니다..

API는 단순 해 보이지만 할 수있는 일이 많습니다. 툴킷에는 애니메이션을 만드는 데 도움이되는 곡선 편집기와 타임 라인 편집기와 애니메이션을 제어하는 ​​플레이어가 있습니다. 스 태거 링, 완화, 타임 라인 등을위한 다양한 모듈이 있습니다. 이 모든 것이 16K 스타에 가까운 Mo.js를 얻습니다. 깃 허브.

8. Vivus.js

자바 스크립트 애니메이션 라이브러리 : Vivus

화면에서 펜 드로잉을 실시간으로 흉내 내려면 Vivus로 마크를 누르십시오. 그려지는 인상을주는 SVG를 애니메이션 할 수 있습니다. 의존성이 없기 때문에 빠르고 가볍습니다..

사용 가능한 애니메이션 (지연, 동기화 또는 OneByOne) 중 하나를 선택할 수 있습니다. 그렇지 않으면 SVG를 그리는 사용자 지정 스크립트를 만들 수도 있습니다. 유연성을 높이기 위해 간단한 JavaScript 함수를 사용하여 각 경로의 애니메이션을 재정의 할 수 있습니다. 13K 이상의 사용자가이 라이브러리에 대한 추천을 제공합니다. 깃 허브.

9. ScrollReveal JS

ScrollReveal

스크롤하여 웹 요소를 애니메이션으로 표시하려는 경우 ScrollReveal은 실망하지 않습니다. 배우기 쉬운이 애니메이션 라이브러리는 종속성이없고 별표가 18.5K + 이상입니다. 깃 허브.

ScrollReveal은 다양한 유형의 효과를 지원하며 웹 및 모바일 브라우저와 잘 작동합니다. 기본적으로 베어 본 구성에서 작동하므로 창의성을위한 캔버스로 사용할 수 있습니다. 애니메이션의 효과를 극대화하려면 제작자는 애니메이션을 드물게 사용하는 것이 좋습니다.

10. Typed.js

Typed.js

Typed.js는 화면에서 입력을 애니메이션으로 만드는 간단한 라이브러리 (실제로 더 많은 플러그인)입니다. 문자열을 입력하면 방문자가 설정된 속도로 입력되는 것을 볼 수 있습니다. 뿐만 아니라 백 스페이스 버튼을 사용하여 새로운 문장을 시작할 수 있습니다. JS를 사용하지 않는 방문자도 볼 수 있도록하려면 페이지에 HTML div를 배치하면됩니다. 이렇게하면 봇과 검색 엔진도 입력 한 단어를 볼 수 있습니다.

이 라이브러리는 9.5K + 이상의 별을 평가합니다 깃 허브. 파워 유저에는 Slack과 Envato가 포함됩니다.

11. AirBnB에 의한 로트

JavaScript 애니메이션 라이브러리 : Lottie

Lottie는 고품질 그래픽과 렌더링 비용의 균형을 유지하는 경량 애니메이션 그래픽 형식입니다. 응용 프로그램을 더 작게 만들고 동적 기능을 포함합니다. 추가 소프트웨어없이 웹, Android, iOS 및 IoT에 사용할 수 있습니다..

Lottie는 JavaScript를 지원하는 모든 브라우저에서 실행할 수 있습니다. 애니메이션은 일반 텍스트로 저장되며 사람이 읽을 수 있습니다. 텍스트 데이터는 JSON 형식으로 저장되므로 모든 JavaScript 환경에서 쉽게 동화됩니다. 이것은 모바일 프론트 엔드를 향상시키기 위해 인기있는 애니메이션 그래픽 형식으로 만듭니다. 안드로이드 버전만으로도 약 30K 별을 즐깁니다. 깃 허브.

이 JavaSCript 애니메이션 라이브러리 목록의 끝에 도달 한 경우 다른 JavaScript 라이브러리 및 프레임 워크를 찾는 것이 좋습니다. 또는 최고의 React UI 구성 요소 라이브러리를 확인하십시오..

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map