TECH@NAVER 모바일웹Ui개발 저자세미나 1부

1. JMC 를 이용한 고성능 애니메이션 구현하기

2. 2 / JMC 고성능 애니메이션 구현하기
모바일 웹에서 성능이란?
페이지 로딩 속도
사용자 터치 반응 속도
브라우저 랜더링 속도
부드러운 애니메이션 동작

3. 목차
1. 브라우저 랜더링 과정 이해하기
2. 부드러운 애니메이션 구현하기
3. Q & A

4. 1. 브라우저 랜더링 과정 이해하기

5. 5 / JMC 고성능 애니메이션 구현하기
1. 브라우저 랜더링 과정 이해하기
계산
반영
Render
Layer
대상 추출

6. 6 / JMC 고성능 애니메이션 구현하기
1. 브라우저 랜더링 과정 이해하기
div (DOM2)
div (DOM1)
div (DOM3)
div (DOM4)
div (DOM5)
div (DOM6)
body
html
DOM Tree

7. 7 / JMC 고성능 애니메이션 구현하기
1. 브라우저 랜더링 과정 이해하기
div (DOM2)
div (DOM1)
div (DOM3)
div (DOM4)
div (DOM5)
div (DOM6)
body
html
div (DOM2)
div (DOM1)
div (DOM3)
div (DOM4)
div (DOM6)
body
html
DOM Tree
Render Tree
RenderTree는 화면에 보여지는 영역을 기준으로 구성

8. 8 / JMC 고성능 애니메이션 구현하기
1. 브라우저 랜더링 과정 이해하기
div (DOM2)
div (DOM1)
div (DOM3)
div (DOM4)
div (DOM6)
body
html
Render Tree
div (DOM4)
RenderLayer Tree
Div(DOM4는 transform 3d)로 레이어가 구성되는 영역
div (DOM4)
GraphicLayer Tree

9. 9 / JMC 고성능 애니메이션 구현하기
1. 브라우저 랜더링 과정 이해하기
크롬의 Timeline으로 본 브라우저 랜더링 과정
Recalculate Style : 엘리먼트에 스타일이 적용될 때 발생
Composite Layers : 변경되지 않는 각각의 RenderLayer를 합성할 때 발생

10. 2. 부드러운 애니메이션 구현하기

11. 11 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
1) 애니메이션 구현 방식의 선택 (Timer VS CSS3 방식)
2) Composite Layer 활용
3) 하드웨어 가속의 활용

12. 12 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
A. Timer 방식 : setTimeout, setInterval 을 이용한 방식
0초
1초
2초
1초 간격
1초 간격
16.666ms 간격이면?
60FPS
1) 애니메이션 구현 방식의 선택

13. 13 / JMC 고성능 애니메이션 구현하기
B. CSS3 방식 : transition을 이용한 방식. 브라우저가 60FPS를 보장함 브라우저의 UI Thread를 사용하지 않아 간섭이 없음
CSS3 Animation도 구현 방식은 달라도 작동 방식은 동일함
Transition 설정
transitionEnd 이벤트 발생
2. 부드러운 애니메이션 구현하기
1) 애니메이션 구현 방식의 선택

14. 14 / JMC 고성능 애니메이션 구현하기
Timer 방식
CSS3 방식
60FPS 보장
간섭에 영향을 받지 않음
다양한 이동곡선 구현
범용적으로 적용
requestAnimationFrame
방식은 60FPS 보장
성능 위주
다양한 효과, 안전성 위주
2. 부드러운 애니메이션 구현하기
1) 애니메이션 구현 방식의 선택

15. 15 / JMC 고성능 애니메이션 구현하기
window.requestAnimationFrame(fnCallback)
jindo.m.useTimingFunction ()
2. 부드러운 애니메이션 구현하기
1) 애니메이션 구현 방식의 선택
JMC의 활용

16. 16 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
1) 애니메이션 구현 방식의 선택 (Timer VS CSS3 방식)
2) Composite Layer 활용
3) 하드웨어 가속의 활용

17. 17 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
2) Composite Layer 활용
애니메이션되는 동안 실제 변경되는 부분은 이동하는 물체의 주변만 변경

18. 18 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
2) Composite Layer 활용
Composite Layer 는 레이어 병합(composite)을 통해
새로운 화면을 구성하여 실제 화면에 출력하는 기능을 한다.
Shape layer
back layer
모든 페이지는 Root layer를 가진다. (링크)
3d, perspective transform, CSS Animation, CSS filter를 사용하는 경우 (링크)
VIDEO, CANVAS 태그를 사용하는 경우
Flash나 ActiveX를 사용하는 경우
자식 엘리먼트가 layer로 구성되어 있을 경우
z-index가 낮은 형제 엘리먼트가 layer로 구성되어 있을 경우, 대상 엘리먼트도 layer로 구성됨

19. 19 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
2) Composite Layer 활용
애니메이션 1 frame의 랜더링 과정
비용이 큰 Layout 작업

20. 20 / JMC 고성능 애니메이션 구현하기
Reflows are very expensive in terms of performance, and is one of the main causes of slow
DOM scripts, especially on devices with low processing power, such as phones.In many cases, they are equivalent to laying out the entire page again.
~~~~~
~~~~~
~~~~~~~
~~~~~~~
~~~~ ~~
~~~~ ~~
Layout 변경
Reflow 발생
2. 부드러운 애니메이션 구현하기
2) Composite Layer 활용

21. 21 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
2) Composite Layer 활용
비용이 큰 Layout과 불필요한 paint를 제거하라~!
애니메이션 1 frame의 랜더링 과정
Composite layers 작업에 영향을 미치는 요소만 처리 하는 게 가장 효과적

22. 22 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
A. Layout 변경을 유발하는 속성
2) Composite Layer 활용

23. 23 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
B. Paint 변경을 유발하는 속성
2) Composite Layer 활용

24. 24 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
C. Composite Layers 를 유발하는 속성
2) Composite Layer 활용
transform - translate(3d) - sale(3d) - rotate(3d) - …
opacity

25. 25 / JMC 고성능 애니메이션 구현하기
Left, top, right, bottom 변경 안하면….
어떻게 애니메이션을 구현하라는 거지?
2. 부드러운 애니메이션 구현하기
2) Composite Layer 활용

26. 26 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
style 대신 transform과 opacity를 사용하세요.
위치 변경
크기 변경
display 변경
transform : translate(nPx,nPx); transform : translate3d(nPx,nPx,nPx);
transform : translateX(nPx);
transform : translateY(nPx);
transform : translateZ(nPx);
transform : scale(n)
opacity : 0 … 1
2) Composite Layer 활용
회전
transform : rotate(ndeg)

27. 27 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
2) Composite Layer 활용

28. 28 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
1) 애니메이션 구현 방식의 선택 (Timer VS CSS3 방식)
2) Composite Layer 활용
3) 하드웨어 가속의 활용

29. 29 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
3) 하드웨어 가속 활용
OpenGL
texture
texture
texture
GraphicLayers
RenderLayers
Video Memory
CPU
GPU

30. 30 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
3) 하드웨어 가속 활용
하드웨어 가속은 다음과 같은 속성을 사용할 경우 적용된다.
TRANSFORM 3D
•-webkit-transform : translate3d(n,n,n)
•-webkit-transform : translateZ(n)
•-webkit-transform : rotateX(angle)
•-webkit-transform : rotateY(angle)
•-webkit-transform : rotate3d(n,n,n,angle)
•-webkit-transform : scaleZ(n)
•-webkit-transform : scale3d(n,n,n)
•-webkit-transform : perspective(n)
opacity …

31. 31 / JMC 고성능 애니메이션 구현하기
2. 부드러운 애니메이션 구현하기
3) 하드웨어 가속 활용
iOS, Android 4.0, 4.1~
Android ~2.x
Android 3.x, 4.x

32. 32 / JMC 고성능 애니메이션 구현하기
jindo.m.useCss3d()
2. 부드러운 애니메이션 구현하기
JMC의 활용
3) 하드웨어 가속 활용

33. 33 / JMC 고성능 애니메이션 구현하기
데모 – 애니메이션 화면 튜닝하기
2. 부드러운 애니메이션 구현하기
Step1. layout 변경이 되는 요소를 transform이나 opacity로 변경한다.
Step2. 하드웨어 가속을 적용하여 각 box를 Layer로 구성한다.
Step3. 적합한 애니메이션 구현 방법을 결정하여 적용한다.

34. Q & A
Email : sculove@gmail.com
Blog : http://sculove.pe.kr
Linked : http://me2.do/G7dQOWOy

35. 감사합니다