PHP 코드가 실행되기를 기다리는 자바스크립트 애니메이션입니다. JavaScript로 애니메이션 만들기. 타이밍 기능
"애니메이션"이라는 용어는 우리가 어린 시절부터 사랑해 온 "만화"인 애니메이션 영화를 의미하는 경우가 가장 많습니다. 하지만 설명 사전을 보면 프랑스어로 번역하면 "부활", "애니메이션"을 의미한다는 것을 알 수 있습니다. 그리고 이 의미는 놀랍게도 영화 산업뿐만 아니라 웹 기술에도 정확하게 들어맞는 것으로 밝혀졌습니다.
다양한 애니메이션 효과(전환, 이동, 변환 등)를 사용하면 웹사이트에 상당한 "활기차게" 하여 사용자의 주의를 제어하고 필요한 요소로 전환하고 특정 시각적 신호를 제공할 수 있습니다.
애니메이션에 관해 말하면 디즈니 스튜디오의 애니메이터들이 공식화한 잘 알려진 12가지 원칙을 언급하지 않을 수 없습니다. 이 원칙의 사용은 애니메이션 효과를 합리적이고 고품질로 사용하는 데 매우 중요합니다.
웹 페이지에서 애니메이션을 사용할 수 있게 해주는 기술에 대해 이야기하면서 몇 가지를 강조할 수 있지만 아마도 그 중 . 불과 몇 년 전만 해도 플래시 애니메이션 기술은 강력한 경쟁자였으며 매우 인기가 있었습니다. 그러나 이제는 최고의 시절이 지나고 점차적으로 사이트 페이지에서 더 강력하고 유연한 Java 스크립트로 대체되고 있는 것 같습니다. 그리고 웹사이트에서 애니메이션을 진지하게 사용하기로 결정했다면 JavaScript를 사용해야 합니다. 그리고 현명한 도서관 선택을 위해 오늘의 리뷰를 작성하게 되었습니다.
Dynamics.jsDynamics.js부터 시작하겠습니다. 이것은 물리적으로 사실적인 애니메이션(예: 웹 사이트 메인 페이지에 있는 한 지점의 고조파 감쇠 진동)을 만들 수 있는 강력하고 강력한 라이브러리입니다. 라이브러리는 모든 DOM 요소의 속성을 관리할 수 있습니다. Dynamics.js는 메뉴, 버튼, 프로세스 표시기, 마커를 만드는 데 사용됩니다. 이 경우 주파수, 감쇠 감소, 탄성 또는 프로세스 지속 시간을 특성화하는 매개변수 등과 같은 다양한 매개변수를 사용할 수 있습니다.
CSS3 애니메이션의 출현으로 HTML 문서는 훨씬 더 매력적이고 개발하기 쉬워졌습니다. @keyframes 규칙을 사용하면 HTML 요소의 위치와 크기를 비롯한 다양한 매개변수를 쉽게 정의할 수 있습니다. 애니메이션 매개변수는 특정 매개변수에 따라 키프레임을 시작하고 이동하는 역할을 담당합니다. 자바스크립트와 플러그인이 필요 없이 모든 최신 브라우저에서 매우 원활하게 실행되는 가장 복잡한 애니메이션도 쉽게 만들 수 있습니다.
CSS3 애니메이션을 개발하기 위해 자바스크립트를 사용해야 할 때 문제가 발생합니다. 우리 모두는 대부분의 경우 개별 값이나 애니메이션 프로세스 전체를 계산할 수 있는 첫 번째 필수 요소가 자바스크립트라는 것을 알고 있습니다.
새로운 animate() 메소드를 사용하여 CSS와 자바스크립트 결합
새로운 javascript animate() 메소드를 사용하면 스크립트를 통해 애니메이션을 제어할 수 있습니다. 물론 키프레임을 정의하려면 여전히 많은 CSS 매개변수를 사용해야 합니다.
(높이: "0"),
(높이: "100%")
], {
지속시간: 3000,
반복: 2,
지연: 1000
});
위의 예에서는 animate() 메서드를 요소에 연결합니다. 대괄호 안에는 주어진 매개변수의 상태를 필요한 만큼 정의하고, 이 예에서는 높이에 대해 작업할 것입니다. 각 값은 객체 문자로 작성되며 해당 값은 하나의 개별 매개변수에만 사용됩니다. 너비와 높이 등의 조합은 허용되지 않습니다. 값 자체는 따옴표로 묶어야 하며 javascript 호환 구문으로 형식을 지정해야 합니다. 즉, "배경색" 대신 "배경색상"을 사용하는 것입니다. 객체의 다른 문자에서 대괄호를 닫은 직후에 추가 애니메이션을 정의합니다. 지속 시간을 사용하여 애니메이션의 길이를 변경하고, 반복을 사용하여 반복 빈도를 변경하고 선택적으로 지연 매개변수를 사용하여 지연을 정의할 수 있습니다. 이 매개변수는 애니메이션이 시작되어야 하는 순간을 결정합니다. 모든 시간 값은 밀리초 단위로 지정됩니다.
우리는 키 프레임 세트와 지속 시간을 관리합니다.
변경해야 하는 각 매개변수와 별도로 animate() 메서드를 실행해야 합니다. 이는 높이와 너비를 모두 변경하려면 animate()를 다시 실행해야 함을 의미합니다.
Document.getElementById("요소").animate([
(너비: "0", 오프셋: 0),
(너비: "10%", 오프셋, 1/3),
(너비: "100%", 오프셋: 1)
], {
지속시간: 3000,
반복: 2,
지연: 1000
});
위의 예에서는 요소의 너비를 변경하고 있습니다. 너비는 0에서 시작하여 최대 10%까지 다양하고 100%에 도달하면 끝나야 합니다. 이 모든 것은 자연스럽게 부드러운 애니메이션을 동반합니다. 추가 오프셋 매개변수는 0%에서 10%로의 변경에는 총 애니메이션 시간의 1/3이 걸리고, 10에서 100으로의 전환에는 총 애니메이션 시간의 2/3가 걸리도록 지정합니다. 동시에 애니메이션의 총 지속 시간은 지속 시간 매개변수에 의해 결정됩니다. 이 경우 첫 번째 부분은 1초 동안 진행되고 두 번째 부분은 2초 동안 진행됩니다.
값을 분수로 정의하는 대신 소수를 사용할 수도 있습니다. 0부터 1까지의 숫자를 사용해야 합니다. 예를 들어 1/3 대신 0.33을 사용할 수 있습니다.
추가 애니메이션 옵션
CSS3 애니메이션 매개변수에 익숙하다면 animate() 메서드를 사용하여 애니메이션 프로세스를 제어할 수 있다는 것을 알고 있을 것입니다. 방향은 물론 애니메이션 속도와 가속도를 변경할 수 있습니다. 애니메이션이 끝난 후 애니메이션이 처음으로 돌아가도록 지정하려면 그렇게 할 수 있습니다.
Document.getElementById("요소").animate([
…
], {
지속시간: 3000,
반복: 2,
지연: 1000,
방향: "역방향",
easing: "ease-in",
채우기: "앞으로"
});
방향 값에는 애니메이션 방향에 대한 정보가 포함됩니다. 역방향으로 설정하면 애니메이션이 역방향으로 재생됩니다. 대체 값을 사용하면 애니메이션을 표준 방향으로 재생한 다음 반대 방향으로 재생할 수 있습니다. 그리고 대체 역방향 값은 마지막 두 값을 결합합니다.
easing 값을 사용하면 CSS3에서 이미 잘 알려진 가장 일반적인 수정 기능을 사용할 수 있습니다. 기본적으로 각 애니메이션은 가속이나 감속 없이 선형으로 실행되도록 설정됩니다. 채우기 값은 애니메이션이 끝난 후 표시되는 내용을 결정합니다. 기본적으로 애니메이션은 시작점으로 돌아가야 합니다. 앞으로 값을 사용하면 애니메이션이 마지막 키프레임에서 중지됩니다.
애니메이션 제어
변수에 animate()를 사용하면 자바스크립트를 사용하여 애니메이션을 제어할 수 있습니다. 우리는 재량에 따라 이를 시작하고 중지할 수 있습니다.
Var animation = document.getElementById("element").animate([
(높이: "0"),
(높이: "100%")
], {
지속시간: 3000,
반복: 2,
지연: 1000
});
document.getElementById("animation_start").addEventListener("클릭", function() (
animation.play();
), 거짓);
document.getElementById("animation_pause").addEventListener("클릭", function() (
animation.pause();
), 거짓);
우리 예에서는 이상하게도 애니메이션 변수에 애니메이션을 첨부합니다. 그런 다음 ID가 animation_start 및 animation_pause인 요소에 2개의 이벤트 리스너를 연결합니다. 이 리스너는 클릭 시 특정 기능을 수행합니다. 재생은 애니메이션을 시작하고 일시 중지는 이미 무엇을 하는지 명확하며 역방향은 즉시 마지막 키 프레임으로 이동하여 애니메이션을 완전히 중지합니다.
안녕하세요 자바스크립트입니다. 물론 애니메이션이 끝날 때 반응할 수 있는 이벤트 리스너도 있습니다. Finish를 사용하여 이를 구현할 수 있습니다. 마무리 내부에서는 적절한 기능을 정의해야 합니다.
Animation.addEventListener("finish", function() (
Alert("애니메이션이 종료되었습니다.");
), 거짓);
위의 예에서는 애니메이션이 완료되었음을 나타내는 메시지를 간단히 실행합니다.
브라우저 지원
animate()는 현재 초기 개발 단계에 있으며 현재 "실험적" 레이블이 붙어 있습니다. 이 옵션에 대한 지원은 Chrome 버전 36부터 표시됩니다. 지금 사용해 보고 싶다면 Chrome Canary를 다운로드하여 설치할 수 있습니다.
올해 #ChromeDevSummit에 참석할 수 없나요? 라이브 스트림에서 모든 콘텐츠(및 그 이상!)를 시청하거나 근처 호스팅 장소에서 열리는 CDS 확장 이벤트에 동료들과 함께하세요. 자세한 내용은 Chrome Dev Summit 2019 웹사이트를 확인하세요.
CSS와 JavaScript 애니메이션Paul은 디자인 및 성능 옹호자입니다.
Google의 개발자 관계팀에서 Chrome과 모바일 웹을 전파합니다.
웹에서 애니메이션을 만드는 방법에는 CSS와 JavaScript라는 두 가지 기본 방법이 있습니다. 어떤 것을 선택하느냐는 프로젝트의 다른 종속성과 달성하려는 효과의 종류에 따라 달라집니다.
TL;DR- UI 요소 상태 전환과 같은 간단한 "일회성" 전환을 위해 CSS 애니메이션을 사용하세요.
- 바운싱, 중지, 일시 중지, 되감기 또는 속도 저하와 같은 고급 효과를 원할 때 JavaScript 애니메이션을 사용하세요.
- JavaScript로 애니메이션을 만들기로 선택한 경우 웹 애니메이션 API 또는 자신에게 편한 최신 프레임워크를 사용하세요.
대부분의 기본 애니메이션은 CSS나 JavaScript로 만들 수 있지만 노력과 시간은 다릅니다(CSS와 JavaScript 성능 비교 참조). 각각 장단점이 있지만 다음은 좋은 지침입니다.
- UI 요소에 대해 더 작고 독립적인 상태가 있는 경우 CSS를 사용하세요. CSS 전환 및 애니메이션은 측면에서 탐색 메뉴를 가져오거나 도구 설명을 표시하는 데 이상적입니다. 상태를 제어하기 위해 JavaScript를 사용할 수도 있지만 애니메이션 자체는 CSS에 포함됩니다.
- 애니메이션을 크게 제어해야 하는 경우 JavaScript를 사용하세요. Web Animations API는 오늘날 대부분의 최신 브라우저에서 사용할 수 있는 표준 기반 접근 방식입니다. 이는 복잡한 객체 지향 애플리케이션에 이상적인 실제 객체를 제공합니다. JavaScript는 애니메이션을 중지하거나 일시 중지하거나 속도를 늦추거나 되돌려야 할 때도 유용합니다.
- 전체 장면을 직접 조정하려면 requestAnimationFrame을 직접 사용하세요. 이는 고급 JavaScript 접근 방식이지만 게임을 만들거나 HTML 캔버스에 그리는 경우 유용할 수 있습니다.
또는 jQuery의 .animate() 메서드 또는 GreenSock의 TweenMax와 같은 애니메이션 기능이 포함된 JavaScript 프레임워크를 이미 사용하고 있는 경우 애니메이션에 이를 계속 사용하는 것이 전반적으로 더 편리할 수 있습니다.
CSS로 애니메이션 만들기CSS를 사용한 애니메이션은 화면에서 무언가를 움직이는 가장 간단한 방법입니다. 이 접근 방식은 다음과 같이 설명됩니다. 선언적, 당신이 원하는 일을 지정하기 때문입니다.
다음은 X축과 Y축 모두에서 요소를 100px 이동하는 CSS입니다. 500ms가 걸리도록 설정된 CSS 전환을 사용하여 완료됩니다. 이동 클래스가 추가되면 변환 값이 변경되고 전환이 시작됩니다.
상자( 변환: 변환(0, 0); 전환: 변환 500ms; ) .box.move( 변환: 변환(100px, 100px); )
전환 기간 외에도 다음과 같은 옵션이 있습니다. 완화, 이는 본질적으로 애니메이션의 느낌입니다. 이징에 대한 자세한 내용은 이징의 기본 가이드를 참조하세요.
위의 코드 조각에서와 같이 별도의 CSS 클래스를 만들어 애니메이션을 관리하는 경우 JavaScript를 사용하여 각 애니메이션을 켜거나 끌 수 있습니다.
Box.classList.add("이동");
이렇게 하면 앱에 좋은 균형이 제공됩니다. JavaScript를 사용하여 상태 관리에 집중하고 대상 요소에 적절한 클래스를 설정하기만 하면 브라우저에서 애니메이션을 처리할 수 있습니다. 이 경로를 따라가면 요소에서 전환 종료 이벤트를 들을 수 있지만 이전 버전의 Internet Explorer에 대한 지원을 포기할 수 있는 경우에만 가능합니다. 버전 10은 이러한 이벤트를 지원하는 첫 번째 버전이었습니다. 다른 모든 브라우저는 한동안 이 이벤트를 지원했습니다.
전환 종료를 수신하는 데 필요한 JavaScript는 다음과 같습니다.
Var box = document.querySelector(".box"); box.addEventListener("transitionend", onTransitionEnd, false); function onTransitionEnd() ( // 전환 종료를 처리합니다. )
CSS 전환을 사용하는 것 외에도 CSS 애니메이션을 사용할 수도 있습니다. 이를 통해 개별 애니메이션 키프레임, 지속 시간 및 반복을 훨씬 더 효과적으로 제어할 수 있습니다.
참고: 애니메이션을 처음 사용하는 경우 키프레임은 손으로 그린 애니메이션의 오래된 용어입니다. 애니메이터는 동작의 가장 극단적인 부분과 같은 것을 캡처하는 키 프레임이라는 특정 동작에 대한 특정 프레임을 만든 다음 키 프레임 사이에 모든 개별 프레임을 그리기 시작했습니다. 오늘날 우리는 CSS 애니메이션과 비슷한 프로세스를 가지고 있습니다. 여기서는 주어진 지점에서 CSS 속성이 가져야 하는 값이 무엇인지 브라우저에 지시하고 공백을 메웁니다.예를 들어 전환을 사용하여 동일한 방식으로 상자에 애니메이션을 적용할 수 있지만 클릭과 같은 사용자 상호 작용 없이 무한 반복을 사용하여 애니메이션을 적용할 수 있습니다. 여러 속성을 동시에 변경할 수도 있습니다.
Box ( /* 애니메이션 선택 */ animation-name: MovingBox; /* 애니메이션 지속 시간 */ animation-duration: 1300ms; /* 애니메이션을 실행하려는 횟수 */ animation-iteration-count: unlimited; /* 홀수 반복마다 애니메이션이 반전되도록 합니다. */ animation-direction: Alternative; ) @keyframes MovingBox ( 0% ( 변환: 번역(0, 0); 불투명도: 0.3; ) 25% ( 불투명도: 0.9; ) 50 % ( 변환: 번역(100px, 100px); 불투명도: 0.2; ) 100% ( 변환: 번역(30px, 30px); 불투명도: 0.8; ) )
CSS 애니메이션을 사용하면 대상 요소와 별도로 애니메이션 자체를 정의하고 animation-name 속성을 사용하여 필요한 애니메이션을 선택합니다.
CSS 애니메이션이 이전 브라우저에서 작동하도록 하려면 공급업체 접두사를 추가해야 합니다. 많은 도구를 사용하면 필요한 CSS의 접두어 버전을 생성하여 소스 파일에 접두어가 없는 버전을 작성할 수 있습니다.
JavaScript 및 Web Animations API를 사용하여 애니메이션 만들기JavaScript로 애니메이션을 만드는 것은 CSS 전환이나 애니메이션을 작성하는 것보다 더 복잡하지만 일반적으로 개발자에게 훨씬 더 많은 권한을 제공합니다. Web Animations API를 사용하여 특정 CSS 속성에 애니메이션을 적용하거나 구성 가능한 효과 객체를 구축할 수 있습니다.
안녕하세요! 이 튜토리얼에서는 JavaScript의 애니메이션을 살펴보겠습니다. JavaScript 애니메이션은 적합하지 않은 곳에 사용됩니다.
예를 들어 캔버스에서 베지어 곡선을 넘어서는 특별한 타이밍 기능을 사용하여 복잡한 궤적을 따라 애니메이션을 만들 수 있습니다. 이전 IE의 애니메이션에도 사용됩니다. 특히 모바일 기기에서는 리소스를 절약하기 위해 CSS 애니메이션을 사용하는 것이 바람직하다고 할 수 있습니다.
먼저 애니메이션을 정의해 보겠습니다. 따라서 HTML/CSS 관점에서 애니메이션은 DOM 요소 스타일의 점진적인 변화입니다. 예를 들어 style.left 좌표를 0px에서 100px로 늘리면 요소가 왼쪽으로 이동합니다.
이 메소드를 이용하여 left 속성을 0에서 100으로 증가시켜 초당 50개씩 변화시키면 부드러운 움직임처럼 보일 것입니다. 영화 산업과 동일한 원칙: 애니메이션에는 초당 24개 이상의 setInterval 호출이면 충분합니다.
애니메이션 코드는 다음과 같습니다.
가변 FPS = 50; // 초당 50 프레임 var 타이머 = setInterval(function() ( if (time up)clearInterval(timer); else 왼쪽으로 약간 증가), 1000 / fps)
다음은 애니메이션 코드의 보다 완전한 예입니다.
Var 시작 = Date.now(); // 시작 시간 저장 var 타이머 = setInterval(function() ( // 애니메이션 시작 이후 경과한 시간 계산 var timePass = Date.now() - start; if (timePassed >= 2000) (clearInterval( 타이머); // 2초 후 종료 return; ) // 시간에 해당하는 애니메이션 상태를 그립니다. timePass draw(timePassed); ), 20); // timePassed가 0에서 2000까지 가는 동안 // 왼쪽은 0에서 400px까지의 값을 취함 function draw(timePass) ( train.style.left = timePass / 5 + "px"; )
요청애니메이션프레임이러한 setInterval이 두 개 이상 있지만 코드의 다른 위치에 여러 개가 있는 경우 브라우저는 동일한 20ms 동안 두 번 이상 페이지 작업을 수행해야 합니다. 그러나 setInterval 외에도 페이지 스크롤과 같은 다른 작업도 그려야 합니다.
모든 다시 그리기 작업을 독립적으로 수행하면 많은 이중 작업이 수행됩니다.
성능 관점에서 볼 때 모든 다시 그리기를 하나로 그룹화하고 중앙에서 함께 실행하는 것이 훨씬 좋습니다.
이를 위해 애니메이션을 지원하는 JavaScript 프레임워크에는 단일 타이머가 있습니다.
SetInterval(function() ( /* 모든 애니메이션 그리기 */ ), 20);
이러한 프레임워크가 실행하는 모든 애니메이션은 전역 공통 목록에 추가되며, 20ms마다 단일 타이머가 이를 확인하고 현재 애니메이션을 시작하고 완료된 애니메이션을 삭제합니다.
IE9를 제외한 최신 브라우저는 애니메이션 타이밍 표준을 지원하며 이는 이 방향으로 한 단계 더 나아간 것입니다. 내장된 페이지 새로 고침 메커니즘을 사용하여 모든 애니메이션을 동기화할 수 있습니다. 즉, 애니메이션뿐만 아니라 CSS 애니메이션 및 기타 브라우저 다시 그리기도 그룹화됩니다.
이 경우 그래픽 가속기가 최대한 효율적으로 사용되며 페이지의 동일한 섹션에 대한 반복 처리가 제거됩니다. 즉, CPU 부하가 줄어들고 애니메이션 자체가 부드러워집니다.
이를 위해 requestAnimationFrame 함수가 사용됩니다.
함수 구문:
Var requestId = requestAnimationFrame(콜백)
이러한 호출은 브라우저가 애니메이션을 수행할 수 있다고 판단하는 가까운 미래에 콜백 함수가 실행되도록 예약합니다.
콜백에서 어떤 종류의 그리기를 예약하면 다른 requestAnimationFrames 및 브라우저의 내부 다시 그리기와 함께 그룹화됩니다.
실행을 취소하려면 requestId의 반환 값이 필요합니다.
// 위에서 예약된 실행을 취소합니다. 콜백 cancelAnimationFrame(requestId);
콜백 함수는 하나의 인수, 즉 페이지 로드가 시작된 이후 경과된 시간, Performance.now() 호출의 결과를 받습니다.
일반적으로 콜백은 곧 시작됩니다. 프로세서의 부하가 높거나 노트북 배터리가 거의 비어 있으면 빈도가 줄어 듭니다.
이 코드를 실행하면 requestAnimationFrame의 처음 20개 실행 사이에 간격이 표시됩니다. 일반적으로 이는 10-20ms이지만 그 이상일 수 있습니다. 이는 브라우저 관점에서 볼 때 최적의 애니메이션 빈도입니다.
var prev =performance.now(); var 시간 = 0; requestAnimationFrame(function Measure(time) ( document.body.insertAdjacentHTML("beforeEnd", Math.floor(time - prev) + " "); prev = time; if (times++< 10) requestAnimationFrame(measure); })
requestAnimationFrame을 기반으로 한 애니메이션 기능:
// draw 함수 draws // 애니메이션 지속 시간 function animate(draw,duration) ( var start =performance.now(); requestAnimationFrame(function animate(time)) ( // 애니메이션 시작 후 경과된 시간 확인 애니메이션 var timePassed = time - start; // 약간의 시간 초과가 가능하며, 이 경우 종료를 수정합니다. if (timePassed > Duration) timePassed = Duration; // 그 순간에 애니메이션 상태를 그립니다. timePassed draw(timePassed); // 애니메이션 시간이 종료되지 않은 경우 다른 프레임을 예약합니다. if( timePassed< duration) { requestAnimationFrame(animate); } }); }
애니메이션 구조requestAnimationFrame을 기반으로 훨씬 더 강력하면서도 동시에 간단한 애니메이션 기능을 구축할 수 있습니다.
애니메이션에는 세 가지 주요 매개변수가 있습니다.
기간 애니메이션이 지속되는 총 시간(밀리초)입니다. 예: 1000. timing(timeFraction) 과 유사하게 현재 시간을 기준으로 애니메이션의 상태를 계산하는 타이밍 함수입니다.
0에서 1까지 지속적으로 증가하는 timeFraction 수를 입력으로 받습니다. 여기서 0은 애니메이션의 시작을 의미하고 1은 끝을 의미합니다.
그 결과는 베지어 곡선의 CSS 전환에서 y 좌표에 해당하는 애니메이션 완료 값이어야 합니다.
또한 전환 타이밍 기능과 유사하게 다음 조건이 충족되어야 합니다.
- 타이밍(0) = 0
- timing(1) = 1...즉, 애니메이션은 (0,0) 지점에서 시작하여 시간이 0이고 진행도 0이고 (1, 1)에서 끝납니다. 전체 시간이 경과하고 프로세스가 완료됩니다. 예를 들어, 직선 함수는 균일한 개발 프로세스를 의미합니다. 함수 선형(timeFraction) ( return timeFraction; )
- 그녀의 일정:
- 보시다시피 해당 그래프는 전환 타이밍 함수: 선형과 완전히 일치하며 효과는 완전히 동일합니다. 다른 더 흥미로운 옵션이 있으므로 더 자세히 살펴보겠습니다.
실제로 애니메이션을 수행하는 것이 바로 이 기능입니다.
예를 들어 요소를 이동할 수 있습니다.
함수 draw(progress) ( train.style.left = Progress + "px"; ) 원칙적으로 모든 옵션이 가능하며 원하는 방식으로 무엇이든 애니메이션화할 수 있습니다.
임시 기능위에서 우리는 가장 단순한 선형 시간 함수를 보았습니다.
다양한 타이밍을 사용한 모션 애니메이션의 예를 살펴보겠습니다.
n의 힘으로여기에 또 다른 간단한 사례가 있습니다. n의 거듭제곱으로 진행하는 것입니다. 특별한 경우 - 2차, 3차 함수 등
이차 함수의 경우:
함수 Quad(progress) ( return Math.pow(progress, 2) )
2차 함수 그래프:
정도를 높이면 가속도에 영향을 줍니다. 예를 들어 5도에 대한 그래프는 다음과 같습니다. 
기능:
함수 circ(timeFraction) ( 1 반환 - Math.sin(Math.acos(timeFraction)) )
일정: 
이 기능은 활의 원리에 따라 작동합니다. 먼저 "현을 당긴 다음" "발사"합니다.
이전 함수와 달리 이 함수는 "탄성 계수"인 추가 매개변수 x에 따라 달라집니다. 활현이 "뒤로 당겨지는" 거리를 결정합니다.
함수 back(x, timeFraction) ( return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x) )
x = 1.5에 대한 그래프: 
공을 놓으면 바닥에 떨어지고 여러 번 튀다가 멈춘다고 상상해 보세요.
바운스 기능은 동일한 작업을 수행하지만 반대 방향으로만 수행됩니다. "바운싱"이 즉시 시작됩니다.
이 함수는 이전 함수보다 조금 더 복잡하며 계수를 사용합니다.
함수 바운스(timeFraction) ( for (var a = 0, b = 1, result; 1; a += b, b /= 2) ( if (timeFraction >= (7 - 4 * a) / 11) ( return - Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2) ) )
탄력적인 애니메이션이 함수는 초기 범위를 지정하는 추가 매개변수 x에 따라 달라집니다.
함수 elastic(x, timeFraction) ( return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 * timeFraction) )
x=1.5에 대한 그래프: 
그래서 우리는 타이밍 함수 모음을 가지고 있습니다.
이들의 사용을 "easeIn"이라고 합니다.
애니메이션을 역방향 모드로 표시해야 하는 경우가 있습니다. 이 효과를 생성하는 함수 변환을 "easeOut"이라고 합니다.
이즈아웃"easeOut" 모드에서 타이밍 값은 다음 공식을 사용하여 계산됩니다. timingEaseOut(timeFraction) = 1 — timing(1 — timeFraction)
예를 들어 "easeOut" 모드의 바운스 기능은 다음과 같습니다.
// 일반 버전 함수 바운스(timeFraction) ( for (var a = 0, b = 1, result; 1; a += b, b /= 2) ( if (timeFraction >= (7 - 4 * a) / 11 ) ( return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2); ) ) ) //easingOut 함수로 변환 makeEaseOut(timing) ( return 함수 (timeFraction) ( return 1 - timing(1 - timeFraction); ) ) varounceEaseOut = makeEaseOut(bounce);
완전한 예 - BounceEaseOut의 바운스는 이제 시작 부분이 아니라 끝 부분에 있습니다(이것이 훨씬 더 아름답습니다).
이 그래프는 easyOut 변환이 함수의 동작을 변경하는 것을 보여줍니다. 
튕기는 등의 애니메이션 효과가 있는 경우에는 시작 부분이 아닌 끝 부분에 표시됩니다(또는 반대의 경우 끝이 아닌 시작 부분에 표시됨).
빨간색은 일반 옵션을 나타내고 파란색은 easyOut을 나타냅니다.
- 일반적으로 애니메이션 개체는 처음에는 아래쪽에서 천천히 점프한 다음 마지막에는 갑자기 위쪽에 도달합니다.
- 그리고 easyOut 후에 그는 먼저 위로 뛰어올랐다가 천천히 아래로 뛰어내립니다.
애니메이션 시작과 끝 모두에 효과를 표시하기 위해 이 작업을 수행할 수도 있습니다. 해당 변환을 "easeInOut"이라고 합니다.
코드는 다음과 같습니다:
(timeFraction 1) timeFraction = 1인 경우; // 현재 애니메이션 상태 var Progress = options.timing(timeFraction) options.draw(progress); if(시간분수< 1) { requestAnimationFrame(animate); } }); }
주요 매개변수:
- 지속 시간 - 애니메이션 지속 시간(ms)입니다.
- 타이밍은 각 프레임의 애니메이션 상태를 결정하는 기능입니다. 0에서 1까지 시간 비율을 가져오고, 애니메이션 완성도를 0에서 1로 반환합니다.
- draw는 애니메이션 상태를 0에서 1로 그리는 함수입니다.
예를 들어 애니메이션이 끝날 때 호출할 전체 콜백을 추가하는 등 이 기능을 개선할 수 있습니다.
우리는 타이밍과 easyOut, easyInOut 변환을 다양화할 수 있는 여러 가지 예를 살펴보았습니다. 베지어 곡선에만 국한되지 않는 것과 달리 원하는 것은 무엇이든 구현할 수 있습니다.
그리기 기능에도 동일하게 적용됩니다.
이 애니메이션 구현에는 세 가지 주요 적용 영역이 있습니다.
- CSS 프레임워크에 맞지 않는 비표준 작업 및 요구 사항입니다.
- IE9 지원.
- 그래픽, 캔버스에 그리기.
JavaScript를 사용하여 HTML 애니메이션을 만드는 방법을 알아보세요.
기본 웹페이지JavaScript로 HTML 애니메이션을 만드는 방법을 보여주기 위해 간단한 웹 페이지를 사용하겠습니다.
컨테이너 애니메이션 만들기모든 애니메이션은 컨테이너 요소를 기준으로 해야 합니다.
스타일 요소컨테이너 요소는 style="position:relative"로 생성되어야 합니다.
애니메이션 요소는 style="position:absolute"로 생성되어야 합니다.
예#컨테이너(
너비: 400px;
높이: 400px;
위치: 상대;
배경: 노란색;
}
#애니메이션(
너비: 50px;
높이: 50px;
위치: 절대;
배경:빨간색;
}
JavaScript 애니메이션은 요소 스타일의 점진적인 변경을 프로그래밍하여 수행됩니다.
변경 사항은 타이머를 사용하여 트리거됩니다. 타이머 간격이 작으면 애니메이션이 연속적으로 나타납니다.
주요 코드:
예함수 프레임() (
if (/* 완료 테스트 */) (
ClearInterval(id);
) 또 다른 (
/* 요소 스타일을 변경하는 코드 */
}
}
함수 myMove()(
var elem = document.getElementById("animate");
var 위치 = 0;
var id = setInterval(프레임, 5);
함수 프레임() (
if (pos == 350) (
ClearInterval(id);
) 또 다른 (
포스++;
elem.style.top = 위치 + "px";
elem.style.left = pos + "px";
