최고의 무료 오픈 소스 JavaScript 애니메이션 라이브러리

올바르게 사용하면 애니메이션은 사용자 경험을 크게 향상시킬 수 있습니다. 웹 페이지에는 애니메이션을 적용하여 생생하게 만들 수 있는 요소가 많이 있습니다. 버튼의 배경색이나 웹 페이지의 특정 요소의 테두리 반경과 같은 기본적인 사항도 CSS를 사용하여 애니메이션으로 만들 수 있습니다.

그러나 CSS에는 한계가 있으므로 애니메이션 요소의 모든 측면을 더 효과적으로 제어하려면 JavaScript를 사용해야 합니다. 이 기사에서는 현재 프로젝트에서 사용할 수 있는 최고의 무료 오픈 소스 JavaScript 애니메이션 라이브러리 8개를 보여 드리겠습니다.

Mo.js

Mo.js는 웹사이트에 JavaScript 기반 모션 그래픽을 추가하기 위한 훌륭한 라이브러리입니다. 매우 빠르고, 부드러운 애니메이션을 생성하며, 다양한 장치에서 멋지게 보입니다. 또한 모듈식이므로 특정 구성 요소만 사용하려는 경우 추가 오버헤드를 피할 수 있습니다.

라이브러리에는 생성한 구성 요소에 대한 다양한 속성 값을 설정하기 위한 선언적 API가 있습니다. Html, Shape, ShapeSwirl 및 Burst라는 네 가지 내장 모듈이 함께 제공됩니다. 버스트와 소용돌이는 웹 사이트 요소와의 다양한 사용자 상호 작용에서 창의적으로 사용될 수 있습니다.

위 CodePen의 아무 곳이나 클릭하면 멋진 원과 별이 많이 보일 것입니다. mo.js의 Burst 및 Shape 모듈을 사용하여 LegoMushroom에서 만들었습니다.

mo.js' 문서는 라이브러리의 다양한 측면을 이해하는 데 도움이 되는 이와 같은 흥미로운 예제를 많이 제공합니다.

애니메이션

Anime는 GitHub에서 가장 인기 있는 애니메이션 라이브러리 중 하나입니다. 매우 가볍고 배우기 쉬운 API가 함께 제공됩니다. 이 라이브러리는 CSS 속성, SVG 및 DOM 속성에 애니메이션을 적용하는 데 사용할 수 있습니다.

요소의 애니메이션 방식을 다양하게 제어할 수 있습니다. 물체가 움직이는 속도, 방향, 순서를 제어할 수 있습니다. 이 작업을 선택할 때마다 애니메이션을 일시 중지, 다시 시작 또는 반전하도록 선택할 수 있습니다.

라이브러리는 SVG 애니메이션에 대한 우수한 지원도 제공합니다. 부드러운 변형 효과를 만들거나 서로 다른 두 SVG 모양 사이에 선 그리기 애니메이션을 만들 수 있습니다.

위의 CodePen에서 이름 쓰기 버튼을 클릭하면 내 이름의 글자가 하나씩 움직이는 것을 볼 수 있습니다. 이 데모는 애니메이션에 대한 일련의 튜토리얼의 일부입니다. 도서관에 대한 자세한 내용을 확인하실 수 있습니다.

인기 액션

Popmotion은 또 다른 가볍고 인기 있는 애니메이션 라이브러리입니다. 숫자, 색상, 복잡한 문자열에 애니메이션을 적용하는 데 사용할 수 있습니다. 라이브러리의 주요 애니메이션 기능은 약 5kb이고, 전체 라이브러리는 약 12kb입니다.

이를 사용하여 키프레임과 스프링이라는 두 가지 종류의 애니메이션을 만들 수 있습니다. 키프레임 애니메이션의 시작점과 끝점 등을 제공할 수 있습니다. 스프링 애니메이션에는 강성, 감쇠, 질량, 속도 등의 속성이 있어 애니메이션에 더욱 자연스러운 움직임을 제공합니다. 라이브러리에는 angle、clamp、distance、snapp 등과 같은 계산을 위한 많은 유틸리티 함수도 함께 제공됩니다.

위의 gaougalos CodePen 데모에 있는 키프레임 애니메이션은 Popmotion 라이브러리를 사용하여 제작되었습니다.

스크롤 디스플레이

ScrollReveal 라이브러리는 요소가 뷰포트 안팎으로 스크롤될 때 애니메이션을 적용하려는 경우 유용합니다.

요소에 애니메이션을 적용하는 데는 다양한 옵션이 있습니다. 지연, 기간 및 간격 속성을 사용하여 애니메이션 진행을 제어할 수 있습니다. 표시할 개체의 회전, 크기 조정 및 이동을 제어하는 ​​옵션도 있습니다. 라이브러리에는 요소가 표시되기 전이나 후에 무슨 일이 일어나는지 결정하는 데 사용할 수 있는 콜백도 함께 제공됩니다.

Sava Lazic의 위 CodePen 데모는 ScrollReveal 라이브러리를 사용하여 시각적으로 매력적인 수직 타임라인을 만듭니다. 웹사이트에 제품이나 프로젝트를 소개하는 것과 유사한 콘텐츠를 만들 수 있습니다.

살아있다

Vivus는 SVG 애니메이션 제작을 위해 특별히 제작된 놀라운 JavaScript 기반 애니메이션 라이브러리입니다. 매우 가볍고 종속성이 없습니다.

Vivus는 SVG에서 경로에 애니메이션을 적용하는 세 가지 방법을 제공합니다. 모든 라인을 한 번에, 지연을 통해 또는 차례로 애니메이션할 수 있습니다. 또한 애니메이션 타이밍을 조정할 때 많은 유연성을 제공합니다.

Vivus를 사용할 때 기억해야 할 몇 가지 사항은 항상 SVG에 정의된 순서대로 요소에 애니메이션을 적용한다는 것입니다. 또한 애니메이션을 적용하려는 요소에는 채우기가 아닌 획이 있어야 합니다.

위의 Alex Nelson의 CodePen 데모에 있는 SVG 경로 애니메이션은 단 6줄의 코드와 Vivus의 도움을 받아 만들어졌습니다.

Typed.js

Typed.js라는 이름에서 이 애니메이션 라이브러리가 텍스트를 입력하는 데 사용된다는 것을 짐작할 수 있습니다. 입력하려는 문자열을 모두 배열로 전달할 수 있습니다. 또한 라이브러리는 웹 페이지의 HTML div을 입력하여 애니메이션하려는 텍스트를 읽는 보다 SEO 친화적인 방법을 구현합니다.

일련의 매개변수를 사용하여 타이핑 애니메이션의 동작을 미세 조정할 수 있습니다. 여기에는 입력 속도, 백스페이스 속도, 시작 지연, 백스페이스 지연, 루프 횟수 등이 포함됩니다. 또한 다양한 이벤트(예: 문자열 입력 후)에서 실행되는 여러 콜백 함수를 정의할 수도 있습니다.

위의 Conner의 CodePen은 이 라이브러리를 사용하여 지루한 404 오류 페이지를 흥미롭게 만드는 방법을 보여줍니다.

ProgressBar.js

완료하는 데 시간이 걸리는 프로세스에는 진행률 표시줄을 추가하는 것이 좋습니다. 이를 통해 사용자는 작업이 얼마나 빨리 진행되고 있는지 알 수 있습니다. 예를 들어, 온라인 이미지 편집기에 진행률 표시줄을 표시하여 사용자에게 페이지가 중단되었을 뿐만 아니라 이미지가 실제로 백그라운드에서 처리되고 있음을 알릴 수 있습니다.

ProgressBar.js 라이브러리를 사용하면 개발자가 자신의 웹사이트에 스타일리시한 진행률 표시줄을 매우 쉽게 추가할 수 있습니다. 선, 원, 반원 등 기본 제공 모양을 사용하여 진행률 표시줄을 만드는 것 외에도 사용자 정의 모양을 사용하도록 선택할 수도 있습니다. 이는 다양한 흥미로운 가능성을 열어줍니다.

위 데모에서 볼 수 있듯이 진행률 표시줄에서 다양한 속성에 애니메이션을 적용할 수 있습니다. 이 소개 ProgressBar.js 튜토리얼을 확인하여 라이브러리에 대해 자세히 알아볼 수 있습니다.

로티

Airbnb용 Lotie는 지금까지 논의한 다른 애니메이션 라이브러리와는 다른 애니메이션 라이브러리입니다. Bodymovin을 사용하여 JSON으로 내보낸 Adobe After Effects로 만든 애니메이션을 구문 분석합니다. 그런 다음 이러한 효과를 웹 페이지에서 직접 렌더링할 수 있습니다.

도서관의 GitHub 페이지에서는 설치 과정과 작동 방식을 자세히 설명합니다. 애니메이션 진행을 제어하는 ​​데 사용할 수 있는 전역 방법이 많이 있습니다. 애니메이션 방향을 쉽게 시작, 중지 및 반전할 수 있습니다.

필요한 JSON 파일을 로드하고 일부 매개변수로 애니메이션을 초기화하려면 코드 몇 줄만 작성하면 됩니다. 위 Kittons의 CodePen 데모는 브라우저에서 After Effects 애니메이션을 쉽게 렌더링하는 방법을 보여주는 훌륭한 예입니다.

최종 생각

이 기사에서는 인기 있는 무료 오픈 소스 JavaScript 애니메이션 라이브러리 8개를 살펴봅니다. 그들은 각각 다른 일을 하고 웹 애니메이션의 다른 측면을 목표로 합니다. 이러한 라이브러리를 사용하면 웹사이트의 거의 모든 콘텐츠에 애니메이션을 적용할 수 있습니다. 이 라이브러리를 사용하여 경쟁업체와 차별화되는 아름다운 웹사이트를 만드시기 바랍니다! 애니메이션을 과도하게 사용하지 않도록 주의하세요.

또한 명심해야 할 한 가지는 간단한 애니메이션에는 여전히 CSS를 사용하도록 노력해야 한다는 것입니다. 사용자가 요소 위로 마우스를 가져갈 때 요소의 색상을 변경하려는 경우 전체 JavaScript 애니메이션 라이브러리를 로드하는 데 큰 의미가 없습니다.

위 내용은 최고의 무료 오픈 소스 JavaScript 애니메이션 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!