CSS 애니메이션을 통한 하드웨어 가속도 소개

지난 몇 년 동안 우리는 종종 하드웨어 가속화와 웹 페이지에서 애니메이션을 개선하는 데 도움이되는 방법에 대해 자주 들었으므로 모바일 브라우저에서도 멋지고 매끄럽게 만듭니다. 그러나 경험이 적은 개발자는 하드웨어 가속화가 어떻게 작동하는지, 애니메이션을 빛나게하기 위해 올바르게 사용하는 방법을 모른다고 생각합니다.

. 이 용어 자체는 지나치게 복잡한 것처럼 들리며, 수학이 더 높습니다. 이 기사에서는이 주제에 대해 약간의 빛을 비추고 프론트 엔드 프로젝트 에서이 기술을 활용하는 방법을 보여 드리겠습니다.

. 키 테이크 아웃

하드웨어 가속은 CSS 애니메이션의 품질을 크게 향상시켜 특히 모바일 브라우저에서 더 부드럽고 효율적입니다. 이것은 렌더링 프로세스를 GPU (그래픽 처리 장치)에 오프로드하여 달성되며,이 작업에는 더 잘 갖추어져 있습니다. CSS 변환은 값 비싼 레인팅 작업을 피하는 데 사용할 수있는 GPU 친화적 인 특성입니다. 'Transform Hack'은 애니메이션이 시작되기 전에도 GPU에서 요소를 렌더링하는 데 사용하여 하드웨어 가속을 유발할 수 있습니다. 하드웨어 가속을 사용하는 것은 특히 모바일 장치에서 메모리 문제로 이어질 수 있으므로주의해서 수행해야합니다. 또한 GPU 및 CPU의 다른 렌더링 메커니즘으로 인해 글꼴 방지에 영향을 줄 수 있습니다. 'Will-Change'속성은 브라우저에 어떤 속성이 변경 될 것인지 알리기 위해 소개되어 브라우저가 사전에 해당 최적화를 만들 수 있습니다. 그러나 모든 브라우저가 아직이 속성을 지원하는 것은 아닙니다

왜 내가 신경 써야 하는가?

서로 위에 쌓인 몇 개의 공이 포함 된 간단한 애니메이션 예제를 살펴 보겠습니다 (즉, z 축에서는 하나의 공처럼 보입니다). 목표는이 볼 그룹을 애니메이션으로 옮기는 것입니다. 이를 수행하는 가장 쉬운 방법은 왼쪽 및 상단 속성을 조정하는 것입니다. JavaScript 로이 작업을 수행 할 수 있지만 대신 CSS 애니메이션을 사용합니다. 공급 업체 접두사를 제외하고 있지만 AutoPRefixer와 같은 것을 사용하여 전체 호환성을 보장해야합니다.

다음은 버튼을 사용하여 JavaScript를 사용하여 애니메이션을 시작하는 라이브 데모입니다. Codepen에서 sitepoint (@sitepoint)에 의해 상단/왼쪽 특성으로 겹치는 볼을 애니메이션하는 펜을 참조하십시오. "애니메이션 시작"버튼을 클릭 한 후에는 데스크탑 브라우저에서도 애니메이션이 매우 매끄럽지 않다는 것을 알 수 있습니다. 모바일 장치에서 애니메이션을 테스트하면 60fps에서 멀리 떨어져 있음을 알 수 있습니다. 이 문제를 해결하기 위해 상단 및 왼쪽 값을 애니메이션하는 대신 Translate () 함수를 사용하여 CSS 변환을 사용할 수 있습니다.

아래 데모에서 위의 코드를 사용해보십시오 : <anim> Codepen에서 Sitepoint (@SitePoint)에 의해 CSS 변환으로 겹치는 볼을 애니메이션하는 펜을 참조하십시오. <ation> 이제 애니메이션이 좋고 매끄 럽습니다. 엄청난! 그렇다면 왜 이것이 도움이 되었습니까? 글쎄, CSS 변환은 왼쪽 및 상단 속성이있는 애니메이션과 달리 페인트를 유발하지 않습니다. 애니메이션 실행 중에 Chrome의 DevTools의 타임 라인 패널을 살펴 보겠습니다. <p data-default-tab="result" data-height="524" data-preview="true" data-slug-hash="OyKXyK" data-theme- data-user="SitePoint"> </p> <and> 왼쪽과 상단 예에서는 각 애니메이션 단계에서 녹색 막대를 볼 수 있습니다. 이것은 값 비싼 다시 인쇄 작업입니다. 애니메이션 프레임 속도는 60fps 미만이며, 우리는 항상 애니메이션을 부드럽게 만들기 위해 달성하는 것을 목표로합니다. <the> 이제 CSS 변환의 경우 타임 라인을보십시오. <p> </p> <see> 보시다시피, 애니메이션 중에 녹색 막대가 없습니다. <p> <in> Chrome의 DevTools에서 이용 가능한 또 다른 기능은 페인트 프로세스를 추적하는 것입니다. DevTools를 열고 ESC 키를 누른 다음 "렌더링"탭을 선택 하여이 옵션을 찾을 수 있습니다. 이 기능이 켜지면 녹색 상자 (즉, 페인트 사각형)가 다시 인쇄 된 영역 주위에 나타납니다. 왼쪽과 상단 예에서 볼에는 전체 애니메이션 프로세스를위한 녹색 상자가있어 레페인트를 나타냅니다. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027109152037.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 애니메이션을 통한 하드웨어 가속도 소개" > </in></p> 반면에, CSS 변환 예에서는 페인트 사각형이 첫 번째 및 마지막 애니메이션 프레임에만 표시됩니다. <do> 그렇다면 변환이 어떻게 다시 인쇄되지 않고 애니메이션을 렌더링 하는가? 기본 답변은 CSS 변환이 소프트웨어 렌더링을 피하는 하드웨어 가속도를 사용하는 GPU <p> 메모리에서 직접 발생한다는 것입니다. 이것을 더 자세히 살펴 보겠습니다. </p> <acc acc> 하드웨어 가속이 작동하는 방법 <ows> 브라우저가 페이지의 마크 업을 수신하면 Dom Tree를 구축하기 위해 구문 분석합니다. DOM 트리 및 CSS를 사용하면 브라우저가 렌더 트리를 구축 할 수 있습니다. 렌더 트리는 렌더 객체로 구성됩니다. - 페이지에서 렌더링 할 요소입니다. 각 렌더 객체는 그래픽 레이어에 할당됩니다. 각 레이어는 텍스처로 GPU에 업로드됩니다. 여기서의 속임수는 3D 그래픽의 경우와 같이 층이 레인지없이 GPU에서 변환 될 수 있다는 것입니다. 이러한 변환은 별도의 복합체 프로세스에 의해 이루어집니다. Chrome의 구성에 대한 자세한 내용은 여기를 참조하십시오. <p> 이 예에서 CSS 변환은 GPU에서 직접 변환 할 수있는 새로운 복합 층을 만듭니다. Chrome의 DevTools는 "Show Layer Borders"옵션을 사용하여 복합 레이어를 볼 수 있습니다. 각 복합층 층 <with> CSS 변환이있는 우리의 볼에는 주황색 경계가 있으며 개별 복합층으로 이동합니다.<p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027109820571.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 애니메이션을 통한 하드웨어 가속도 소개" > 이 시점에서, 당신은 다음과 같이 묻습니다. 브라우저는 언제 별도의 복합 레이어를 생성합니까? </p> <in> 다음 경우에는 그렇게합니다 <p> 3D 또는 원근법의 경우 <or> CSS 변환 (본 예에서) <video> 또는 <canvas> 요소의 경우 > CSS 필터를 사용할 때는 <s>입니다 <that> 추출 된 다른 요소가 복합 층으로 겹치는 요소의 경우 (예 : Z-index를 사용하여) <p> <thinking> 당신은 생각하고있을 것입니다. 이 예제는 3D 변환이 아닌 2D 번역을 사용했습니다. 그리고 당신이 맞습니다. 그렇기 때문에 타임 라인에서 애니메이션 프로세스의 시작과 끝에 두 가지 추가로 다시 칠하는 작업이 있습니다. </thinking></p> <ul> <the> 3D와 2D 변환의 차이점은 3D 변환이 브라우저가 사전에 별도의 복합 레이어를 생성하는 반면, 2D 변환은 즉시이를 수행한다는 것입니다. 애니메이션이 시작될 때 새로운 복합 레이어가 생성되고 텍스처가 GPU에로드되어 다시 칠해야합니다. 그런 다음 애니메이션은 GPU의 작곡가에 의해 수행됩니다. 애니메이션이 완료되면 추가 복합 레이어가 제거되어 또 다른 페인팅 작업이 발생합니다. <li> <el> gpu의 렌더링 요소 <s> 요소의 모든 CSS 속성 변경이 GPU에서 직접 처리 할 수있는 것은 아닙니다. 다음 속성 만 지원됩니다 </s></el> </li> <li> 변환 </li> 불투명도 <li> 필터 </li> <ensure> 따라서 부드럽고 고품질 애니메이션을위한 최고의 기회를 보장하기 위해 항상 이러한 GPU 친화적 인 특성을 사용해야합니다. <element> 요소가 gpu 에서 렌더링되도록 강요합니다 어떤 경우에는 애니메이션이 시작되기 전에도 GPU의 요소를 렌더링해야 할 수도 있습니다. 이를 통해 새로운 레이어 생성으로 인한 첫 번째 레인 팅 작업을 피할 수 있습니다. 이를 달성하기 위해 소위 "Transform Hack"이 유용 할 수 있습니다. </element></ensure></the> </ul> <is> 이것이하는 일은 브라우저에 3D 변환을 수행하고 싶다는 것을 브라우저에 알리는 것입니다. 이로 인해 브라우저가 별도의 레이어를 생성하고 요소를 GPU로 이동시켜 하드웨어 가속을 트리거합니다. <can>이 기술은 하나의 요소의 다시 페인팅이 그 뒤에 다른 요소로 인해 너무 비싸면 유용 할 수 있습니다. 첫 번째 예제로 돌아가서 CSS 필터를 사용하여 단일 볼과 컨테이너가 포함 된 컨테이너가 포함되도록 약간 변경하겠습니다. 공은 왼쪽 및 상단 특성으로 애니메이션됩니다. <p> <anim> Codepen에서 sitepoint (@sitepoint)에 의해 상단/왼쪽 속성으로 공을 애니메이션하는 펜을 참조하십시오. <ball> 다시, 볼 움직임은 육포입니다. 이는 배경이 흐려지기 때문에 각 페인팅 작업 비용이 너무 많이 들기 때문에 발생합니다. </ball></anim></p> <add> 이제 컨테이너에 변환 해킹을 추가 해 봅시다<anim> Codepen에서 sitepoint (@sitepoint)에 의해 하드웨어 가속으로 펜을 애니메이션 왼쪽/상단 속성을 참조하십시오. <not> 결과는 그리 나쁘지 않으며 애니메이션이 잘 작동합니다. 왜? 이제 흐릿한 페인트 배경이 다른 복합 레이어로 이동하고 각 애니메이션 단계에서 공의 다시 페인팅이 저렴하기 때문입니다. <p data-default-tab="result" data-height="547" data-preview="true" data-slug-hash="zvgBNp" data-theme- data-user="SitePoint"> <acc>주의와 함께 하드웨어 가속도를 사용하십시오 <free> 무료로 제공되는 것은 없습니다. 하드웨어 가속과 관련된 몇 가지 문제가 있습니다 </free></acc></p> 메모리 가장 중요한 문제는 메모리와 관련이 있습니다. GPU에 너무 많은 텍스처를로드하면 메모리 문제가 발생할 수 있습니다. 이것은 모바일 장치에서 실제로 중요하며 모바일 브라우저를 충돌시킬 수도 있습니다. 결과를 염두에두고 페이지의 모든 요소에 대한 하드웨어 가속도를 사용하지 마십시오. <p>. <end end> ​​글꼴 렌더링 </end></p> GPU의 렌더링은 글꼴 방지에 영향을 미칩니다. 이는 GPU와 CPU가 다른 렌더링 메커니즘을 가지고 있기 때문에 발생합니다. 따라서 애니메이션이 끝날 때 하드웨어 가속을 끄면 애니메이션 중에 텍스트가 흐려집니다. Keith Clark 의이 게시물에서 글꼴 렌더링 문제에 대한 자세한 내용을 읽을 수 있습니다. <h2> 가까운 미래 <to>“변환 해킹”을 사용하여 별도의 복합 레이어를 생성해야 할 필요성은 번거 롭습니다. 브라우저는 분명히이를 수행하는 간단한 방법을 제공해야합니다. 그렇기 때문에 Will-Change 부동산이 도입되었습니다. 이 기능을 사용하면 브라우저에 어떤 속성이 변경 될지 알릴 수 있으므로 브라우저는 사전에 해당 최적화를 만들 수 있습니다. 다음은 브라우저에 변환 속성이 ​​변경 될 것이라고 알려주는 예입니다. </to> </h2> 불행히도, 모든 브라우저가 윌 변화를 지원하는 것은 아닙니다. 다음 리소스에서 윌 바이트에 대해 더 많이 배울 수 있습니다. <p> </p> <to to> Nick Salloum의 CSS Will-Change 부동산 소개 <to> Sara Soueidan의 CSS Will Change 부동산에 대해 알아야 할 모든 것. <br> </to></to></not></anim></add></can></is></that></s></canvas></video></or></p> 결론 <p> 우리가 다룬 내용을 요약하려면 <ize ize> <br> GPU를 활용하면 애니메이션의 품질을 향상시킬 수 있습니다 GPU 렌더링 된 애니메이션은 모든 장치에서 60fps 여야합니다 <u> gpu 친화적 인 CSS 속성 를 사용하십시오 <force>“변환 해킹”을 사용하여 GPU에서 요소를 강제로 렌더링하는 방법을 이해합니다. <h2> <used>이 기술을 사용했거나 피드백이 있으면 의견을 제시하십시오. </used> </h2> <questions> 하드웨어 가속도 및 CSS 애니메이션 에 대한 질문이 자주 묻습니다 <role> 하드웨어로 인한 CSS 애니메이션에서 GPU의 역할은 무엇입니까? GPU (Graphics Processing Unit)는 하드웨어에 따른 CSS 애니메이션에서 중요한 역할을합니다. 그래픽 및 이미지 처리를 렌더링합니다. CSS 애니메이션이 하드웨어로 셀러링되면 GPU는 CPU (Central Processing Unit)에서 애니메이션을 렌더링하는 작업을 인수합니다. GPU는 이러한 작업을 처리하도록 특별히 설계되었으므로 더 매끄럽고 빠르며 효율적인 애니메이션이 발생합니다. <h3 id="하드웨어-가속이-CSS-애니메이션의-성능을-어떻게-향상-시키는가"> 하드웨어 가속이 CSS 애니메이션의 성능을 어떻게 향상 시키는가? </h3> <p> 성능이 향상됩니다. CPU에서 GPU 로의 그래픽 처리 작업 중 일부를 오프로드하여 CSS 애니메이션의 이를 통해 CPU는 다른 작업에 집중할 수 있으므로 웹 사이트 또는 응용 프로그램의 전반적인 성능이 향상됩니다. 또한 GPU는 그래픽 작업을 처리 할 수 ​​있도록 더 잘 갖추어져있어 더 부드럽고 효율적인 애니메이션을 초래합니다. </p> 하드웨어로 인한 CSS 애니메이션을 사용하는 데 필요한 단점이 있습니까? <h3> </h3> 동안 하드웨어가 셀러 된 CSS 애니메이션이 있습니다. 성능을 크게 향상시킬 수 있고 잠재적 인 단점이 있습니다. 주요 관심사 중 하나는 호환성 문제입니다. 모든 장치 나 브라우저가 하드웨어 가속을 지원하는 것은 아니며, 이로 인해 사용자 경험이 일관되지 않을 수 있습니다. 또한 하드웨어 가속을 과도하게 사용하면 전력 소비가 증가 할 수 있으며, 이는 모바일 장치의 우려가 될 수 있습니다. <p> CSS 애니메이션에 대한 하드웨어 가속을 어떻게 활성화 할 수 있습니까? </p> CSS 애니메이션에 대한 하드웨어 가속화 활성화 CSS 코드에서 '변환'속성을 사용하여 수행 할 수 있습니다. 이 속성은 GPU가 애니메이션 렌더링을 인수하도록 트리거합니다. 예를 들어, 'transform : translatez (0)'또는 'transform : rotate (0deg)'를 사용할 수 있습니다. 하드웨어 가속을 활성화하기 위해 하드웨어 가속화에서 가장 도움이되는 CSS 애니메이션 유형은 무엇입니까? <h3> </h3> 3D 변환, 전환 및 키 프레임 애니메이션과 같은 복잡한 그래픽 작업이 포함 된 CSS 애니메이션은 하드웨어 가속으로 큰 이점을 얻을 수 있습니다. 이러한 작업은 CPU가 처리 할 때 리소스 집약적 일 수 있지만 GPU는 더 효율적으로 처리하여 더 부드러운 애니메이션을 초래할 수 있습니다. <p> 하드웨어에 액세서리 CSS 애니메이션을 사용할 때 어떻게 호환성을 보장 할 수 있습니까? </p> <h3 id="하드웨어-가속-CSS-애니메이션을-사용할-때-호환성을-보장하려면-다양한-장치-및-브라우저에서-웹-사이트-또는-응용-프로그램을-테스트하는-것이-중요합니다-CSS-코드에서-폴백을-사용하여-하드웨어-가속을-지원하지-않는-장치-또는-브라우저에-대한-대체-애니메이션을-제공-할-수도-있습니다-acc-하드웨어-가속도가-CSS-전환과-함께-사용할-수-있습니까-h"> 하드웨어 가속 CSS 애니메이션을 사용할 때 호환성을 보장하려면 다양한 장치 및 브라우저에서 웹 사이트 또는 응용 프로그램을 테스트하는 것이 중요합니다. CSS 코드에서 폴백을 사용하여 하드웨어 가속을 지원하지 않는 장치 또는 브라우저에 대한 대체 애니메이션을 제공 할 수도 있습니다.<acc> 하드웨어 가속도가 CSS 전환과 함께 사용할 수 있습니까? <h3> </h3> 예, 하드웨어 가속도는 CSS 전환과 함께 사용할 수 있습니다. '변환'속성을 사용하면 GPU를 트리거하여 전환을 렌더링하여 더 부드럽고 효율적인 애니메이션을 초래할 수 있습니다. <p> 하드웨어 가속이 모바일 장치의 배터리 수명에 어떤 영향을 미칩니 까? 하드웨어 가속은 CSS 애니메이션의 성능을 향상시킬 수 있지만 전력 소비를 증가시켜 모바일 장치의 배터리 수명에 잠재적으로 영향을 줄 수 있습니다. 하드웨어 가속을 사용할 때 성능과 전력 소비 사이의 균형을 맞추는 것이 중요합니다. </p> 2D 애니메이션에 하드웨어 가속을 사용할 수 있습니까? <h3> </h3> 예, 하드웨어 가속도를 2D 애니메이션에 사용할 수 있습니다. CSS 코드에서 'Transform'속성을 사용하면 GPU를 트리거하여 애니메이션을 렌더링하여 더 부드럽고 효율적인 애니메이션을 초래할 수 있습니다. <p> 하드웨어 가속을 위해 CSS 코드를 최적화 할 수 있습니까? > </p> 하드웨어 가속을위한 CSS 코드 최적화에는 'Transform'속성을 사용하여 애니메이션 렌더링을위한 GPU를 트리거하는 것과 관련이 있습니다. 하드웨어 가속화를 피하는 것도 중요합니다. 이로 인해 전력 소비가 증가 할 수 있습니다. 또한 다양한 장치 및 브라우저에서 웹 사이트 또는 응용 프로그램을 테스트하면 호환성을 보장 할 수 있습니다.</acc> </h3></role></questions></force></u></ize></p></in></with></p></ows></acc></do></see></the></and></ation></anim>

위 내용은 CSS 애니메이션을 통한 하드웨어 가속도 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!