Anime.js를 사용한 JavaScript 기반 애니메이션, 2 부 : 매개 변수

ANIME.JS 애니메이션 튜토리얼 파트 2 : 매개 변수에 대한 자세한 설명. 튜토리얼의 첫 번째 부분에서는 애니메이션 대상 요소와 애니메이션 CSS 및 DOM 속성을 지정하는 방법을 배웠습니다. 이전 애니메이션은 매우 기본적이며 모든 대상 요소는 단순히 일정 거리를 고정 속도로 이동하거나 둥근 반경을 변경했습니다.

때로는 대상 요소를보다 리듬적인 방식으로 애니메이션해야 할 수도 있습니다. 예를 들어, 왼쪽에서 오른쪽으로 이동하려면 10 개의 다른 요소가 필요할 수 있으며 각 요소의 애니메이션은 시작 사이에 500 밀리 초로 지연됩니다. 마찬가지로 각 요소의 위치에 따라 애니메이션 지속 시간을 늘리거나 줄일 수 있습니다.

이 튜토리얼은 Anime.js를 사용하여 특정 매개 변수로 다른 요소의 애니메이션 시간을 정확하게 제어하여 단일 요소 또는 모든 요소의 애니메이션 시퀀스 재생 순서를 제어하는 ​​방법을 보여줍니다.

속성 매개 변수 이 매개 변수를 사용하면 단일 속성 또는 속성 그룹의 지속 시간, 지연 및 완화 효과를 제어 할 수 있습니다.

메소드 지금까지, 우리는 기능을 사용하여 대상 요소의 애니메이션 지연 또는 지속 시간에 대해 다른 값을 전달했습니다. 또한

메소드의 도움으로 동일한 기능을 얻을 수 있으며, 기본적으로 여러 요소간에 애니메이션이 발생하는 방식을 제어 할 수 있습니다. 두 개의 매개 변수를 허용합니다. 첫 번째는 적용하려는 값이며, 두 번째는 인터리브가 적용되는 방식을 결정하는 많은 매개 변수가있는 객체입니다.

다음은 매개 변수를 1000으로 인터리빙하는 것을 보여주는 예입니다. 예는 다음과 같습니다.

마지막 요소의 시작 부분에서 0이 아닌 지속 시간 값을 적용 해야하는 경우 어떻게해야합니까? 이 경우이를 달성하기 위해 다음의 메소드 매개 변수를 사용할 수 있습니다. 보시다시피 최종 결과는 차이가 없습니다.

stagger()

메소드는 이전 버전의 라이브러리에서 작동하지 않는다는 점에 유의해야합니다. 오류를 피하기 위해 최신 버전을 사용하고 있는지 확인하십시오.

stagger() 요약 이 튜토리얼에서는 Anime.js에서 대상 요소의 애니메이션을 제어하는 ​​데 사용할 수있는 다양한 유형의 매개 변수를 배웠습니다. 속성 매개 변수는 단일 속성의 애니메이션을 제어하는 ​​데 사용됩니다.

당신은 그것들을 사용하여 단일 요소에 대한 애니메이션이 재생되는 순서를 제어 할 수 있습니다. 함수 매개 변수를 사용하면 전체 그룹에 비해 단일 요소의 애니메이션 시간과 속도를 제어 할 수 있습니다. 애니메이션 매개 변수를 사용하면 다른 요소에 대해 애니메이션이 재생되는 방식을 제어 할 수 있습니다.

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