[WPO] transform을 이용한 애니메이션 최적화

지난 포스팅에서 브라우저 렌더링 과정에 대해 설명했었다.

마지막 내용에서 GPU의 도움을 받아서 Repaint, Reflow 를 생략할 수도 있다는 글을 적었는데, 자세히 이번 포스팅에 기록해보고자 한다!

 

📌 GPU(Graphics Processing Unit)?

- 컴퓨터 화면에 이미지를 렌더링하는데 사용되는 처리

 

📌 GPU가 관여할 수 있는 속성

- transform, opacity 등등..

- 무거운 자바스크립트 코드를 돌리는 대신 이 속성을 사용할 경우, 독립된 스레드 상에서 재생되어 애니메이션이 빠르고 부드럽게 나타날 수 있다.

 

 

 

---

이제 transform 속성을 이용하여 애니메이션 최적화를 해보겠다!

 

기존 코드

const Bar = (props) => {
    return (
        <BarWrapper onClick={props.handleClickBar} isSelected={props.isSelected}>
            <BarInfo>
                <Percent>{props.percent}%</Percent>
                <ItemVaue>{props.itemValue}</ItemVaue>
                <Count>{props.count}</Count>
            </BarInfo>
            <BarGraph width={props.percent} isSelected={props.isSelected}></BarGraph>
        </BarWrapper>
    )
}

const BarGraph = styled.div`
    position: absolute;
    left: 0;
    top: 0;
    width: ${({width}) => width}%;
    transition: width 1.5s ease;
    height: 100%;
    background: ${({isSelected}) => isSelected ? 'rgba(126, 198, 81, 0.7)' : 'rgb(198, 198, 198)'};
    z-index: 1;
`

↑ 기존에는 width 값을 백분율로 받아서 변경해주는 식으로 애니메이션을 만들었었다.

 

 

🌱 transform의 scale 속성 이용

const BarGraph = styled.div`
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transform: scaleX(${({width}) => width / 100});
    transform-origin: center left;  // transform의 기준점 (세로기준 가로기준)
    transition: transform 1.5s ease;    // animation 담당
    height: 100%;
    background: ${({isSelected}) => isSelected ? 'rgba(126, 198, 81, 0.7)' : 'rgb(198, 198, 198)'};
    z-index: 1;
`

이렇게 최적화를 할 수 있다.

 

 

 

 

 

---

Reference

Inflearn : 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React)