Anime.js를 시작합니다

코어 포인트 : ANIME.JS는 CSS 속성, SVG, DOM 속성 및 JavaScript 객체를 지원하는 가볍고 사용하기 쉬운 JavaScript 애니메이션 라이브러리로 다양한 웹 애니메이션 프로젝트에 유능합니다.

anime.js의 강력한 타임 라인 기능을 사용하면 여러 애니메이션을 동기화 할 수 있으며 이는 복잡한 애니메이션 시퀀스에 특히 중요합니다.

보다 대화식이고 반응이 좋은 애니메이션을 만들려면 ANIME.JS를 이벤트 리스너와 통합하여 사용자 작업 (예 : 클릭 또는 마우스 이동)을 기반으로 트리거 애니메이션 (예 : 웹 페이지에서 사용자 참여를 향상시킬 수 있습니다.

Anime.js의 초보자 : 먼저, HTML 페이지에 Anime.js 파일을 다운로드하고 포함시킵니다.
• 또는 CDN에서 최신 버전을 사용하십시오
애니메이션을 만들고, 객체를 매개 변수로 받아들이는 함수를 사용 하고이 객체의 모든 애니메이션 세부 사항을 설명합니다.
• 애니메이션 속성은 네 가지 범주로 나뉩니다 anime() 대상 :
애니메이션에 대한 요소 참조. CSS 선택기 (div, #square, .rectangle), dom 노드 또는 노드 목록 또는 순수한 JavaScript 객체 일 수 있습니다. 위의 유형의 배열 조합 일 수도 있습니다.
• 속성 : CSS 속성, JavaScript 객체 속성, DOM 속성 및 SVG 속성을 포함하여 애니메이션 할 수있는 속성.
속성 매개 변수 : 기간, 지연, 완화 함수 등과 같은 속성과 관련된 매개 변수.
• 애니메이션 매개 변수 :
방향, 루프 등과 같은 애니메이션과 관련된 매개 변수.
실용 예 :

(CodePen 샘플 링크가 여기에 있습니다) 이 예에서 <:> :

우리는 녹색 정사각형 (양식화 된 div)을 선택합니다.
1. 우리는 그것을 원으로 변환하는 동안 왼쪽으로 100 픽셀을 움직입니다.
우리는 이것을 2 초 안에 원활하게 설정하도록 설정했습니다 (선형은 애니메이션에 완화가 적용되지 않음을 의미합니다).
2. 방향 속성을 대체로 설정함으로써 DIV 요소에 애니메이션이 완료된 후 초기 위치와 모양을 반환하도록 지시합니다. Anime.js는 반대쪽으로 애니메이션을 재생하여이를 수행합니다.
3. 속성 값을 지정할 때는 단위를 사용할 필요가 없습니다. 원래 값에 단위가 있으면 애니메이션 값에 자동으로 추가됩니다. 그러나 특정 장치를 사용하려면 명시 적으로 추가해야합니다.
더 복잡한 애니메이션 : 다음은 스윙 애니메이션, 배터리 충전 애니메이션 및 키 프레임 및 타임 라인을 사용한 애니메이션을 포함한 몇 가지 복잡한 애니메이션 예제입니다. (Codepen 샘플 링크 및 해당 코드 스 니펫이 여기에 포함되며 코드는 원본 문서의 구조와 유사하게 자세히 설명됩니다)
4. . 결론 :
anime.js는 다양한 애니메이션을 만드는 데 사용할 수있는 간단하고 강력한 애니메이션 엔진입니다. 이 기사가 애니메이션을 더 잘 이해하고 사용하는 데 도움이되기를 바랍니다. (Anime.js 또는 관련 리소스의 향후 개발에 대한 추가 정보를 추가 할 수 있습니다.