Anime.js를 사용한 JavaScript 기반 애니메이션, 1 부 : 대상 및 속성

anime.js, 웹 페이지의 CSS 속성, SVG 또는 DOM 속성의 애니메이션 제작에 사용할 수있는 가벼운 JavaScript 기반 애니메이션 라이브러리. 이 라이브러리를 사용하면 애니메이션의 측면을 제어 할 수 있으며 대상 요소 또는 애니메이션 할 속성을 지정하는 여러 가지 방법을 제공합니다.

당신은 애니메이션이 재생되는 순서와 다른 요소가 어떻게 동기화되는지를 완전히 제어 할 수 있습니다. 이 라이브러리는 모든 최신 브라우저를 지원합니다.

이 튜토리얼 시리즈는 ANIME.JS의 모든 기능을 안내하여 실제 프로젝트에 쉽게 적용 할 수 있도록합니다.

우리가 주제에 뛰어 들기 전에 먼저 라이브러리를 설치하겠습니다. 다음 명령을 실행하여 NPM 또는 Bower를 사용하여 설치할 수 있습니다.

도서관을 다운로드하여 프로젝트에 포함 시키거나 CDN에서 호스팅 된 최신 버전의 라이브러리에 직접 연결할 수 있습니다.

설치가 성공한 후이 라이브러리를 사용하여 요소에 흥미로운 애니메이션을 추가 할 수 있습니다. 우리는 도서관의 기본 사항부터 시작하여 한 번에 하나의 특정 영역에 중점을 둘 것입니다.

대상 요소를 지정하십시오 anime.js를 사용하여 애니메이션을 만들려면 Nodelist를 호출해야합니다.

DOM 노드 또는 노드리스트를 SPAN 태그의 값으로 사용할 수도 있습니다. 지금까지 우리는 HTML에서 래퍼를 수동으로 만들어이 작업을 수행했습니다. 이제 태그를 처리하기 위해 JavaScript를 얻는 방법을 배웁니다. 다음은 제목 요소입니다

제목에는 5 개의 별도 단어가 있으며, 우리는 각 단어를 자체 스팬 레이블로 랩합니다. 그런 다음 최종 결과를 SPAN 태그에 할당하십시오. 이것은 제목을 스타일링하고 H1 스팬을 선택기로 사용하는 데 사용하는 CSS입니다. 번역 속성의 최종 값. 또한 애니메이션 초기화에서 인터리빙 지연을 사용합니다. 이 시리즈의 다음 튜토리얼에서 Anime.js의 인터리빙에 대한 자세한 내용을 알 수 있습니다.

이것은 우리가 방금 만든 인사말 애니메이션을 보여주는 코드 펜 데모입니다. 애니메이션을 다시 시작하려면 인사를 클릭하십시오.

npm install animejs
bower install animejs

요약 이 튜토리얼에서는 Anime.js에서 대상 요소를 선택하는 모든 방법과 대상 요소와 관련된 다른 CSS 속성 및 속성을 애니메이션하는 방법을 배웠습니다. 그러나이 시점에서 우리는 실제 애니메이션과 관련된 것을 제어 할 수 없습니다.

이 시리즈의 다음 자습서에서는 다양한 속성 (그룹 및 개별적으로 제어)에 대한 애니메이션의 완화, 지연 및 지속 시간을 제어하는 ​​방법을 배웁니다. 그런 다음 각 요소의 모든 애니메이션 매개 변수를 제어하는 ​​방법을 배웁니다.

위 내용은 Anime.js를 사용한 JavaScript 기반 애니메이션, 1 부 : 대상 및 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!