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.
CAUTION
 식사
 후
 졸릴
 수
 있으니
 데모부터
 가겠습니다.
 
알파벳
 소문자
 L
 http://me2.do/FFflkMj
         대소문자를
 구분해야
 합니다
 
애니메이션은
 무엇일까?
 
역전!야매요리
                              정다정
 작가님
 twitter
 @yameyori
 e-mail
 usamibabe@naver.com
 webtoon
 
애니메이션은
 연속된
 장면을
 화면에
 빠르게
 표시해
 움직임을
 나타낸다
 
이미지를
 화면에
 표시하는
 적절한
 방법은
Upcoming SlideShare
Loading in …5
×

[C3]collie deview2012

6,446 views

Published on

  • Be the first to comment

[C3]collie deview2012

  1. 1. CAUTION
  2. 2.  식사
  3. 3.  후
  4. 4.  졸릴
  5. 5.  수
  6. 6.  있으니
  7. 7.  데모부터
  8. 8.  가겠습니다.
  9. 9.  
  10. 10. 알파벳
  11. 11.  소문자
  12. 12.  L
  13. 13.  http://me2.do/FFflkMj
  14. 14.   대소문자를
  15. 15.  구분해야
  16. 16.  합니다
  17. 17.  
  18. 18. 애니메이션은
  19. 19.  무엇일까?
  20. 20.  
  21. 21. 역전!야매요리
  22. 22.   정다정
  23. 23.  작가님
  24. 24.  twitter
  25. 25.  @yameyori
  26. 26.  e-mail
  27. 27.  usamibabe@naver.com
  28. 28.  webtoon
  29. 29.  
  30. 30. 애니메이션은
  31. 31.  연속된
  32. 32.  장면을
  33. 33.  화면에
  34. 34.  빠르게
  35. 35.  표시해
  36. 36.  움직임을
  37. 37.  나타낸다
  38. 38.  
  39. 39. 이미지를
  40. 40.  화면에
  41. 41.  표시하는
  42. 42.  적절한
  43. 43.  방법은
  44. 44.  DOM과
  45. 45.  HTML5
  46. 46.  캔버스가
  47. 47.  있다
  48. 48.   img  src=image.png  alt=이미지  /
  49. 49.  
  50. 50. 캔버스는
  51. 51.  DOM과는
  52. 52.  달리
  53. 53.  객체
  54. 54.  별로
  55. 55.  다루기가
  56. 56.  힘들다
  57. 57.   canvas  id=canvas/canvas  
  58. 58. 따라서
  59. 59.  이미지를
  60. 60.  캔버스에
  61. 61.  그리기
  62. 62.  전에
  63. 63.  영역
  64. 64.  등의
  65. 65.  정보를
  66. 66.  별도로
  67. 67.  관리해야
  68. 68.  한다
  69. 69.  
  70. 70.   var  o  =  new  Yame();   o.age  =  32/2*Math.sin(1)+13 ;   o.height  =  160cm;   o.weight  =  undefined;   o.cooking  =  false;   o.defense  =  backside;   ...    
  71. 71. 그리는
  72. 72.  과정은
  73. 73.  어떨까?
  74. 74.   틱
  75. 75.   16ms
  76. 76.   그리기
  77. 77.  
  78. 78. 단일화된
  79. 79.  렌더링
  80. 80.  파이프라인을
  81. 81.  이용해
  82. 82.  초당
  83. 83.  60번
  84. 84.  등록된
  85. 85.  객체를
  86. 86.  그린다
  87. 87.  
  88. 88.   function  draw()  {          //  지우기          ctx.clearRect(0,  0,  ctx.canvas.width,  ctx.canvas.height );            //  등록된
  89. 89.  객체를
  90. 90.  그리기          for  (var  i  =  0;  i    list.length;  i++)  {                  list[i].drawEachObject();          }   };     //  초당
  91. 91.  60번
  92. 92.  반복   setInterval(draw,  1000  /  60);    
  93. 93. 눈에
  94. 94.  보이지는
  95. 95.  않지만
  96. 96.  화면을
  97. 97.  매번
  98. 98.  다시
  99. 99.  그린다
  100. 100.   draw
  101. 101.   draw
  102. 102.   draw
  103. 103.   draw
  104. 104.   draw
  105. 105.   초당
  106. 106.  60번
  107. 107.  반복한다
  108. 108.  
  109. 109. requestAnimationFrame을
  110. 110.  사용하면
  111. 111.  좀
  112. 112.  더
  113. 113.  자연스러운
  114. 114.  애니메이션이
  115. 115.  된다
  116. 116.  모바일에서는
  117. 117.  iOS6부터
  118. 118.  사용
  119. 119.  가능
  120. 120.   function  draw()  {          requestAnimationFrame(draw);          //  ...   }     requestAnimationFrame(draw);  
  121. 121. 움직이는
  122. 122.  동작은
  123. 123.  스프라이트를
  124. 124.  이용한다
  125. 125.  
  126. 126. 캔버스에서는
  127. 127.  drawImage를
  128. 128.  이용해
  129. 129.  간단하게
  130. 130.  구현할
  131. 131.  수
  132. 132.  있다
  133. 133.   var  ctx  =  elCanvas.getContext(2d);   ctx.drawImage(대상이미지,  원본x,  원본y,   원본너비,  원본높이,  대상x,  대상y,  대상너비,  대상높이);   원본
  134. 134.  x,y,width,height
  135. 135.   대상
  136. 136.  x,y,width,height
  137. 137.   drawImage
  138. 138.  
  139. 139. 원본과
  140. 140.  대상의
  141. 141.  크기가
  142. 142.  다르면
  143. 143.  픽셀
  144. 144.  조작으로
  145. 145.  인해
  146. 146.  iOS4에서
  147. 147.  느려진다
  148. 148.   var  ctx  =  elCanvas.getContext(2d);   ctx.drawImage(elImg,  0,  0,  100,  100,  0 ,  0,  200,  100);   원본
  149. 149.  너비
  150. 150.  100
  151. 151.   대상
  152. 152.  너비
  153. 153.  200
  154. 154.   drawImage
  155. 155.  
  156. 156. 캔버스로
  157. 157.  만든
  158. 158.  애니메이션
  159. 159.  데모
  160. 160.   iOS5
  161. 161.  
  162. 162. 똑같은
  163. 163.  데모를
  164. 164.  iOS4가
  165. 165.  설치된
  166. 166.   똑같은
  167. 167.  기기에서
  168. 168.  실행
  169. 169.   iOS4
  170. 170.  
  171. 171. ?!?!?!
  172. 172.  
  173. 173. 빠른
  174. 174.  애니메이션을
  175. 175.  위해서는
  176. 176.  하드웨어
  177. 177.  가속이
  178. 178.  필수
  179. 179.  iOS5의
  180. 180.  사파리
  181. 181.  부터
  182. 182.  캔버스
  183. 183.  하드웨어
  184. 184.  가속
  185. 185.  지원
  186. 186.   빠름!
  187. 187.   빠름!
  188. 188.   빠름!
  189. 189.  
  190. 190. CSS3
  191. 191.  3D
  192. 192.  Transforms를
  193. 193.  이용하면
  194. 194.  iOS4에서도
  195. 195.  하드웨어
  196. 196.  가속이
  197. 197.  가능
  198. 198.  안드로이드
  199. 199.  4.0
  200. 200.  이상에서도
  201. 201.  하드웨어
  202. 202.  가속
  203. 203.  지원
  204. 204.   .displayObject  {   -­‐webkit-­‐transform:translate3d(x,y,z)  s cale3d(x,  y,  z)    rotateZ(deg);   -­‐wekit-­‐transform-­‐origin:0  0;   -­‐webkit-­‐transform-­‐style:preserve-­‐3d;   }  
  205. 205. 다른
  206. 206.  CSS속성이
  207. 207.  같이
  208. 208.  변경되면
  209. 209.  애니메이션
  210. 210.  속도가
  211. 211.  느리다
  212. 212.  background-position과
  213. 213.  같은
  214. 214.  속성을
  215. 215.  사용할
  216. 216.  수
  217. 217.  없다
  218. 218.  따라서
  219. 219.  3D속성만
  220. 220.  사용할
  221. 221.  수
  222. 222.  있도록
  223. 223.  구조를
  224. 224.  만든다
  225. 225.   IMG(position:absolute)
  226. 226.   DIV(overflow:hidden)
  227. 227.  
  228. 228. CSS3
  229. 229.  3D
  230. 230.  Transforms를
  231. 231.  사용한
  232. 232.  데모
  233. 233.   iOS4
  234. 234.  
  235. 235. 끝?
  236. 236.  
  237. 237. 기기
  238. 238.  별로
  239. 239.  다른
  240. 240.  대응을
  241. 241.  해야
  242. 242.  한다
  243. 243.  안드로이드
  244. 244.  4.0
  245. 245.  미만은
  246. 246.  하드웨어
  247. 247.  가속을
  248. 248.  받을
  249. 249.  수
  250. 250.  없다
  251. 251.   iPhone
  252. 252.   iPhone
  253. 253.   iPhone
  254. 254.   Android
  255. 255.   Android
  256. 256.   기기/OS
  257. 257.   3GS
  258. 258.   4
  259. 259.   4S
  260. 260.   3
  261. 261.  미만
  262. 262.   3
  263. 263.  이상
  264. 264.   CSS3D
  265. 265.   (iOS4
  266. 266.  이하)
  267. 267.   Canvas
  268. 268.   렌더링
  269. 269.   CSS3D
  270. 270.   Canvas
  271. 271.   or
  272. 272.   CSS3D
  273. 273.   방식
  274. 274.   Canvas
  275. 275.   DOM
  276. 276.   (iOS5
  277. 277.  이상)
  278. 278.  
  279. 279. 안드로이드
  280. 280.  4.0도
  281. 281.  문제가
  282. 282.  있다
  283. 283.  -  한
  284. 284.  면이
  285. 285.  2048픽셀을
  286. 286.  넘어가는
  287. 287.  이미지를
  288. 288.  사용하면
  289. 289.   화면에
  290. 290.  검정색으로
  291. 291.  표시
  292. 292.  된다.
  293. 293.  -  회전을
  294. 294.  하게
  295. 295.  되면
  296. 296.  overflow:hidden
  297. 297.  영역의
  298. 298.   크기가
  299. 299.  바뀐다.
  300. 300.  
  301. 301.  대리점
  302. 302.  폭주
  303. 303.  10만원대
  304. 304.  갤 럭시S3
  305. 305.  놓칠라 갤S3
  306. 306.  공짜폰에
  307. 307.   유통
  308. 308.  대란...
  309. 309.  전 산
  310. 310.  마비
  311. 311.  
  312. 312.  일파만파
  313. 313.   7만원
  314. 314.  판매 갤럭시S3
  315. 315.  1 to.
  316. 316.  안드로이드
  317. 317.  2.X
  318. 318.  사용자
  319. 319.  분들께
  320. 320.  
  321. 321.  
  322. 322.  
  323. 323.  바꿔주세요.
  324. 324.  제발...
  325. 325.  
  326. 326.  
  327. 327.  
  328. 328.  
  329. 329.  
  330. 330.  
  331. 331.  
  332. 332.  
  333. 333.  
  334. 334.  from.
  335. 335.  익명의
  336. 336.  개발자
  337. 337.  
  338. 338. 이렇게
  339. 339.  어려운
  340. 340.  상황이지만
  341. 341.   방법은
  342. 342.  있다
  343. 343.  
  344. 344. Collie
  345. 345.  
  346. 346. 콜리는
  347. 347.  18종
  348. 348.  이상의
  349. 349.  모바일
  350. 350.  기기에
  351. 351.  대응하는
  352. 352.  모바일에
  353. 353.  최적화된
  354. 354.  라이브러리
  355. 355.  
  356. 356.  
  357. 357.
  358. 358.  빠른
  359. 359.  방식으로
  360. 360.  렌더링
  361. 361.  한다
  362. 362.  
  363. 363. 이벤트
  364. 364.  모델이
  365. 365.  다르기
  366. 366.  때문에
  367. 367.  캔버스에도
  368. 368.  버블링을
  369. 369.  구현
  370. 370.  
  371. 371.   var  layer  =  new  collie.Layer();   div   var  parent  =  new  collie.DisplayObject();          img  /   var  child  =  new  collie.DisplayObject();   parent.addTo(layer);   /div   child.addTo(parent);   img
  372. 372.   child
  373. 373.   div
  374. 374.   parent
  375. 375.   body
  376. 376.   layer
  377. 377.  
  378. 378. 캔버스와
  379. 379.  DOM에서
  380. 380.  보다
  381. 381.  정밀한
  382. 382.  이벤트
  383. 383.  영역을
  384. 384.  찾기
  385. 385.  위해
  386. 386.  hitArea
  387. 387.  적용
  388. 388.  -  PNPOLY
  389. 389.  알고리즘을
  390. 390.  이용해
  391. 391.  캔버스의
  392. 392.  getImageDa ta
  393. 393.  보다
  394. 394.  빠르게
  395. 395.  영역
  396. 396.  확인
  397. 397.  가능
  398. 398.  -  외부
  399. 399.  도메인의
  400. 400.  이미지일
  401. 401.  경우
  402. 402.  getImageData
  403. 403.   사용
  404. 404.  불가능
  405. 405.   [[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]]  
  406. 406. 비동기
  407. 407.  이미지
  408. 408.  로딩의
  409. 409.  불편함을
  410. 410.  해소하는
  411. 411.   ImageManager
  412. 412.  제공
  413. 413.  A
  414. 414.  로딩
  415. 415.   이미지
  416. 416.  로딩
  417. 417.  끝
  418. 418.   A
  419. 419.  사용
  420. 420.   실제
  421. 421.  A
  422. 422.  이미지를
  423. 423.  적용
  424. 424.  
  425. 425. 많은
  426. 426.  수의
  427. 427.  객체를
  428. 428.  다루기
  429. 429.  위해
  430. 430.  타일
  431. 431.  캐시
  432. 432.  기능
  433. 433.  제공
  434. 434.  체스판과
  435. 435.  같은
  436. 436.  정적인
  437. 437.  타일
  438. 438.  맵을
  439. 439.  만들
  440. 440.  때
  441. 441.  유리
  442. 442.   캔버스
  443. 443.   캔버스
  444. 444.  
  445. 445. 간단하게
  446. 446.  고해상도
  447. 447.  디스플레이
  448. 448.  지원
  449. 449.  성능
  450. 450.  문제로
  451. 451.  인해
  452. 452.  아이폰
  453. 453.  레티나만
  454. 454.  지원
  455. 455.   var  isRetina  =  collie.Renderer.isRetinaDisplay();   collie.ImageManager.addImages({          yame  :  (isRetina  ?  large  :  small)  +                        /yame.png   });   a
  456. 456.  
  457. 457. 개별
  458. 458.  편의성
  459. 459.  제공
  460. 460.  처음에
  461. 461.  나온
  462. 462.  토끼가
  463. 463.  움직이는
  464. 464.  애니메이션
  465. 465.  구현
  466. 466.  예제
  467. 467.   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();  
  468. 468. 오픈소스
  469. 469.  LGPL
  470. 470.  v2.1
  471. 471.  
  472. 472. http://jindo.dev.naver.com/collie
  473. 473.  http://dev.naver.com
  474. 474.  에서도
  475. 475.  찾을
  476. 476.  수
  477. 477.  있습니다.
  478. 478.  

×