ANIME.JS로 웹 애니메이션 만들기

Anime.js로 웹 애니메이션 만들기

많은 JavaScript 애니메이션 라이브러리가 있지만 애니메이션.js 최고 중 하나입니다. 사용하기 쉽고 작고 간단한 API가 있으며 최신 애니메이션 엔진에서 원하는 모든 것을 제공합니다. 라이브러리는 파일 크기가 작고 IE/Edge 11+를 포함한 모든 최신 브라우저를 지원합니다.

Anime.js를 즉시 사용하지 못하게 할 수 있는 유일한 것은 최소한의 zen과 같은 문서입니다. 나는 간결하고 구조적이며 우아한 접근 방식을 좋아하지만 더 자세한 설명이 도움이 될 것이라고 생각합니다. 이 튜토리얼에서 이 문제를 해결하려고 합니다.

Anime.js 시작하기

시작하려면 다운로드하여 |_+_| HTML 페이지의 파일:

anime.js

또는 CDN에서 호스팅되는 최신 버전의 라이브러리를 사용할 수 있습니다.

anime()

이제 애니메이션을 만들기 위해 |_+_| 객체를 인수로 취하는 함수입니다. 해당 개체에서 모든 애니메이션 세부 정보를 설명합니다.

div

애니메이션을 설명하는 데 사용되는 속성에는 여러 종류가 있습니다. 그것들은 4개의 별개의 범주로 그룹화됩니다:

대상 – 여기에는 애니메이션을 적용하려는 요소에 대한 참조가 포함됩니다. CSS 선택기(div, #square, .rectangle), DOM 노드 또는 노드 목록 또는 일반 JavaScript 개체일 수 있습니다. 배열에서 위의 조합을 사용하는 옵션도 있습니다.
속성 – 여기에는 CSS, JavaScript 개체, DOM 및 SVG .
속성 매개변수 – 여기에는 지속 시간, 지연, 완화 등과 같은 속성 관련 매개변수가 포함됩니다.
애니메이션 매개변수 – 여기에는 방향, 루프 등과 같은 애니메이션 관련 매개변수가 포함됩니다.

이제 이것이 실제로 어떻게 적용되는지 봅시다. 다음 예를 고려하십시오.

xdc는 좋은 투자입니다

width

https://codepen.io/SitePoint/pen/XvEMbV

메모: 튜토리얼에서 코드의 HTML 및 CSS 섹션은 다루지 않을 것입니다. 이들은 추가 설명 없이 이해하기 쉬운 경향이 있습니다. 각 예제 뒤에 나오는 내장 펜에서 HTML과 CSS를 찾아 탐색할 수 있습니다.

위의 예에서:

녹색 사각형(스타일이 지정된 div)을 선택합니다.
원으로 변환하면서 왼쪽으로 100픽셀 이동합니다.
이 모든 것이 2초 안에 원활하게 이루어지도록 설정했습니다(선형은 애니메이션에 이징이 적용되지 않음을 의미합니다).
방향 속성을 대체로 설정하여 div 요소가 애니메이션 완료 후 초기 위치와 모양으로 돌아가도록 지시합니다. Anime.js는 애니메이션을 역순으로 재생하여 이를 수행합니다.

속성 값을 지정할 때 단위를 사용하지 않는다는 것을 알 수 있습니다. 원래 값에 단위가 있으면 애니메이션 값에 자동으로 추가되기 때문입니다. 따라서 단위를 안전하게 생략할 수 있습니다. 그러나 특정 단위를 사용하려면 의도적으로 추가해야 합니다.

더 의미 있는 것을 만들어 봅시다.

진자 애니메이션 만들기

이 예에서는 진자 애니메이션을 만듭니다. HTML 및 CSS 기술을 사용하여 진자를 그린 후에는 이를 실현할 차례입니다.

target

https://codepen.io/SitePoint/pen/bXvqVE

이 애니메이션에서 우리는 소위 에서부터 애니메이션의 이동 범위를 정의하는 값 유형입니다. 우리의 경우 진자의 막대가 60도에서 -60도까지 회전합니다. 우리는 또한 피크에서 느려지고 바닥에서 더 빨라지는 진자의 자연스러운 움직임을 시뮬레이션하기 위해 easyInOutSine easing을 사용합니다. 다른 옵션을 다시 사용하여 진자를 양방향으로 이동하고 루프 매개변수를 true로 설정하여 이동을 끝없이 반복합니다.

잘 했어요. 다음 예제로 넘어갑시다.

배터리 충전 애니메이션 만들기

이 예에서는 스마트폰의 아이콘과 유사한 충전 배터리의 애니메이션 아이콘을 만들고 싶습니다. 이것은 약간의 HTML과 CSS로 쉽게 할 수 있습니다. 다음은 애니메이션 코드입니다.

index

https://codepen.io/SitePoint/pen/EqEWVL

여기에 (|_+_| 속성을 증가시켜) 차례로 확장되는 세 개의 세그먼트(녹색 |_+_| 요소)가 있습니다. 이 효과를 얻으려면 각각에 대해 다른 지연을 사용해야 합니다. 애니메이션에 사용할 수 있는 지연 매개변수는 하나만 있으므로 이 상황에서는 함수 기반 매개변수 이는 모든 대상에 대해 다른 값을 생성합니다.

랠리 코인 구매 방법

그렇게 하기 위해 리터럴 값 대신 세 개의 인수(|_+_|, |_+_| 및 |_+_|)가 있는 함수를 제공합니다. 이 경우 함수는 인덱스에 500밀리초를 곱한 값을 반환하므로 모든 요소가 이전 요소보다 0.5초 후에 애니메이션을 시작합니다.

|_+_|도 사용합니다. 애니메이션이 다시 시작되기 전에 잠시 멈추는 매개변수입니다.

배터리 충전 애니메이션 개선

이제 애니메이션이 좋아 보이지만 충전 비율을 표시하는 진행률 레이블을 추가하여 약간 개선해 보겠습니다. 코드는 다음과 같습니다.

targetsLength

https://codepen.io/SitePoint/pen/wVmJMM

이 예에서는 몇 가지 더 많은 라이브러리 기능을 소개합니다. 하나씩 살펴보겠습니다.

먼저 |_+_| HTML의 레이블을 참조하는 변수입니다. 그런 다음 |_+_| |_+_|를 포함하는 객체 재산. 그런 다음 두 개의 애니메이션을 만듭니다.

첫 번째 애니메이션은 |_+_|를 제외하고 이전 예제와 거의 동일합니다. 매개변수. 여기에서는 한 번에 여러 요소에 애니메이션을 적용할 수 있는 Anime.js 기능을 사용할 것입니다. 이를 위해 |_+_|.stagger() 함수를 사용합니다. 우리의 경우 |_+_|.stagger(500)는 함수 기반 매개변수처럼 작동합니다. 각 요소 애니메이션 전에 50밀리초 지연을 추가합니다.

두 번째 애니메이션에서는 |_+_| 대상을 대상으로 합니다. 그런 다음 |_+_| 속성을 100%로 애니메이션합니다. |_+_| 매개변수는 애니메이션 값을 주어진 소수점으로 반올림합니다. 1로 설정하면 정수를 얻습니다.

다음으로 Anime.js가 제공하는 두 개의 콜백을 사용합니다.

HTML의 진행 레이블 값을 |_+_| 진행 값, 우리는 update() 콜백을 사용합니다. 또한 complete() 콜백을 사용하여 진행률이 100%가 된 후 애니메이션을 중지하고 seek() 메서드를 사용하여 애니메이션을 완료된 상태로 설정합니다.

결과적으로 충전 애니메이션은 진행률이 100%가 될 때까지 재생된 다음 중지되고 세그먼트를 강제로 종료 애니메이션 상태로 만듭니다. 아이콘이 완전히 충전된 것으로 나타납니다.

키프레임으로 더 복잡한 애니메이션 만들기

지금까지 객체를 A에서 B로 이동시키는 1단계 애니메이션을 다루었습니다. 하지만 A에서 B로, C에서 D로 이동하는 것은 어떨까요?

다음 예에서는 속성 키프레임을 사용하여 다단계 애니메이션을 만드는 방법을 살펴보겠습니다. 상자 역할을 하는 다른 사각형 주위로 간단한 사각형을 이동합니다.

endDelay

https://codepen.io/SitePoint/pen/JgLWGa

먼저 box 요소에 대한 참조를 만듭니다. begin() 및 complete() 콜백에서 이를 사용하여 애니메이션 시작 시 상자를 열고 애니메이션 종료 시 상자를 닫습니다. 다른 사각형인 콘텐츠를 이동하는 방법을 살펴보겠습니다.

애니메이션을 적용하려는 각 속성에 대해 각 개체가 특정 키프레임을 설명하는 개체 배열을 사용합니다.

소문자 js로

우리의 경우 정사각형을 수직 및 수평으로 이동하려고 합니다. 그래서 우리는 |_+_|를 사용합니다. 그리고 |_+_| 속성에 대해 각 속성에 대해 키프레임 배열을 제공합니다. 적절한 움직임을 만드는 비결은 |_+_| 그리고 |_+_| 매개변수를 올바르게 지정해야 합니다. 까다로울 수 있습니다!

프레임은 위에서 아래로 실행되고 지정된 키프레임 배열이 있는 각 속성에 대해 동시에 시작됩니다. 한 번 시작하면 라이딩이 계속되는 방식은 전적으로 |_+_| 그리고 |_+_| 매개변수가 설정됩니다. 계산에 행운을 빕니다!

애니메이션의 결과는 사각형이 상자를 빠져 나와 상자 주위를 완전히 회전한 다음 다시 안쪽으로 들어가는 것입니다.

텍스트 효과 만들기

위에서 비틀거리는 예를 보았고 이제 더 고급 사용법을 살펴보겠습니다. 멋진 텍스트 효과를 만들기 위해 비틀림을 사용합니다.

progress

https://codepen.io/SitePoint/pen/NQYpNr

|_+_| 안에 각 문자를 넣었습니다. 요소. 애니메이션 코드에서 모든 문자를 선택하고 표시되도록 한 다음 50픽셀 아래로 이동합니다.

그런 다음 사용하여 문자를 회전합니다. 특정 속성 매개변수 주어진 속성에 대한 특정 매개변수를 정의합니다. 이를 통해 애니메이션을 보다 세부적으로 제어할 수 있습니다. 여기서 |_+_|를 적용하면 문자가 2초 동안 360도 회전합니다. 완화.

다음 두 속성에서는 stagger() 함수를 사용합니다. 범위 값 유형을 사용하여 중앙에서 시작하여(시작 위치 옵션 사용) 0.7에서 1까지 불투명도가 고르게 분포되도록 스케일을 설정합니다. 이렇게 하면 문장 중간에서 글자가 작아지고 양쪽 끝에서 글자가 커집니다.

애니메이션이 시작되기 전에 1초 동안 기다리도록 설정한 다음(시작 값을 정의하여) 각 문자에 대해 상대적으로 100밀리초 지연이 추가됩니다.

우리는 의도적으로 |_+_| 원하는 효과를 만들기 위해 끝에 속성을 추가합니다. 즉, 나선형 움직임으로 글자를 회전시키는 것입니다.

타임라인으로 애니메이션 만들기

타임라인을 사용하면 여러 애니메이션을 함께 조작할 수 있습니다. 간단한 예를 살펴보겠습니다.

battery

https://codepen.io/SitePoint/pen/zgWZBj

이 예에서는 볼 스피너를 만듭니다.

타임라인을 생성하기 위해 |_+_|.timeline() 함수를 사용합니다. 그런 다음 추가된 모든 애니메이션에 대해 상속되는 공통 매개변수를 정의합니다.

자바 스크립트 검사 문자열이 비어 있습니다.

타임라인에 애니메이션을 추가하려면 add() 메서드를 사용한 다음 이미 다룬 것과 같은 방식으로 애니메이션을 설명합니다.

이 예에서는 각 공에 대해 하나씩 세 개의 애니메이션을 추가합니다. 결과는 각 공이 하나씩 올라가고 떨어지는 것입니다.

문제는 이 기본 형식에서 애니메이션이 매우 정적으로 보인다는 것입니다. 변경해 보겠습니다.

기본적으로 각 애니메이션은 이전 애니메이션이 끝난 후 시작됩니다. 그러나 시간 오프셋을 사용하여 이 동작을 제어할 수 있습니다. 또한 애니메이션을 보다 유연하고 복잡하게 만들려면 애니메이션 키프레임을 사용해야 합니다. 다음 예에서 이것이 어떻게 적용되는지 살펴보겠습니다.

progress

https://codepen.io/SitePoint/pen/BXrWLj

여기서 |_+_|를 제거합니다. 매개변수는 키프레임을 사용하여 앞뒤로 이동하기 때문입니다. |_+_|를 추가하여 애니메이션 키프레임을 정의합니다. 매개변수. 속성 키프레임과 마찬가지로 배열의 각 개체는 키프레임입니다.

공이 부드럽게 움직이도록 하기 위해 add() 함수의 두 번째 매개변수로 지정된 시간 오프셋을 사용합니다. 우리의 경우 이전 애니메이션과 관련된 값을 사용합니다.

결과는 부드러운 볼 스피너 애니메이션입니다.