웹 애니메이션 API로 페이지를 생생하게 가져옵니다

이 기사는 게스트 저자 인 Dudley Storey 의이 기사에서 역동적이고 성능이 뛰어난 웹 애니메이션을 만드는 강력한 도구 인 Web Animations API를 탐색합니다. Sitepoint의 게스트 게시물은 주요 JavaScript 전문가의 매력적인 콘텐츠를 제공하는 것을 목표로합니다. 키 하이라이트 :

웹 애니메이션 API는 CSS 전환, SMIL, JavaScript 및 JavaScript 애니메이션 프레임 워크의 가장 좋은 측면을 통합하여 한계를 극복하고 웹 애니메이션에 대한 표준화 된 접근 방식을 제공합니다. CSS 애니메이션의 성능과 일치하는 키 프레임, 완화 및 JavaScript 기반 요소 컨트롤을 기본적으로 지원합니다. 이 API는 기존 CSS 방법에 비해보다 역동적이고 표현력이 풍부하며 효율적인 애니메이션을 가능하게합니다. 새로운 구문이 필요하지 않고 DOM 요소를 애니메이션합니다 > 애니메이션은 JavaScript 내에서 직접 만들어 관리되며 향상된 유연성과 제어 기능을 제공합니다. 키 프레임은 객체 내의 배열로 표시되며 명시 적 "to"또는 "From"선언의 필요성을 제거합니다. 대부분의 최신 브라우저 (Chrome, Firefox, Safari)는 웹 애니메이션 API를 지원합니다. 지원되지 않는 브라우저에는 강력한 폴리 필드를 사용할 수 있습니다. SVGS와 호환 및 반응

모든 애니메이션에 대한 단일 API : 웹 애니메이션은 역사적으로 네 가지 다른 방법에 대해 조각화되었습니다. CSS 전환 및 애니메이션 : 높은 성능 및 키 프레임을 지원하지만 복잡한 애니메이션을 구축하는 데 시간이 많이 걸리고 CSS 및 JavaScript의 제어가 제한됩니다. 간단한 UI 응답, 루프 및 페이지로드 애니메이션에 종종 사용됩니다.

Smil (동기화 된 멀티미디어 통합 언어) :

강력하지만 복잡하고 완전한 브라우저 지원이 부족합니다. SVG 요소로 제한됩니다 JavaScript :
• 는 직접 요소 컨트롤을 제공하지만 키 프레임 및 완화에 대한 내장 지원이 부족하며 성능은 CSS만큼 최적화되지 않습니다. 캔버스 API는 우수하지만 애니메이션 기초가없고 임의의 DOM 요소를 애니메이션 할 수 없습니다. javaScript 애니메이션 프레임 워크 (예 : Greensock) :
주소 JavaScript의 애니메이션 제한 사항이지만 프레임 워크 오버 헤드 (페이지로드, 성능, 학습 곡선)를 소개합니다.
• 웹 애니메이션 API는 이러한 메소드의 가장 좋은 기능을 통합 사양으로 결합하여 단점을 제거하는 것을 목표로합니다. 키 프레임, 완화 및 JavaScript 요소 컨트롤에 대한 기본 지원을 제공하여 CSS와 동일한 화면 성능을 달성합니다. 브라우저 지원이 커지고 안정적인 폴리 필드를 사용하면 매력적인 웹 애니메이션을 만드는 데 강력한 옵션입니다.
JavaScript의 keyframes :
• 간단한 예를 들어 설명하겠습니다 : 화면을 가로 질러 빨간 공을 애니메이션합니다. HTML 및 초기 CSS는 동일하게 유지됩니다
  공을 움직이는 CSS 애니메이션 :

  <code class="language-html"><div id="redball"></div></code>

  동등한 웹 애니메이션 api javaScript :

  <code class="language-css">body { margin: 0; background: #000; overflow: hidden; min-height: 100vh; }
  #redball { background: red; width: 30vmin; height: 30vmin; border-radius: 50%; }</code>

  객체 내의 키 프레임 배열과 지속 시간 동안 밀리 초를 사용하십시오. 향후 브라우저 업데이트는 KeyFrame 구문을 단순화합니다

  이미지 취급 :

  <code class="language-css">@keyframes moveBall { from { transform: translateX(-20vw); } to { transform: translateX(100vw); } }
  #redball { animation: moveBall 3s infinite; }</code>

  그런 다음이 기사는 더 복잡한 예를 보여줍니다. 페이지에 일련의 이미지를 애니메이션하고 거래 카드를 시뮬레이션합니다. 이로 인해 API가 역동적 인 무작위 애니메이션을 처리하는 능력을 보여줍니다. 코드는 애니메이션을 시작하기 전에 모든 이미지가로드되도록

  를 사용합니다. 애니메이션에는 랜덤 포지셔닝, 회전 및 페이딩 효과가 포함됩니다

  <code class="language-javascript">var moveBall = document.getElementById('redball').animate([{ transform: 'translateX(-20vw)' }, { transform: 'translateX(100vw)' }], { duration: 3000, iterations: Infinity, easing: 'ease' });
  moveBall.play();</code>

  미래와 결론 :

  웹 애니메이션 API는 적극적으로 개발 중이며 브라우저 지원이 증가하고 쉽게 구할 수있는 폴리 필드가 있습니다. 이 기사는 API의 장점을 강조함으로써 결론을 내립니다. CSS 애니메이션의 선언적 특성에서 JavaScript의 동적 제어로 전환하여보다 표현력 있고 성능이 뛰어난 애니메이션을 가능하게합니다.

  자주 묻는 질문 (FAQ) :

  >이 기사는 정의, CSS 애니메이션의 차이, 사용법, 애니메이션 제어, 혜택, 브라우저 지원, SVG 애니메이션, 애니메이션 체인, 반응 통합 및 학습을 포함하여 웹 애니메이션 API의 다양한 측면을 다루는 포괄적 인 FAQ 섹션으로 마무리됩니다. 자원. <..>

위 내용은 웹 애니메이션 API로 페이지를 생생하게 가져옵니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!