CSS3로 60 FPS 모바일 애니메이션을 달성하십시오

키 포인트

부드러운 모바일 애니메이션은 CRP (Critical Rendering Path)의 합성 단계에주의를 기울여야하며 및 와 같은 속성을 사용하여 이전 단계의 부담을 증가시키지 않습니다.

, ,
• , transform, opacity 애니메이션 전환 속성을 사용하지 않으면 초당 60 프레임의 안정적인 프레임 속도를 달성하려면 GPU를 사용하여 애니메이션을 렌더링하고
• 속성을 ​​통해 다른 레이어로 요소를 홍보하여 ​​브라우저 처리 레이아웃 렌더링 또는 드로잉을 피하십시오. left top 이 기사는 원래 Autsystems에 출판되었습니다. SitePoint를 지원하는 파트너에게 감사합니다. right 모바일 앱에서 애니메이션을 쉽게 만들 수 있습니다. 다음 팁을 따르면 모바일 앱에서 쉽게 애니메이션 할 수 있습니다. 요즘 모든 사람들이 모바일 장치에서 CSS3 애니메이션을 사용하지만 많은 사람들이 잘못 사용합니다. 모범 사례는 종종 개발자가 간과합니다. 사람들이 왜 이러한 관행이 존재하는지, 왜 그렇게 강력하게 지원되는지 이해하지 못하기 때문입니다. 장비 사양은 매우 넓습니다. 따라서 코드가 최적화되지 않으면 대부분의 사용자에게 표준 경험을 제공합니다. 기억하십시오 : 일부 고급 플래그십 장치는 강력하지만 세계 대부분의 사람들은 이러한 고성능 장치와 비교하여 LCD 화면이있는 주판과 같은 장치를 사용합니다. CSS3의 힘을 올바르게 활용할 수 있도록 도와 드리고자합니다. 이렇게하려면 먼저 무언가를 이해해야합니다. bottom 타임 라인 이해 transform
  요소를 렌더링하고 처리 할 때 브라우저는 무엇을합니까? 이 타임 라인을 키 렌더링 경로라고합니다 : 이미지 출처 : www.csstriggers.com 부드러운 애니메이션을 달성하려면 이전 단계에서 부담을 증가시키지 않고 합성 단계에 영향을 미치는 속성을 변경하는 데 집중해야합니다.
• will-change 스타일

브라우저는 요소에 적용 할 스타일을 계산하기 시작합니다 - 스타일을 다시 계산하십시오.

레이아웃

다음 단계에서 브라우저는 각 요소의 모양과 위치 인 레이아웃을 생성합니다. 여기서 브라우저는 너비와 높이와 같은 페이지 속성, 예를 들어 그 여백 또는 , , ,

, 를 세트합니다.

드로우

브라우저는 각 요소의 픽셀을 레이어로 채 웁니다. 이 속성을 나타냅니다. , , , , 등을 나타냅니다. box-shadow border-radius color 구성 background-color 이곳은 애니메이션을 수행하려는 곳입니다. 브라우저가 모든 레이어를 화면에 끌어들일 때이기 때문입니다. 최신 브라우저는 및

속성을 ​​사용하여 4 가지 스타일 속성을 잘 애니메이션 할 수 있습니다.

위치 - 줌 - 회전 - 불투명도 - transform opacity 초당 60 프레임을 달성하는 방법

기억하십시오. 이제 소매를 굴리고 열심히 일할 시간입니다. HTML부터 시작하겠습니다. 우리는 매우 간단한 구조를 만들고 클래스에 넣을 것입니다.
• transform: translateX(n) translateY(n) translateZ(n);
• transform: scale(n); 잘못된 메소드
• transform: rotate(ndeg); 우리가 변경된 속성을 보셨습니까? ,
,
• , opacity: n;,
전환 속성을 피해야합니다. 이들은 브라우저가 매번 레이아웃 패스를 수행하도록 강제하기 때문에 부드러운 애니메이션을 만들지 않습니다. 이는 모든 요소의 자식 요소에 영향을 미칩니다. 결과는 이것입니다 :

이 애니메이션은 충분히 부드럽 지 않습니다. 우리는 DevTools 타임 라인을 사용하여 무대 뒤에서 무슨 일이 있었는지 확인했으며 결과는 다음과 같습니다.

녹색 영역은 애니메이션을 렌더링하는 데 걸리는 시간을 나타냅니다. 이 데이터는 불규칙한 프레임 속도와 느린 성능을 보여줍니다. "녹색 막대는 FPS를 의미합니다. 높은 막대는 애니메이션이 60fps로 렌더링된다는 것을 의미합니다. 낮은 막대는 60fps 미만을 의미합니다. 따라서 이상적으로는 녹색 막대가 타임 라인 전체에 항상 높게 유지되기를 원합니다. 빨간색 막대는 또한 말더듬을 의미합니다. 진행 상황을 측정하는 또 다른 방법은이 빨간색 막대를 제거하는 것입니다. 변환 사용

속성은 레이아웃이 아닌 합성 단계에 영향을 미칩니다. 여기서 우리는 애니메이션이 시작되기 전에 우리의 레이어가 안정적이라고 브라우저에 알리므로 애니메이션을 렌더링 할 때 장애물이 적습니다. app-menu layout

이것은 타임 라인이 반영되는 방식입니다

결과가 좋아지기 시작하고 프레임 속도는 안정적으로 보이므로 애니메이션이 더 부드럽습니다.

GPU에서 애니메이션을 실행하십시오 그런 다음 다음 단계로 가져 가자. 실제로 원활하게 실행 되려면 GPU를 사용하여 애니메이션을 렌더링합니다.

일부 브라우저는 여전히

또는 가 필요하지만 속성은 미래입니다. 이 속성은 요소를 다른 레이어로 홍보하므로 브라우저는 레이아웃 렌더링 또는 드로잉을 고려할 필요가 없습니다. 얼마나 매끄러운 지 보십니까? 타임 라인은 이것을 확인합니다 :

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

애니메이션의 프레임 속도가 더 일정하고 애니메이션 렌더링 속도가 더 빠릅니다. 그러나 처음에는 여전히 긴 프레임이 실행되고 있습니다. 처음에는 약간의 병목 현상이 있습니다. 처음에 우리가 만든 HTML 구조를 기억하십니까? JavaScript에서 우리가

div : 를 어떻게 제어하는지 봅시다 translateZ() 아아! 우리는 translate3d() 초당 60 프레임에서 버터 매끄러운 용액 will-change

뷰포트 영역 밖에서 메뉴를 만들면 어떻게됩니까? 검역 영역에 메뉴를 넣으면 애니메이션이 원하는 요소에만 영향을 미칩니다. 따라서 다음 HTML 구조를 사용하는 것이 좋습니다

이제 우리는 메뉴의 상태를 약간 다른 방식으로 제어해야합니다. JavaScript의 함수를 사용하여 애니메이션 끝에 삭제되는 클래스에서 애니메이션을 조작합니다.

모든 것을 정리하고 결과를 확인합시다. 다음은 완전한 CSS3 활성화 된 예입니다. 모든 것이 올바른 위치에 있습니다 :

타임 라인은 우리에게 무엇을 보여주는가?

app-menu 그것은 모두 녹색 스트립입니다. 실용적인 예를보고 싶습니까? 여기를 클릭하십시오. (실제 링크는 여기에 삽입되어야합니다)

<code class="language-css">.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}</code>

(모바일 애니메이션에 대한 FAQ 섹션은 여기에 추가되어야합니다. 콘텐츠는 원본 문서의 FAQS 섹션과 일치합니다)

위 내용은 CSS3로 60 FPS 모바일 애니메이션을 달성하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!