Anime.js 소개

Anime.js는 간단하고 효과적인 API를 갖춘 경량 JavaScript 라이브러리입니다. JavaScript 개체, CSS 및 DOM 요소와 함께 작동하며 Anime.js는 사용하기 쉽습니다.

전통적으로 우리는 요소의 스타일을 점진적으로 수정하여 애니메이션을 만듭니다. 이러한 작업은 JavaScript를 사용하여 수행할 수 있지만 가장 간단한 애니메이션도 개발하기 어렵고 시간이 많이 걸립니다.

Anime.js는 다양한 도구를 제공하여 애니메이션을 더 쉽게 만듭니다. 타이밍과 사용자 입력을 조정하는 기능을 제공하고 동일한 개체에서 동시에 실행되는 많은 애니메이션을 지원합니다.

가장 널리 사용되는 브라우저는 Anime.js도 지원합니다.

Anime.js 설치 부분

• 아래 링크에서 anime.min.js 파일을 다운로드하신 후 바로 사용하실 수 있습니다 -

으아악

• "anime.js CDN"을 검색하여 스크립트 태그에 붙여넣으면 링크를 찾을 수 있습니다

으아악

Anime.js의 기본 구문

anime.js 설치 방법과 기본 사항을 살펴보았습니다. 이제 anime.js 구문으로 넘어가겠습니다. -

으아악

위 구문에서는 Anime.js에서 제공하는 anime() 함수를 사용하여 애니메이션을 만듭니다. anime() 함수는 애니메이션의 속성을 포함하는 JavaScript 개체를 매개 변수로 받아들입니다.

이제 Anime.js 기본 구문의 각 용어에 대해 자세히 살펴보겠습니다. -

목표

애니메이션을 적용하려는 구성 요소에 대한 참조는 대상에 포함되어 있으며 HTML 태그, 클래스 또는 ID 요소, CSS 선택기, 단일 DOM 노드 또는 DOM 노드 배열, 다음을 사용하여 생성된 객체의 형태를 취할 수 있습니다. 최소한 숫자 속성과 처음 세 값 중 하나로 구성된 배열이 있는 JavaScript.

속성

대상을 언급한 후 애니메이션화하려는 속성을 언급합니다. 이러한 속성에는 애니메이션을 적용할 수 있는 CSS, JS 및 SVG 속성이 포함될 수 있습니다.

속성 매개변수

속성 매개변수에는 애니메이션 타이밍에 큰 영향을 미치는 측면이 포함됩니다. 이 속성 매개변수는 기간, 지연, 종료 지연, 완화, 회전 등을 포함한 여러 특성 매개변수를 포함합니다.

애니메이션 매개변수

애니메이션의 앞뒤 움직임은 애니메이션 매개변수에 의해 제어됩니다. 여기에는 방향, 반복, 자동 재생 등 애니메이션 관련 옵션이 포함됩니다.

컨트롤

애니메이션을 대화형으로 만들기 위해 Anime.js는 제어 도구도 제공합니다. 다음은 시작, 일시 중지, 되돌리기 및 다시 시작 기술의 몇 가지 예입니다.

예

이 예에서는 특정 너비와 높이 치수를 가진 일부 div 요소를 만듭니다. CSS를 사용하여 특정 배경색을 추가하겠습니다. 먼저 JavaScript 부분에서는 Anime 함수에 필요한 모든 항목을 추가한 다음 속성과 함께 개체를 전달합니다

이제 모든 내용을 다루었으므로 우리의 주요 목표는 원하는 요소(여기서는 div 블록)에 애니메이션을 적용하는 것입니다. 이 예에서는 초기 위치에서 x축 방향으로 이동하는 translateX를 사용합니다.

으아악

위 코드에서는 먼저 HTML 코드의 주요 구조를 정의한 다음 코드 헤드의 "src" 태그를 사용하여 코드에 anime.js 라이브러리를 추가합니다. 먼저 본문에서 애니메이션을 적용할 div 요소를 정의합니다. 그런 다음 스크립트 태그 내에서 우리가 원하는 애니메이션 유형을 정의합니다. 이는 정의된 시간 동안 주어진 녹색 블록을 해당 위치에서 다른 위치로 이동하는 것이며, 이로 인해 블록의 크기도 변경됩니다.

예

이전 예에서는 상자를 정의하고 높이와 너비를 늘리도록 애니메이션을 적용했습니다. 이제 높이와 너비는 변경하지만 너비는 늘리고 높이는 줄입니다.

으아악

위 코드에서는 먼저 HTML 코드의 주요 구조를 정의한 다음 코드 헤드의 "src" 태그를 사용하여 코드에 anime.js 라이브러리를 추가합니다. 먼저 본문에서 애니메이션을 적용할 div 요소를 정의합니다. 그런 다음 스크립트 태그 내에서 우리가 원하는 애니메이션 유형을 정의합니다. 즉, 정의된 시간 동안 주어진 녹색 블록이 해당 위치에서 다른 위치로 이동하며, 이로 인해 블록의 크기도 변경됩니다(예: 높이 감소에서 증가로 변경). 너비의 크기입니다.

예

이 예에서는 anime.js 라이브러리를 사용하여 직사각형 상자를 원으로 애니메이션화합니다. 변경 기간을 3000초로 설정하고 루프에서 실행합니다. 코드를 살펴보겠습니다 -

으아악

위 코드에서는 먼저 HTML 코드의 주요 구조를 정의한 다음 코드 헤드의 "src" 태그를 사용하여 코드에 anime.js 라이브러리를 추가합니다. 먼저 본문에서 애니메이션을 적용할 div 요소를 정의합니다. 그런 다음 스크립트 태그 내에서 원하는 애니메이션 유형을 정의합니다. 이는 주어진 파란색 상자가 3초 또는 3000밀리초 내에 파란색 원으로 이동하는 것입니다.

결론

이 튜토리얼에서는 anime.js를 예제와 함께 자세히 논의했습니다. Anime.js는 간단하고 효율적인 API를 갖춘 경량 JavaScript 라이브러리입니다. JavaScript 개체, CSS 및 DOM 요소와 함께 작동하며 Anime.js는 사용하기 쉽습니다. 전통적으로 우리는 요소의 스타일을 점진적으로 수정하여 애니메이션을 만듭니다. 이러한 작업은 JavaScript를 사용하여 수행할 수 있지만 가장 간단한 애니메이션도 개발하기 어렵고 시간이 많이 걸립니다.

위 내용은 Anime.js 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!