믹아의 개발일기

애니메이션 공부하면서 알게된 내용 정리

웹 브라우저는 위의 이미지와 같은 로딩, 렌더링 순서를 거친다.

이 중 Layout, Paint, Composite 단계에 주목하자

3. Layout

브라우저에서 엘리먼트의 도형, 위치를 생성한다.

대표적인 속성값으로 width, height, margin, padding, left,top,rigth,bottom 등이 있다

4. Paint

각 엘리멘트의 픽셀을 채운다.

box-shadow, border-radius, color, background-color 등이 있다.

5. Composite

화면에 모든 레이어를 그리기 시작한다.

transform, opacity 가 있다.

여기서 만약 width, height 등의 값 (Layout 에 해당하는 속성 값)을 애니메이션으로 변경하게 된다면

Layout -> Paint -> Composite 단계를 다시 거쳐야한다.

이것을 Reflow 라고 한다

그럼 background-color 등을 변경하하면 

Paint -> Composite 를 걸치는데

이것을 Repaint 라고 한다

즉 애니메이션을 줄거면 최대한 Composite 단계에서 하는게 성능상으로 좋다.

참고

canvas 를 사용중인데 그리기용 캔버스랑 보여주기용 캔버스 2개를 겹쳐서 사용하고 있었다.

그래서 그리기용 캔버스가 앞에 있어야 마우스 클릭이 돼서 그릴 수 있었는데 그러다보니 

보여주기 캔버스가 그리기용 그림에 덮여버리는 현상이 있었다. js 코드를 어떻게 바꾸면 되긴 되겠지만.. 귀찮아서

다른 방법을 찾아봤다.

<canvas id="realtimeCanvas" style="position: absolute;"></canvas>
<canvas id="canvas" style="position: absolute;"></canvas>

canvas 가 클릭, 그리기용 이었고, realtimeCanvas 가 실시간으로 계속 변경되는 캔버스였다.

그런데 realtimeCanvas 가 자꾸 뒤에 그려지다 보니 

<canvas id="canvas" style="position: absolute;"></canvas>
<canvas id="realtimeCanvas" style="position: absolute;"></canvas>

순서를 바꾸니깐 canvas 에 걸어둔 클릭 이벤트가 안되더라..

그래서 찾은게

pointer-events: none;

CSS 에 적어도 좋고

<canvas id="canvas" style="position: absolute;"></canvas>
<canvas id="realtimeCanvas" style="pointer-events: none; position: absolute;"></canvas>

나는 캔버스 쪽은 그냥 간단하게 이렇게 적었다.

구글 크롬에서만 작동 확인..

a 태그에 하이퍼링크를 달았을 때

기본값은 파란색(#0000EE) , 한번 누른적이 있다면 보라색(#551A8B)으로 뜬다.

기본값을 바꿔보자.

/* style.css */

:link { color: #0000EE; }
:visited { color: #551A8B; }

link 가 링크 방문전 색이고, visited 가 방문한 적이 있는 링크다.

Google Chrome 에서 동작

비디오 태그에 controls 라는 옵션을 주면

밑에 비디오를 컨트롤하는 UI가 띄워진다.

근데 내가 필요 없는, 숨겨야 하는 버튼이 있는 경우 숨길 수 있다. (전체화면, 재생 등)

<video controls> </video>

/* style.css */

/* 숨기려는 버튼을 골라서 쓰자 */

/* 전체화면 버튼 */
video::-webkit-media-controls-fullscreen-button {}

/* 일시정지, 재생 버튼 */
video::-webkit-media-controls-play-button {}

/* 재생 슬라이드..? */
video::-webkit-media-controls-timeline {}

/* 현재 진행 시간 */
video::-webkit-media-controls-current-time-display{}

/* 전체 시간 */
video::-webkit-media-controls-time-remaining-display {}

/* 음소거 버튼 */
video::-webkit-media-controls-mute-button {}

/* 볼륨 조절 슬라이드 */
video::-webkit-media-controls-volume-slider {}

/* 괄호에 display: none !important; 를 추가하면된다.
 예 ) 전체화면 전환 버튼을 숨긴다. 
 다만 더블클릭으로 전체화면이 되는 기능등은 그대로고 단지 버튼만 없앤다. */

video::-webkit-media-controls-fullscreen-button {
	display: none !important;
}