애니메이션 최적화

문제의 애니메이션 찾기

Untitled

설문 결과 영역에서 설문 항목을 클릭하면 해당 응답에 대해 필터링 되고 막대 그래프의 배경 색과 막대의 가로 길이가 변함.
그런데, 애니메이션에서 가로 막대가 늘어날 때 부드럽게 늘어나지 않고 살짝 끊기는 듯한 느낌이 듬
Performance 패널의 CPU 설정을 6x slowdown으로 설정하면 애니메이션이 끊기는 현상을 더 자 확인할 수 있음

Untitled

이런 **끊김 현상을 쟁크(jank)**라고 함
쟁크 현상은 왜 발생하는걸까?
애니메이션을 일으키는 속성은 transition이 적용된 width 속성뿐임

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;
`

이 문제에 답하려면 먼저 브라우저에서 애니메이션이 어떻게 동작하는지, 그리고 브라우저는 어떤 과정을 거쳐 화면을 그리는지 이해할 필요가 있음

애니메이션의 원리

애니메이션의 원리는 여러 장의 이미지를 빠르게 전환하여 우리 눈에 잔상을 남기고, 그로 인해 연속된 이미지가 움직이는 것처럼 느껴지게 하는 것임

Untitled

그런데 만약 이 애니메이션에서 한장의 이미지가 빠져 버리면 어떻게 될까?

Untitled