CSS 및 JavaScript를 사용한 프레임에 의한 프레임

이 튜토리얼은 HTML, CSS 및 JavaScript를 사용하여 매끄럽고 성능 및 관리 가능한 프레임 별 애니메이션을 제작하기위한 다양한 방법을 탐색합니다. 우리는 깜박 거리는 눈 애니메이션을 구축하여 브라우저와 장치에서 최적의 결과를 달성하기 위해 접근 방식을 점차적으로 정제합니다. 주요 개념 :

CSS와 JavaScript를 사용하는 프레임 별 애니메이션 기술은 각각 트레이드 오프가있는 다양한 접근 방식을 제공합니다. SVG의 확장 성과 반응성은 특히 복잡하거나 대화식 애니메이션의 경우 GIF보다 우수합니다. 스프라이트 기반 애니메이션 및 CSS 키 프레임은 HTTP 요청을 최소화하고 렌더링을 향상시킵니다. CSS는 특히 하드웨어 가속 ()을 사용하여 속성을 변환하고 리페이트 및 리플 로우를 줄임으로써 성능을 최적화합니다. 올바른 기술을 선택하는 것은 확장 성, 응답 성, 성능 및 유지 보수 요구에 따라 다릅니다.

프레임 별 애니메이션 란 무엇입니까?

Adobe에 의해 정의 된 프레임 별 애니메이션은 모든 프레임의 무대 내용을 변경하는 것과 관련이 있습니다. 각 프레임이 독특한 복잡한 애니메이션에 이상적입니다. 본질적으로 일련의 이미지는 움직임의 환상을 만듭니다. 이 튜토리얼은 확장 성을 위해 SVG 이미지를 사용합니다. PNG, JPEG 및 GIF와 같은 대안이 나중에 논의됩니다. jQuery를 사용하고 AutoPrefixer가 구성되었다고 가정합니다 방법 :

이미지 변경 출처 :
• 이 간단한 방법에는 요소의 속성을 동적으로 변경하는 것이 포함됩니다. 는 더 부드러운 애니메이션에 사용되지만 이미지 사전 로딩은 초기 jank를 방지하는 데 중요합니다. Preloading은 이미지와 함께 숨겨진 div를 배경 이미지로 추가하여 달성됩니다.
• 프로 :
선언적, 이미지는 제자리에 남아 있습니다 단점 :
• 여러 HTTP 요청은 초기 페이지로드를 늦출 수 있습니다. 리페인트로 인한 모바일의 Janky 애니메이션 가능성.
• translate3d 이미지 불투명도 변경 : 이 접근법은 소스 대신 이미지 불투명도를 변경하여 페인트를 피합니다. 모든 이미지는 사전로드되어 성능이 향상되지만 여전히 여러 이미지로드가 필요합니다.
프로 :

방법 1과 비교하여 렌더링 성능 향상 단점 :

는 여전히 여러 이미지로드가 필요하므로 초기 페이지로드에 영향을 줄 수 있습니다.

스프라이트 위치 변경 : 이것은 모든 애니메이션 프레임을 포함하는 단일 이미지 인 CSS 스프라이트 시트를 사용합니다. CSS 애니메이션은 애니메이션을 생성하기 위해

를 변경합니다

pros : 단일 HTTP 요청, JavaScript가 필요하지 않습니다 단점 :
• 리페인트는 모바일에서 Jank를 유발할 수 있으며, 서브 픽셀 렌더링으로 인해 이미지가 흔들릴 수 있습니다.
변환과 함께 움직이는 스프라이트 :
• 이것은 를 사용하여 메소드 3을 최적화합니다. 이것은 리피트와 리플 로우를 최소화합니다. 애니메이션에서 백분율 값을 지원하지 않는 이전 IE 버전에는 폴백이 필요합니다. 는 하드웨어 가속에 사용됩니다
pros : 단일 HTTP 요청, 최소화 된 리페이트로 인해 모바일의 부드러운 애니메이션. 단점 :

즉, 폴백이 필요합니다

인라인 svg : 외부 파일을 사용하는 대신 SVG를 인화하는 것은 초기 페이지로드 시간, 특히 재 방문 확률이 낮은 페이지에서는 초기 페이지로드 시간을 개선 할 수 있습니다. 성능 비교 : 성능 테스트 (예 : JSPERF 사용)는 스프라이트 변환 방법 (메소드 4)이 일반적으로 최상의 렌더링 성능을 제공 함을 보여줍니다. transform: translateX 대안 : background-position gif : translateX 확장 성이 중요하지 않다면 적합하지만 애니메이션 흐름에 대한 제어가 부족하고 클 수 있습니다. transform: translate3d(0, 0, 0) 캔버스 :

작은 화면에서 여러 애니메이션 객체가있는 성능에 탁월하지만 캔버스 API 지식이 필요하고 DOM 이벤트 지원이 부족합니다.

• 결론 : 최상의 방법은 프로젝트 요구 사항에 따라 다릅니다. 확장 성을 위해 SVG의 우선 순위를 정하고 성능에 변환 특성을 사용하며 최적의 초기 부하 시간에 대한 스프라이트를 고려하십시오. 성능, 유지 관리 및 개발자 친숙성의 균형을 맞추는 접근 방식을 선택하십시오. (이미지 URL은 쉽게 사용할 수있는 형식으로 제공되지 않았으므로 출력에 포함되지 않았습니다. 자리 표시자를 실제 이미지 URL로 바꾸십시오.)

위 내용은 CSS 및 JavaScript를 사용한 프레임에 의한 프레임의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!