성능을 위해 애니메이션에 가장 적합한 CSS 속성은 무엇입니까?

웹 애니메이션의 고성능을 달성하려면 게시 속성을 유발하지 않도록 변환 및 불투명 속성을 사용하는 데 우선 순위를 부여해야합니다. 1. 변환 (예 : 번역, 스케일, 회전) 및 불투명도 변경은 일반적으로 GPU에 의해 가속화되며 합성 작업 만 필요하며 릴리스 레이아웃 또는 리 그리프는 트리거되지 않습니다. 2. 릴리스 레이아웃 지터를 방지하려면 너비, 높이, 상단, 왼쪽 등과 같은 애니메이션을 피하십시오. 3. 당신은 독립적 인 층으로의 요소를 개선하기 위해 의지 변화 또는 Translatez (0)를 적절하게 사용할 수 있지만 너무 많지는 않습니다. 4. 애니메이션의 복잡성을 제어하고, 애니메이션 요소의 수를 동시에 줄이고, JavaScript 드라이버 대신 CSS 전환을 선호하고, 요청시나 밍 프레임을 사용하여 필요할 때 제어하십시오.

웹 페이지에서 요소를 애니메이션 할 때 모든 CSS 속성이 동일하게 생성되는 것은 아닙니다. 일부는 순조롭게 달리고 멋지게 보이고, 다른 사람들은 Jank와 속도를 느리게 할 수 있습니다. 애니메이션이 성능을 상하게하고 성능을 상하게하지 않기를 원한다면 브라우저가 효율적으로 처리 할 수있는 속성을 고수하는 것이 가장 좋습니다. 이상적으로는 레이아웃이나 페인트가 아닌 합성 변경 만 필요합니다.

부드러운 애니메이션 성능에 관심이 있으면 집중해야 할 사항은 다음과 같습니다.

부드러운 애니메이션에 transform 과 opacity 사용하십시오

이 두 속성은 고성능 애니메이션과 관련하여 골드 표준입니다. 왜? 비싼 레이아웃이나 페인트 작업을 유발하지 않고 하드웨어 가속도를 통해 GPU가 종종 처리 할 수 ​​있기 때문입니다.

• transform : 여기에는 translate , scale , rotate 및 skew 과 같은 것들이 포함됩니다. 예를 들어, transform: translateX(100px) 로 요소를 이동하는 것은 left 또는 margin-left 값을 변경하는 것보다 훨씬 부드럽습니다.

• opacity : 투명성을 바꾸면 브라우저가 레이아웃을 다시 계산하거나 화면의 많은 부분을 다시 칠하도록 강요하지 않습니다.

빠른 팁 : 페이딩 및 메뉴 또는 툴팁의 미끄러짐과 같은 효과에 대한 두 가지를 결합하십시오.

레이아웃 트리거 속성을 애니메이션하지 마십시오

일부 속성으로 인해 브라우저는 모든 프레임마다 레이아웃을 다시 계산하게합니다. 이는 레이아웃 스래싱 이라고하며 애니메이션을 더 터뜨릴 수 있습니다.

애니메이션을 피하십시오 :

• width , height
• top , left , margin , padding
• border-width

이러한 종류의 변화는 브라우저가 모든 것이 얼마나 많은 공간을 차지하는지 다시 측정해야하며, 이는 애니메이션 루프에서 반복적으로 수행 할 때 계산적으로 무겁습니다.

예를 들어, 진행률 표시 줄을 성장시키기위한 애니메이션 width 간단 해 보일 수 있지만 transform: scaleX() 사용하면 일반적으로 더 나은 결과가 나옵니다.

가능한 경우 작곡 된 애니메이션을 고수하십시오

컴퓨터 (최종 화면 이미지를 구성하는 브라우저 엔진의 일부)를 트리거하는 속성을 애니메이션하면 상황이 더 빨리 실행되는 경향이 있습니다.

브라우저가 다음과 같이 최적화 할 수 있습니다.

• will-change 또는 translateZ(0) 사용하여 드물게 요소를 자신의 층으로 홍보
• 레이어로 과도하게 사용하지 않음 - 너무 많은 사람들이 실제로 성능을 해칠 수 있습니다.

이러한 종류의 최적화가 항상 필요하지는 않지만 자원이 더 제한적인 복잡한 UI 또는 모바일 장치에서 도움이 될 수 있습니다.

애니메이션 복잡성을 통제하십시오

잘 선택된 속성이 있더라도 애니메이션은 여전히 ​​무거워 질 수 있습니다.

• 그들은 한 번에 많은 요소에서 실행됩니다
• 복잡한 완화 곡선 또는 긴 기간을 사용합니다
• 애니메이션 중에 콜백 또는 JavaScript를 트리거합니다

물건을 밝게 유지하려면 :

• 한 번에 얼마나 많은 요소를 애니메이션하는지 제한하십시오
• JavaScript 중심 애니메이션보다 CSS 전용 전환을 선호합니다
• JS 컨트롤이 필요한 경우 requestAnimationFrame 사용하십시오

또한 소문자 장치에서 애니메이션을 테스트하십시오. 랩톱에 버터가 부드럽기 때문에 몇 년 전의 휴대 전화에 있다는 의미는 아닙니다.

성능 친화적 인 애니메이션은 주로 올바른 도구를 선택하고 무대 뒤에서 추가 작업을 일으키는 원인을 아는 것입니다. 대부분의 시간 동안 transform 과 opacity 고수하고, 레이아웃 hurting 속성을 피하고, 간단하게 유지하십시오.

위 내용은 성능을 위해 애니메이션에 가장 적합한 CSS 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!