Download - [C3]collie deview2012
식사����������� ������������������ 후����������� ������������������ 졸릴����������� ������������������ 수����������� ������������������ 있으니����������� ������������������ 데모부터����������� ������������������ 가겠습니다.����������� ������������������
CAUTION����������� ������������������
http://me2.do/FFflkMj����������� ������������������ 대소문자를����������� ������������������ 구분해야����������� ������������������ 합니다����������� ������������������
알파벳����������� ������������������ 소문자����������� ������������������ L����������� ������������������
애니메이션은����������� ������������������ 무엇일까?����������� ������������������
역전!야매요리����������� ������������������
twitter����������� ������������������ @yameyori����������� ������������������ e-mail����������� ������������������ [email protected]����������� ������������������ webtoon����������� ������������������
정다정����������� ������������������ 작가님����������� ������������������
애니메이션은����������� ������������������ 연속된����������� ������������������ 장면을����������� ������������������ 화면에����������� ������������������ 빠르게����������� ������������������ 표시해����������� ������������������ 움직임을����������� ������������������ 나타낸다����������� ������������������
이미지를����������� ������������������ 화면에����������� ������������������ 표시하는����������� ������������������ 적절한����������� ������������������ 방법은����������� ������������������ DOM과����������� ������������������ HTML5����������� ������������������ 캔버스가����������� ������������������ 있다����������� ������������������
<img src="image.png" alt="이미지" />����������� ������������������
캔버스는����������� ������������������ DOM과는����������� ������������������ 달리����������� ������������������ 객체����������� ������������������ 별로����������� ������������������ 다루기가����������� ������������������ 힘들다����������� ������������������
<canvas id="canvas"></canvas>
따라서����������� ������������������ 이미지를����������� ������������������ 캔버스에����������� ������������������ 그리기����������� ������������������ 전에����������� ������������������ 영역����������� ������������������ 등의����������� ������������������ 정보를����������� ������������������ 별도로����������� ������������������ 관리해야����������� ������������������ 한다����������� ������������������ ����������� ������������������
var o = new Yame(); o.age = 32/2*Math.sin(1)+13; o.height = "160cm"; o.weight = undefined; o.cooking = false; o.defense = "backside"; ...
그리는����������� ������������������ 과정은����������� ������������������ 어떨까?����������� ������������������
그리기����������� ������������������
틱����������� ������������������ 16ms����������� ������������������
단일화된����������� ������������������ 렌더링����������� ������������������ 파이프라인을����������� ������������������ 이용해����������� ������������������ 초당����������� ������������������ 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);
눈에����������� ������������������ 보이지는����������� ������������������ 않지만����������� ������������������ 화면을����������� ������������������ 매번����������� ������������������ 다시����������� ������������������ 그린다����������� ������������������
draw����������� ������������������ draw����������� ������������������ draw����������� ������������������ draw����������� ������������������ draw����������� ������������������
초당����������� ������������������ 60번����������� ������������������ 반복한다����������� ������������������
requestAnimationFrame을����������� ������������������ 사용하면����������� ������������������ 좀����������� ������������������ 더����������� ������������������ 자연스러운����������� ������������������ 애니메이션이����������� ������������������ 된다����������� ������������������
모바일에서는����������� ������������������ iOS6부터����������� ������������������ 사용����������� ������������������ 가능����������� ������������������
function draw() { requestAnimationFrame(draw); // ... } requestAnimationFrame(draw);
움직이는����������� ������������������ 동작은����������� ������������������ 스프라이트를����������� ������������������ 이용한다����������� ������������������
캔버스에서는����������� ������������������ drawImage를����������� ������������������ 이용해����������� ������������������ 간단하게����������� ������������������ 구현할����������� ������������������ 수����������� ������������������ 있다����������� ������������������
var ctx = elCanvas.getContext("2d"); ctx.drawImage(대상이미지, 원본x, 원본y, 원본너비, 원본높이, 대상x, 대상y, 대상너비, 대상높이);
원본����������� ������������������ x,y,width,height����������� ������������������
drawImage����������� ������������������
대상����������� ������������������ x,y,width,height����������� ������������������
원본과����������� ������������������ 대상의����������� ������������������ 크기가����������� ������������������ 다르면����������� ������������������ 픽셀����������� ������������������ 조작으로����������� ������������������ 인해����������� ������������������ iOS4에서����������� ������������������ 느려진다����������� ������������������
원본����������� ������������������ 너비����������� ������������������ 100����������� ������������������
drawImage����������� ������������������
대상����������� ������������������ 너비����������� ������������������ 200����������� ������������������
var ctx = elCanvas.getContext("2d"); ctx.drawImage(elImg, 0, 0, 100, 100, 0, 0, 200, 100);
캔버스로����������� ������������������ 만든����������� ������������������ 애니메이션����������� ������������������ 데모����������� ������������������
iOS5����������� ������������������
똑같은����������� ������������������ 데모를����������� ������������������ iOS4가����������� ������������������ 설치된����������� ������������������ 똑같은����������� ������������������ 기기에서����������� ������������������ 실행����������� ������������������
iOS4����������� ������������������
?!?!?!����������� ������������������
빠른����������� ������������������ 애니메이션을����������� ������������������ 위해서는����������� ������������������ 하드웨어����������� ������������������ 가속이����������� ������������������ 필수����������� ������������������
iOS5의����������� ������������������ 사파리����������� ������������������ 부터����������� ������������������ 캔버스����������� ������������������ 하드웨어����������� ������������������ 가속����������� ������������������ 지원����������� ������������������
빠름!����������� ������������������
빠름!����������� ������������������
빠름!����������� ������������������
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; }
다른����������� ������������������ CSS속성이����������� ������������������ 같이����������� ������������������ 변경되면����������� ������������������ 애니메이션����������� ������������������ 속도가����������� ������������������ 느리다����������� ������������������ background-position과����������� ������������������ 같은����������� ������������������ 속성을����������� ������������������ 사용할����������� ������������������ 수����������� ������������������ 없다����������� ������������������ 따라서����������� ������������������ 3D속성만����������� ������������������ 사용할����������� ������������������ 수����������� ������������������ 있도록����������� ������������������ 구조를����������� ������������������ 만든다����������� ������������������
DIV(overflow:hidden)����������� ������������������ IMG(position:absolute)����������� ������������������
CSS3����������� ������������������ 3D����������� ������������������ Transforms를����������� ������������������ 사용한����������� ������������������ 데모����������� ������������������
iOS4����������� ������������������
끝?����������� ������������������
기기����������� ������������������ 별로����������� ������������������ 다른����������� ������������������ 대응을����������� ������������������ 해야����������� ������������������ 한다����������� ������������������
안드로이드����������� ������������������ 4.0����������� ������������������ 미만은����������� ������������������ 하드웨어����������� ������������������ 가속을����������� ������������������ 받을����������� ������������������ 수����������� ������������������ 없다����������� ������������������
기기/OS����������� ������������������ iPhone����������� ������������������ 3GS����������� ������������������
iPhone����������� ������������������ 4����������� ������������������
iPhone����������� ������������������ 4S����������� ������������������
Android����������� ������������������ 3����������� ������������������ 미만����������� ������������������
Android����������� ������������������ 3����������� ������������������ 이상����������� ������������������
렌더링����������� ������������������ 방식����������� ������������������
CSS3D����������� ������������������
CSS3D����������� ������������������ (iOS4����������� ������������������ 이하)����������� ������������������
Canvas����������� ������������������ Canvas����������� ������������������ or����������� ������������������ DOM����������� ������������������
CSS3D����������� ������������������ Canvas����������� ������������������
(iOS5����������� ������������������ 이상)����������� ������������������
안드로이드����������� ������������������ 4.0도����������� ������������������ 문제가����������� ������������������ 있다����������� ������������������
- 한����������� ������������������ 면이����������� ������������������ 2048픽셀을����������� ������������������ 넘어가는����������� ������������������ 이미지를����������� ������������������ 사용하면����������� ������������������ 화면에����������� ������������������ 검정색으로����������� ������������������ 표시����������� ������������������ 된다.����������� ������������������
- 회전을����������� ������������������ 하게����������� ������������������ 되면����������� ������������������ overflow:hidden����������� ������������������ 영역의����������� ������������������ 크기가����������� ������������������ 바뀐다.����������� ������������������
"10만원대����������� ������������������ 갤럭시S3����������� ������������������ 놓칠라"����������� ������������������ 대
리점����������� ������������������ 폭주����������� ������������������
갤S3����������� ������������������ 공짜폰에����������� ������������������ 유통����������� ������������������ 대란...����������� ������������������ "전산����������� ������������������ 마비"����������� ������������������
"갤럭시S3����������� ������������������ 17만원����������� ������������������ 판
매"����������� ������������������ 일파만파����������� ������������������
to.����������� ������������������ 안드로이드����������� ������������������ 2.X����������� ������������������ 사용자����������� ������������������ 분들께����������� ������������������ ����������� ������������������ ����������� ������������������
����������� ������������������ 바꿔주세요.����������� ������������������ 제발...����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ from.����������� ������������������ 익명의����������� ������������������ 개발자����������� ������������������
이렇게����������� ������������������ 어려운����������� ������������������ 상황이지만����������� ������������������ 방법은����������� ������������������ 있다����������� ������������������
Collie����������� ������������������
콜리는����������� ������������������ 18종����������� ������������������ 이상의����������� ������������������ 모바일����������� ������������������ 기기에����������� ������������������ 대응하는����������� ������������������ 모바일에����������� ������������������ 최적화된����������� ������������������ 라이브러리����������� ������������������ ����������� ������������������
더����������� ������������������ 빠른����������� ������������������ 방식으로����������� ������������������ 렌더링����������� ������������������ 한다����������� ������������������
이벤트����������� ������������������ 모델이����������� ������������������ 다르기����������� ������������������ 때문에����������� ������������������ 캔버스에도����������� ������������������ 버블링을����������� ������������������ 구현����������� ������������������ ����������� ������������������
<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����������� ������������������
캔버스와����������� ������������������ 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]]
비동기����������� ������������������ 이미지����������� ������������������ 로딩의����������� ������������������ 불편함을����������� ������������������ 해소하는����������� ������������������ ImageManager����������� ������������������ 제공����������� ������������������
A����������� ������������������ 로딩����������� ������������������ 이미지����������� ������������������ 로딩����������� ������������������ 끝����������� ������������������
A����������� ������������������ 사용����������� ������������������ 실제����������� ������������������ A����������� ������������������ 이미지를����������� ������������������ 적용����������� ������������������
많은����������� ������������������ 수의����������� ������������������ 객체를����������� ������������������ 다루기����������� ������������������ 위해����������� ������������������ 타일����������� ������������������ 캐시����������� ������������������ 기능����������� ������������������ 제공����������� ������������������
캔버스����������� ������������������ 캔버스����������� ������������������
체스판과����������� ������������������ 같은����������� ������������������ 정적인����������� ������������������ 타일����������� ������������������ 맵을����������� ������������������ 만들����������� ������������������ 때����������� ������������������ 유리����������� ������������������
간단하게����������� ������������������ 고해상도����������� ������������������ 디스플레이����������� ������������������ 지원����������� ������������������
성능����������� ������������������ 문제로����������� ������������������ 인해����������� ������������������ 아이폰����������� ������������������ 레티나만����������� ������������������ 지원����������� ������������������
var isRetina = collie.Renderer.isRetinaDisplay(); collie.ImageManager.addImages({ yame : (isRetina ? "large" : "small") + "/yame.png" });
a����������� ������������������
개별����������� ������������������ 편의성����������� ������������������ 제공����������� ������������������
처음에����������� ������������������ 나온����������� ������������������ 토끼가����������� ������������������ 움직이는����������� ������������������ 애니메이션����������� ������������������ 구현����������� ������������������ 예제����������� ������������������
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();
오픈소스����������� ������������������ LGPL����������� ������������������ v2.1����������� ������������������
http://jindo.dev.naver.com/collie����������� ������������������ http://dev.naver.com����������� ������������������ 에서도����������� ������������������ 찾을����������� ������������������ 수����������� ������������������ 있습니다.����������� ������������������