Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

9,852 views

Published on

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

Published in: Technology
  • Sex in your area is here: ♥♥♥ http://bit.ly/36cXjBY ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/36cXjBY ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ..............ACCESS that WEBSITE Over for All Ebooks ................ ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. JMC 를 이용한 고성능 애니메이션 구현하기
  2. 2. 2 / JMC 고성능 애니메이션 구현하기 모바일 웹에서 성능이란? 페이지 로딩 속도 사용자 터치 반응 속도 브라우저 랜더링 속도 부드러운 애니메이션 동작
  3. 3. 목차 1. 브라우저 랜더링 과정 이해하기 2. 부드러운 애니메이션 구현하기 3. Q & A
  4. 4. 1. 브라우저 랜더링 과정 이해하기
  5. 5. 5 / JMC 고성능 애니메이션 구현하기 1. 브라우저 랜더링 과정 이해하기 계산 반영 Render Layer 대상 추출
  6. 6. 6 / JMC 고성능 애니메이션 구현하기 1. 브라우저 랜더링 과정 이해하기 div (DOM2) div (DOM1) div (DOM3) div (DOM4) div (DOM5) div (DOM6) body html DOM Tree
  7. 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. 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. 9 / JMC 고성능 애니메이션 구현하기 1. 브라우저 랜더링 과정 이해하기 크롬의 Timeline으로 본 브라우저 랜더링 과정 Recalculate Style : 엘리먼트에 스타일이 적용될 때 발생 Composite Layers : 변경되지 않는 각각의 RenderLayer를 합성할 때 발생
  10. 10. 2. 부드러운 애니메이션 구현하기
  11. 11. 11 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 1) 애니메이션 구현 방식의 선택 (Timer VS CSS3 방식) 2) Composite Layer 활용 3) 하드웨어 가속의 활용
  12. 12. 12 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 A. Timer 방식 : setTimeout, setInterval 을 이용한 방식 0초 1초 2초 1초 간격 1초 간격 16.666ms 간격이면? 60FPS 1) 애니메이션 구현 방식의 선택
  13. 13. 13 / JMC 고성능 애니메이션 구현하기 B. CSS3 방식 : transition을 이용한 방식. 브라우저가 60FPS를 보장함 브라우저의 UI Thread를 사용하지 않아 간섭이 없음 CSS3 Animation도 구현 방식은 달라도 작동 방식은 동일함 Transition 설정 transitionEnd 이벤트 발생 2. 부드러운 애니메이션 구현하기 1) 애니메이션 구현 방식의 선택
  14. 14. 14 / JMC 고성능 애니메이션 구현하기 Timer 방식 CSS3 방식 60FPS 보장 간섭에 영향을 받지 않음 다양한 이동곡선 구현 범용적으로 적용 requestAnimationFrame 방식은 60FPS 보장 성능 위주 다양한 효과, 안전성 위주 2. 부드러운 애니메이션 구현하기 1) 애니메이션 구현 방식의 선택
  15. 15. 15 / JMC 고성능 애니메이션 구현하기 window.requestAnimationFrame(fnCallback) jindo.m.useTimingFunction () 2. 부드러운 애니메이션 구현하기 1) 애니메이션 구현 방식의 선택 JMC의 활용
  16. 16. 16 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 1) 애니메이션 구현 방식의 선택 (Timer VS CSS3 방식) 2) Composite Layer 활용 3) 하드웨어 가속의 활용
  17. 17. 17 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 2) Composite Layer 활용 애니메이션되는 동안 실제 변경되는 부분은 이동하는 물체의 주변만 변경
  18. 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. 19 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 2) Composite Layer 활용 애니메이션 1 frame의 랜더링 과정 비용이 큰 Layout 작업
  20. 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. 21 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 2) Composite Layer 활용 비용이 큰 Layout과 불필요한 paint를 제거하라~! 애니메이션 1 frame의 랜더링 과정 Composite layers 작업에 영향을 미치는 요소만 처리 하는 게 가장 효과적
  22. 22. 22 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 A. Layout 변경을 유발하는 속성 2) Composite Layer 활용
  23. 23. 23 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 B. Paint 변경을 유발하는 속성 2) Composite Layer 활용
  24. 24. 24 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 C. Composite Layers 를 유발하는 속성 2) Composite Layer 활용 transform - translate(3d) - sale(3d) - rotate(3d) - … opacity
  25. 25. 25 / JMC 고성능 애니메이션 구현하기 Left, top, right, bottom 변경 안하면…. 어떻게 애니메이션을 구현하라는 거지? 2. 부드러운 애니메이션 구현하기 2) Composite Layer 활용
  26. 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. 27 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 2) Composite Layer 활용
  28. 28. 28 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 1) 애니메이션 구현 방식의 선택 (Timer VS CSS3 방식) 2) Composite Layer 활용 3) 하드웨어 가속의 활용
  29. 29. 29 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 3) 하드웨어 가속 활용 OpenGL texture texture texture GraphicLayers RenderLayers Video Memory CPU GPU
  30. 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. 31 / JMC 고성능 애니메이션 구현하기 2. 부드러운 애니메이션 구현하기 3) 하드웨어 가속 활용 iOS, Android 4.0, 4.1~ Android ~2.x Android 3.x, 4.x
  32. 32. 32 / JMC 고성능 애니메이션 구현하기 jindo.m.useCss3d() 2. 부드러운 애니메이션 구현하기 JMC의 활용 3) 하드웨어 가속 활용
  33. 33. 33 / JMC 고성능 애니메이션 구현하기 데모 – 애니메이션 화면 튜닝하기 2. 부드러운 애니메이션 구현하기 Step1. layout 변경이 되는 요소를 transform이나 opacity로 변경한다. Step2. 하드웨어 가속을 적용하여 각 box를 Layer로 구성한다. Step3. 적합한 애니메이션 구현 방법을 결정하여 적용한다.
  34. 34. Q & A Email : sculove@gmail.com Blog : http://sculove.pe.kr Linked : http://me2.do/G7dQOWOy
  35. 35. 감사합니다

×