[c3]collie deview2012

43

Upload: naver-d2

Post on 27-Jun-2015

5.572 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: [C3]collie deview2012
Page 2: [C3]collie deview2012

식사����������� ������������������  후����������� ������������������  졸릴����������� ������������������  수����������� ������������������  있으니����������� ������������������  데모부터����������� ������������������  가겠습니다.����������� ������������������  

CAUTION����������� ������������������  

Page 3: [C3]collie deview2012

http://me2.do/FFflkMj����������� ������������������  대소문자를����������� ������������������  구분해야����������� ������������������  합니다����������� ������������������  

알파벳����������� ������������������  소문자����������� ������������������  L����������� ������������������  

Page 4: [C3]collie deview2012

애니메이션은����������� ������������������  무엇일까?����������� ������������������  

Page 5: [C3]collie deview2012

역전!야매요리����������� ������������������  

twitter����������� ������������������  @yameyori����������� ������������������  e-mail����������� ������������������  [email protected]����������� ������������������  webtoon����������� ������������������  

정다정����������� ������������������  작가님����������� ������������������  

Page 6: [C3]collie deview2012

애니메이션은����������� ������������������  연속된����������� ������������������  장면을����������� ������������������  화면에����������� ������������������  빠르게����������� ������������������  표시해����������� ������������������  움직임을����������� ������������������  나타낸다����������� ������������������  

Page 7: [C3]collie deview2012

이미지를����������� ������������������  화면에����������� ������������������  표시하는����������� ������������������  적절한����������� ������������������  방법은����������� ������������������  DOM과����������� ������������������  HTML5����������� ������������������  캔버스가����������� ������������������  있다����������� ������������������  

<img  src="image.png"  alt="이미지"  />����������� ������������������  

Page 8: [C3]collie deview2012

캔버스는����������� ������������������  DOM과는����������� ������������������  달리����������� ������������������  객체����������� ������������������  별로����������� ������������������  다루기가����������� ������������������  힘들다����������� ������������������  

<canvas  id="canvas"></canvas>  

Page 9: [C3]collie deview2012

따라서����������� ������������������  이미지를����������� ������������������  캔버스에����������� ������������������  그리기����������� ������������������  전에����������� ������������������  영역����������� ������������������  등의����������� ������������������  정보를����������� ������������������  별도로����������� ������������������  관리해야����������� ������������������  한다����������� ������������������  ����������� ������������������  

var  o  =  new  Yame();  o.age  =  32/2*Math.sin(1)+13;  o.height  =  "160cm";  o.weight  =  undefined;  o.cooking  =  false;  o.defense  =  "backside";  ...    

Page 10: [C3]collie deview2012

그리는����������� ������������������  과정은����������� ������������������  어떨까?����������� ������������������  

그리기����������� ������������������  

틱����������� ������������������  16ms����������� ������������������  

Page 11: [C3]collie deview2012

단일화된����������� ������������������  렌더링����������� ������������������  파이프라인을����������� ������������������  이용해����������� ������������������  초당����������� ������������������  60번����������� ������������������  등록된����������� ������������������  객체를����������� ������������������  그린다����������� ������������������  ����������� ������������������  

function  draw()  {          //  지우기          ctx.clearRect(0,  0,  ctx.canvas.width,  ctx.canvas.height);            //  등록된����������� ������������������  객체를����������� ������������������  그리기          for  (var  i  =  0;  i  <  list.length;  i++)  {                  list[i].drawEachObject();          }  };    //  초당����������� ������������������  60번����������� ������������������  반복  setInterval(draw,  1000  /  60);    

Page 12: [C3]collie deview2012

눈에����������� ������������������  보이지는����������� ������������������  않지만����������� ������������������  화면을����������� ������������������  매번����������� ������������������  다시����������� ������������������  그린다����������� ������������������  

draw����������� ������������������   draw����������� ������������������   draw����������� ������������������   draw����������� ������������������   draw����������� ������������������  

초당����������� ������������������  60번����������� ������������������  반복한다����������� ������������������  

Page 13: [C3]collie deview2012

requestAnimationFrame을����������� ������������������  사용하면����������� ������������������  좀����������� ������������������  더����������� ������������������  자연스러운����������� ������������������  애니메이션이����������� ������������������  된다����������� ������������������  

모바일에서는����������� ������������������  iOS6부터����������� ������������������  사용����������� ������������������  가능����������� ������������������  

function  draw()  {          requestAnimationFrame(draw);          //  ...  }    requestAnimationFrame(draw);  

Page 14: [C3]collie deview2012

움직이는����������� ������������������  동작은����������� ������������������  스프라이트를����������� ������������������  이용한다����������� ������������������  

Page 15: [C3]collie deview2012

캔버스에서는����������� ������������������  drawImage를����������� ������������������  이용해����������� ������������������  간단하게����������� ������������������  구현할����������� ������������������  수����������� ������������������  있다����������� ������������������  

var  ctx  =  elCanvas.getContext("2d");  ctx.drawImage(대상이미지,  원본x,  원본y,  원본너비,  원본높이,  대상x,  대상y,  대상너비,  대상높이);  

원본����������� ������������������  x,y,width,height����������� ������������������  

drawImage����������� ������������������  

대상����������� ������������������  x,y,width,height����������� ������������������  

Page 16: [C3]collie deview2012

원본과����������� ������������������  대상의����������� ������������������  크기가����������� ������������������  다르면����������� ������������������  픽셀����������� ������������������  조작으로����������� ������������������  인해����������� ������������������  iOS4에서����������� ������������������  느려진다����������� ������������������  

원본����������� ������������������  너비����������� ������������������  100����������� ������������������  

drawImage����������� ������������������  

대상����������� ������������������  너비����������� ������������������  200����������� ������������������  

var  ctx  =  elCanvas.getContext("2d");  ctx.drawImage(elImg,  0,  0,  100,  100,  0,  0,  200,  100);  

Page 17: [C3]collie deview2012

캔버스로����������� ������������������  만든����������� ������������������  애니메이션����������� ������������������  데모����������� ������������������  

iOS5����������� ������������������  

Page 18: [C3]collie deview2012

똑같은����������� ������������������  데모를����������� ������������������  iOS4가����������� ������������������  설치된����������� ������������������  똑같은����������� ������������������  기기에서����������� ������������������  실행����������� ������������������  

iOS4����������� ������������������  

Page 19: [C3]collie deview2012

?!?!?!����������� ������������������  

Page 20: [C3]collie deview2012

빠른����������� ������������������  애니메이션을����������� ������������������  위해서는����������� ������������������  하드웨어����������� ������������������  가속이����������� ������������������  필수����������� ������������������  

iOS5의����������� ������������������  사파리����������� ������������������  부터����������� ������������������  캔버스����������� ������������������  하드웨어����������� ������������������  가속����������� ������������������  지원����������� ������������������  

빠름!����������� ������������������  

빠름!����������� ������������������  

빠름!����������� ������������������  

Page 21: [C3]collie deview2012

CSS3����������� ������������������  3D����������� ������������������  Transforms를����������� ������������������  이용하면����������� ������������������  iOS4에서도����������� ������������������  하드웨어����������� ������������������  가속이����������� ������������������  가능����������� ������������������  

안드로이드����������� ������������������  4.0����������� ������������������  이상에서도����������� ������������������  하드웨어����������� ������������������  가속����������� ������������������  지원����������� ������������������  

.displayObject  {  -­‐webkit-­‐transform:translate3d(x,y,z)  scale3d(x,  y,  z)    rotateZ(deg);  -­‐wekit-­‐transform-­‐origin:0  0;  -­‐webkit-­‐transform-­‐style:preserve-­‐3d;  }  

Page 22: [C3]collie deview2012

다른����������� ������������������  CSS속성이����������� ������������������  같이����������� ������������������  변경되면����������� ������������������  애니메이션����������� ������������������  속도가����������� ������������������  느리다����������� ������������������  background-position과����������� ������������������  같은����������� ������������������  속성을����������� ������������������  사용할����������� ������������������  수����������� ������������������  없다����������� ������������������  따라서����������� ������������������  3D속성만����������� ������������������  사용할����������� ������������������  수����������� ������������������  있도록����������� ������������������  구조를����������� ������������������  만든다����������� ������������������  

DIV(overflow:hidden)����������� ������������������  IMG(position:absolute)����������� ������������������  

Page 23: [C3]collie deview2012

CSS3����������� ������������������  3D����������� ������������������  Transforms를����������� ������������������  사용한����������� ������������������  데모����������� ������������������  

iOS4����������� ������������������  

Page 24: [C3]collie deview2012

끝?����������� ������������������  

Page 25: [C3]collie deview2012
Page 26: [C3]collie deview2012

기기����������� ������������������  별로����������� ������������������  다른����������� ������������������  대응을����������� ������������������  해야����������� ������������������  한다����������� ������������������  

안드로이드����������� ������������������  4.0����������� ������������������  미만은����������� ������������������  하드웨어����������� ������������������  가속을����������� ������������������  받을����������� ������������������  수����������� ������������������  없다����������� ������������������  

기기/OS����������� ������������������  iPhone����������� ������������������  3GS����������� ������������������  

iPhone����������� ������������������  4����������� ������������������  

iPhone����������� ������������������  4S����������� ������������������  

Android����������� ������������������  3����������� ������������������  미만����������� ������������������  

Android����������� ������������������  3����������� ������������������  이상����������� ������������������  

렌더링����������� ������������������  방식����������� ������������������  

CSS3D����������� ������������������  

CSS3D����������� ������������������  (iOS4����������� ������������������  이하)����������� ������������������  

Canvas����������� ������������������  Canvas����������� ������������������  or����������� ������������������  DOM����������� ������������������  

CSS3D����������� ������������������  Canvas����������� ������������������  

(iOS5����������� ������������������  이상)����������� ������������������  

Page 27: [C3]collie deview2012

안드로이드����������� ������������������  4.0도����������� ������������������  문제가����������� ������������������  있다����������� ������������������  

-  한����������� ������������������  면이����������� ������������������  2048픽셀을����������� ������������������  넘어가는����������� ������������������  이미지를����������� ������������������  사용하면����������� ������������������  화면에����������� ������������������  검정색으로����������� ������������������  표시����������� ������������������  된다.����������� ������������������  

-  회전을����������� ������������������  하게����������� ������������������  되면����������� ������������������  overflow:hidden����������� ������������������  영역의����������� ������������������  크기가����������� ������������������  바뀐다.����������� ������������������  

Page 28: [C3]collie deview2012

"10만원대����������� ������������������  갤럭시S3����������� ������������������  놓칠라"����������� ������������������  대

리점����������� ������������������  폭주����������� ������������������  

갤S3����������� ������������������  공짜폰에����������� ������������������  유통����������� ������������������  대란...����������� ������������������  "전산����������� ������������������  마비"����������� ������������������  

"갤럭시S3����������� ������������������  17만원����������� ������������������  판

매"����������� ������������������  일파만파����������� ������������������  

to.����������� ������������������  안드로이드����������� ������������������  2.X����������� ������������������  사용자����������� ������������������  분들께����������� ������������������  ����������� ������������������  ����������� ������������������  

����������� ������������������  바꿔주세요.����������� ������������������  제발...����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  from.����������� ������������������  익명의����������� ������������������  개발자����������� ������������������  

Page 29: [C3]collie deview2012

이렇게����������� ������������������  어려운����������� ������������������  상황이지만����������� ������������������  방법은����������� ������������������  있다����������� ������������������  

Page 30: [C3]collie deview2012

Collie����������� ������������������  

Page 31: [C3]collie deview2012
Page 32: [C3]collie deview2012

콜리는����������� ������������������  18종����������� ������������������  이상의����������� ������������������  모바일����������� ������������������  기기에����������� ������������������  대응하는����������� ������������������  모바일에����������� ������������������  최적화된����������� ������������������  라이브러리����������� ������������������  ����������� ������������������  

Page 33: [C3]collie deview2012

더����������� ������������������  빠른����������� ������������������  방식으로����������� ������������������  렌더링����������� ������������������  한다����������� ������������������  

Page 34: [C3]collie deview2012

이벤트����������� ������������������  모델이����������� ������������������  다르기����������� ������������������  때문에����������� ������������������  캔버스에도����������� ������������������  버블링을����������� ������������������  구현����������� ������������������  ����������� ������������������  

<div>          <img  />  </div>  

var  layer  =  new  collie.Layer();  var  parent  =  new  collie.DisplayObject();  var  child  =  new  collie.DisplayObject();  parent.addTo(layer);  child.addTo(parent);  

img����������� ������������������  

div����������� ������������������  

body����������� ������������������  

child����������� ������������������  

parent����������� ������������������  

layer����������� ������������������  

Page 35: [C3]collie deview2012

캔버스와����������� ������������������  DOM에서����������� ������������������  보다����������� ������������������  정밀한����������� ������������������  이벤트����������� ������������������  영역을����������� ������������������  찾기����������� ������������������  위해����������� ������������������  hitArea����������� ������������������  적용����������� ������������������  

-  PNPOLY����������� ������������������  알고리즘을����������� ������������������  이용해����������� ������������������  캔버스의����������� ������������������  getImageData����������� ������������������  보다����������� ������������������  빠르게����������� ������������������  영역����������� ������������������  확인����������� ������������������  가능����������� ������������������  

-  외부����������� ������������������  도메인의����������� ������������������  이미지일����������� ������������������  경우����������� ������������������  getImageData����������� ������������������  사용����������� ������������������  불가능����������� ������������������  

[[126,  285],[104,  286],[101,  267],[105,  221],[101,  213],[88,  188],[85,  168],[81,  153],[94,  133],[97,  103],[94,  60],[95,  29],[103,  32],[109,  97],[143,  93],[147,  33],[151,  31],[152,  97],[161,  137],[166,  167],[165,  188],[169,  200],[165,  208],[160,  209],[159,  235],[159,  256],[159,  269],[162,  275],[162,  286],[138,  288],[130,  275],[132,  254]]  

Page 36: [C3]collie deview2012

비동기����������� ������������������  이미지����������� ������������������  로딩의����������� ������������������  불편함을����������� ������������������  해소하는����������� ������������������  ImageManager����������� ������������������  제공����������� ������������������  

A����������� ������������������  로딩����������� ������������������   이미지����������� ������������������  로딩����������� ������������������  끝����������� ������������������  

A����������� ������������������  사용����������� ������������������   실제����������� ������������������  A����������� ������������������  이미지를����������� ������������������  적용����������� ������������������  

Page 37: [C3]collie deview2012

많은����������� ������������������  수의����������� ������������������  객체를����������� ������������������  다루기����������� ������������������  위해����������� ������������������  타일����������� ������������������  캐시����������� ������������������  기능����������� ������������������  제공����������� ������������������  

캔버스����������� ������������������   캔버스����������� ������������������  

체스판과����������� ������������������  같은����������� ������������������  정적인����������� ������������������  타일����������� ������������������  맵을����������� ������������������  만들����������� ������������������  때����������� ������������������  유리����������� ������������������  

Page 38: [C3]collie deview2012

간단하게����������� ������������������  고해상도����������� ������������������  디스플레이����������� ������������������  지원����������� ������������������  

성능����������� ������������������  문제로����������� ������������������  인해����������� ������������������  아이폰����������� ������������������  레티나만����������� ������������������  지원����������� ������������������  

var  isRetina  =  collie.Renderer.isRetinaDisplay();  collie.ImageManager.addImages({          yame  :  (isRetina  ?  "large"  :  "small")  +                        "/yame.png"  });  

a����������� ������������������  

Page 39: [C3]collie deview2012

개별����������� ������������������  편의성����������� ������������������  제공����������� ������������������  

처음에����������� ������������������  나온����������� ������������������  토끼가����������� ������������������  움직이는����������� ������������������  애니메이션����������� ������������������  구현����������� ������������������  예제����������� ������������������  

collie.ImageManager.addImages({  yame  :  "img/yame.png"  });    var  layer  =  new  collie.Layer({  width  :  320,  height  :  480  });  var  yame  =  new  collie.DisplayObject({          width  :  100,          height  :  180,          backgroundImage  :  "yame"  }).addTo(layer);    collie.Timer.cycle(yame,  1000,  {  to  :  7  });  yame.move(200,  0,  100);    collie.Renderer.addLayer(layer);  collie.Renderer.load(document.getElementById("t");  collie.Renderer.start();  

Page 40: [C3]collie deview2012

오픈소스����������� ������������������  LGPL����������� ������������������  v2.1����������� ������������������  

Page 41: [C3]collie deview2012

http://jindo.dev.naver.com/collie����������� ������������������  http://dev.naver.com����������� ������������������  에서도����������� ������������������  찾을����������� ������������������  수����������� ������������������  있습니다.����������� ������������������  

Page 42: [C3]collie deview2012
Page 43: [C3]collie deview2012