5-2-2.ÇÁ·¹ÀÓ ¿äû

ŸÀ̸Ӹ¦ »ç¿ëÇÑ ¾Ö´Ï¸ÞÀ̼ÇÀº ÀÌÇØÇϱ⠽±°í ±¸Á¶µµ °£´ÜÇÏ´Ù. ÁÖ±âÀûÀ¸·Î È£ÃâµÇ´Â ÇÔ¼ö¿¡¼­ º¯¼ö°ªÀ» ¹Ù²ã°¡¸ç ±×¸®±â¸¸ ÇÏ¸é µÈ´Ù. ±×·¯³ª ŸÀ̸Ӱ¡ ¿ø·¡ ¾Ö´Ï¸ÞÀ̼ÇÀ» À§ÇØ ¸¸µç ÀåÄ¡°¡ ¾Æ´Ï´Ù º¸´Ï ¿©·¯ °¡Áö ¹®Á¦°¡ ÀÖ´Ù.

 

¨ç È£Ãâ ÁֱⰡ ºÎÁ¤È®ÇÏ´Ù. setInterval ¸Þ¼­µåÀÇ ÁÖ±â´Â 1/1000ÃÊ ´ÜÀ§ÀÌÁö¸¸ ÀÌ °ªÀ» 1·Î Áشٰí Çؼ­ ÃÊ´ç 1000¹ø È£ÃâµÇ´Â °ÍÀº ¾Æ´Ï´Ù. Á» »¡¶óÁö±â´Â ÇÏÁö¸¸ ÃÊ´ç 1000¹ø¾¿À̳ª È£ÃâÇÒ ¼ö´Â ¾øÀ¸¸ç »ç½Ç ±×·² ÇÊ¿äµµ ¾ø´Ù. »ç¶÷Àº ±â²¯ÇØ¾ß ÃÊ´ç 24ÇÁ·¹ÀÓ Á¤µµ¸¸ ÀνÄÇÑ´Ù. ÃÖ´ë È£Ãâ ÁÖ±â´Â ÄÄÇ»ÅÍ ¼º´É°ú ºê¶ó¿ìÀúÀÇ Á¤Ã¥¿¡ µû¶ó ´Ù¸¥µ¥ ´ë·« ÃÊ´ç 100ȸ Á¤µµ°¡ ÇÑ°èÀÌ´Ù. È£Ãâ Áֱ⸦ ÅëÇØ ÇÁ·¹ÀÓÀ²À» Á¶Á¤ÇÒ ¼ö ÀÖÁö¸¸ Á¤È®ÇÏÁö ¾Ê´Ù.

¨è ŸÀ̸Ӵ ¿ì¼± ¼øÀ§°¡ ³·Àº À̺¥Æ®ÀÌ´Ù. ºê¶ó¿ìÀú´Â ´Ù¸¥ ÇÒ ÀÏÀÌ ¾øÀ» ¶§¸¸ ŸÀ̸Ӹ¦ È£ÃâÇÑ´Ù. ÇÒ ÀÏÀÌ ¸¹°Å³ª CPU°¡ ´À¸®¸é ÇÁ·¹ÀÓÀ²ÀÌ ¶³¾îÁø´Ù. ±×·¡¼­ »óȲ¿¡ µû¶ó È£Ãâ ÁֱⰡ °¡º¯ÀûÀ̸ç ÀÏÁ¤ÇÑ ¼Óµµ°¡ º¸ÀåµÇÁö ¾Ê´Â´Ù. À§ ¿¹Á¦¿¡¼­ ºê¶ó¿ìÀúÀÇ Ã¢ Å©±â¸¦ Á¶Á¤ÇØ º¸¸é ÇÁ·¹ÀÓÀ²ÀÌ È® ¶³¾îÁø´Ù. â Å©±â¸¦ Á¶Á¤ÇÏ´À¶ó CPU°¡ ¹ÙºüÁö¸é ŸÀ̸Ӵ »ý·«µÇ±â ¶§¹®ÀÌ´Ù. µð¹ö±ëÁß¿¡µµ ¼Óµµ°¡ ¶³¾îÁø´Ù.

¨é ¾Ö´Ï¸ÞÀÌ¼Ç ¼Óµµ°¡ ³Ê¹« »¡¶óµµ ¹®Á¦°¡ µÈ´Ù. ¿ì¸®°¡ »ç¿ëÇÏ´Â ¸ð´ÏÅÍ´Â º¸Åë 60ÇÁ·¹ÀÓ(60Hz)ÀÇ ºóµµ·Î È­¸éÀ» °»½ÅÇÑ´Ù. ¾÷¹«¿ëÀ¸·Î´Â ºñ±³Àû ÃæºÐÇÑ ¼ÓµµÀÌ´Ù. ¾Ö´Ï¸ÞÀ̼ÇÀÌ ¸ð´ÏÅÍÀÇ ÁÖ»çÀ²À» ³Ñ¾î¼­¸é ÇÑ ÇÁ·¹ÀÓÀ» °Ç³Ê ¶Ù¾î ¹ö¸± ¼öµµ ÀÖ´Ù. À̸¦ ÇÁ·¹ÀÓ ¼Õ½ÇÀ̶ó°í ÇÑ´Ù.

CPU´Â Áß°£ ÇÁ·¹ÀÓÀ» ¿­½ÉÈ÷ ¸¸µé¾î ³»Áö¸¸ ¸ð´ÏÅÍ°¡ À̸¦ º¸¿© ÁÖ±â Àü¿¡ ´ÙÀ½ ÇÁ·¹ÀÓÀÌ ¶Ç ¸¸µé¾îÁö¹Ç·Î ÀÌÀü ÇÁ·¹ÀÓÀº »ç¿ëÀÚ°¡ º¸±âµµ Àü¿¡ »ç¶óÁö´Â °ÍÀÌ´Ù. Áß°£ °úÁ¤ÀÌ °¡²û¾¿ »ý·«µÇ¹Ç·Î ¿òÁ÷ÀÓÀÌ ±ÕÀÏÇÏÁö ¸øÇÏ°í ¶Ò¶Ò ²÷¾îÁö´Â ´À³¦ÀÌ µç´Ù. ºÒÇÊ¿äÇÏ°Ô ¼Óµµ¸¦ ³ôÀÌ´Â °Íº¸´Ù ¸ð´ÏÅÍ ÁÖ»çÀ²À» Á¶»çÇÏ¿© µ¿±âÈ­ÇÏ´Â °ÍÀÌ ÁÁ´Ù.

¨ê ŸÀ̸Ӵ ÁÖ±âÀûÀ¸·Î ¸Þ¼­µå¸¦ È£ÃâÇϵµ·Ï µÇ¾î ÀÖÀ¸¹Ç·Î ºê¶ó¿ìÀúÀÇ »óȲÀ» °í·ÁÄ¡ ¾Ê°í ¹«Á¶°Ç ¾Ö´Ï¸ÞÀ̼ÇÀ» ½ÇÇàÇÏ¿© CPU¸¦ Ȥ»ç½ÃŲ´Ù. ´Ù¸¥ ÅÇÀ¸·Î ÀüȯÇ߰ųª ÃÖ¼ÒÈ­Çß´õ¶óµµ ŸÀÌ¸Ó À̺¥Æ®´Â °è¼Ó ¹ß»ýÇϸç CPU´Â À̸¦ ó¸®ÇØ¾ß ÇÑ´Ù. ÀÛ¾÷ Àüȯ, ½ºÅ©·Ñ µîÀÇ ÀÌÀ¯·Î ¾Ö´Ï¸ÞÀ̼ÇÀÌ °¡·ÁÁö¸é ¾îÂ÷ÇÇ »ç¿ëÀÚ°¡ º¼ ¼ö ¾øÀ¸¹Ç·Î Á¤ÁöÇÏ´Â °ÍÀÌ ÇÕ¸®ÀûÀÌ´Ù.

±×·¯³ª ŸÀ̸Ӱ¡ ¾Ö´Ï¸ÞÀÌ¼Ç Àü¿ë À̺¥Æ®°¡ ¾Æ´Ï´Ùº¸´Ï ºê¶ó¿ìÀú´Â ¾Ö´Ï¸ÞÀ̼ÇÀÌ °¡·ÁÁ³¾îµµ ÀÌ ÀÛ¾÷ÀÌ ºÒÇÊ¿äÇÏ´Ù´Â È®½ÅÀ» ÇÒ ¼ö ¾øÀ¸¸ç ±×·¯´Ù º¸´Ï ŸÀÌ¸Ó À̺¥Æ®¸¦ ÀüÅõÀûÀ¸·Î È£ÃâÇØ ´î ¼ö¹Û¿¡ ¾ø´Ù. ÀϺΠºê¶ó¿ìÀú´Â À̸¦ Áö´ÉÀûÀ¸·Î ÆÇ´ÜÇÏ¿© ÇÁ·¹ÀÓÀ²À» ¶³¾î¶ß¸®´Â ¿¹µµ ÀÖÁö¸¸ ÀÌ ¶ÇÇÑ Á¤È®ÇÏÁö ¾Ê´Ù. ¾Ö´Ï¸ÞÀ̼ÇÀÌ °è¼Ó ½ÇÇàµÇ¾îµµ º° ºÎÀÛ¿ëÀº ¾øÀ¸¸ç µ¥½ºÅ©Å¾¿¡¼­´Â º° ¹®Á¦°¡ ¾Æ´Ò ¼öµµ ÀÖ´Ù. ±×·¯³ª ¹èÅ͸®·Î ¿òÁ÷ÀÌ´Â ¸ð¹ÙÀÏ È¯°æ¿¡¼­´Â Ä¡¸íÀûÀÌ´Ù.

 

ÀÌ·± ¿©·¯ °¡Áö ¹®Á¦°¡ À־ ºê¶ó¿ìÀú Á¦ÀÛ»ç´Â Á» ´õ È¿À²ÀûÀÎ ¹æ¹ýÀ» °í¾ÈÇس´Ù. ¾Ö´Ï¸ÞÀ̼Ǹ¸À» À§ÇÑ Àü¿ë ŸÀ̸Ӱ¡ ÇÊ¿äÇØÁø °ÍÀÌ´Ù. ´ÙÀ½ ¾Ö´Ï¸ÞÀÌ¼Ç ÇÁ·¹ÀÓÀ» ¿äûÇÒ ¶§ ŸÀÌ¸Ó ´ë½Å ´ÙÀ½ ¸Þ¼­µå¸¦ È£ÃâÇÑ´Ù.

 

requestAnimationFrame(Äݹé)

 

½Ã½ºÅÛÀº ´ÙÀ½ ÇÁ·¹ÀÓÀ» È£ÃâÇÒ ÃÖÀû ½ÃÁ¡À» ÀÚµ¿À¸·Î °áÁ¤ÇÏ¿© ¶§°¡ µÇ¾úÀ» ¶§ Äݹé ÇÔ¼ö¸¦ È£ÃâÇÑ´Ù. ÇÁ·¹ÀÓÀ²Àº Äڵ忡¼­ °­Á¦·Î ÁöÁ¤ÇÒ ¼ö ¾øÀ¸¸ç ½Ã½ºÅÛÀÌ CPU ¼Óµµ³ª ºê¶ó¿ìÀúÀÇ ÀÛ¾÷¾ç µîÀ» °í·ÁÇÏ¿© Áö´ÉÀûÀ¸·Î °áÁ¤ÇÑ´Ù. ÃÖ´ë 60 ÇÁ·¹ÀÓ Á¤µµ±îÁö Áö¿øµÇ¸ç ÀÌ´Â ´ëºÎºÐÀÇ ¾Ö´Ï¸ÞÀ̼ǿ¡ ÃæºÐÇÑ ¼ÓµµÀÌ´Ù. ¸¸¾à ÃÖ¼ÒÈ­µÇ¾ú°Å³ª ´Ù¸¥ ÅÇÀ¸·Î ÀüȯµÇ¾î ¾Ö´Ï¸ÞÀ̼ÇÀ» ÇÒ ÇÊ¿ä°¡ ¾ø´Ù¸é ÄݹéÀ» È£ÃâÇÏÁö ¾ÊÀ½À¸·Î½á CPU°¡ Àá½Ã ½¬¾î°¥ Æ´À» ÁØ´Ù.

Äݹé ÇÔ¼ö·Î´Â ÇöÀç ½Ã°£°ªÀÎ timeÀÌ Àμö·Î Àü´ÞµÇ¾î ½Ã°£ ±â¹ÝÀÇ ¾Ö´Ï¸ÞÀ̼ÇÀ» ó¸®ÇÒ ¼ö ÀÖ´Ù. time Àμö´Â 1/1000ÃÊ ´ÜÀ§ÀÇ ¿¡Æø ½Ã°£À̸ç Á¤È®ÇÑ °ªÀ̹ǷΠÀÌ °ªÀ» ±âÁØÀ¸·Î ¾Ö´Ï¸ÞÀÌ¼Ç ¼Óµµ¸¦ Á¶ÀýÇϸé ÇÁ·¹ÀÓ ¼Óµµ¿¡ ¹«°üÇÑ ÀÏÁ¤ÇÑ ¼Óµµ¸¦ ±¸ÇöÇÒ ¼ö ÀÖ´Ù. ¾Õ ¿¹Á¦¸¦ ´ÙÀ½°ú °°ÀÌ ¼öÁ¤ÇØ º¸ÀÚ.

 

anim3.html

<script>

     var canvas;

     var ctx;

     var x = 10;

     var delta = 1;

    

     window.onload = function() {

         canvas = document.getElementById("canvas");

         if (canvas == null || canvas.getContext == null) return;

         ctx = canvas.getContext("2d");

       draw();

     }

    

   function draw(time) {

         ctx.clearRect(0, 0, canvas.width, canvas.height);

         ctx.fillRect(x, 10, 20,20);

 

         if (x + 20 > canvas.width || x < 0) {

              delta = -delta;

         }

         x += delta;

       requestAnimationFrame(draw);

     }

</script>

 

onload¿¡¼­ draw¸¦ È£ÃâÇÏ°í draw´Â ÇÑ ÇÁ·¹ÀÓÀ» ±×¸° ÈÄ ´ÙÀ½ ÇÁ·¹ÀÓÀ» ¿äûÇÑ´Ù. Àû´çÇÑ ¶§°¡ µÇ¸é ÀÚ½ÅÀ» ´Ù½Ã È£ÃâÇØ ´Þ¶ó°í ¿äûÇÏ´Â °ÍÀÌ´Ù. °Ñº¸±â¿¡ ½ÇÇà °á°ú´Â °°Áö¸¸ ÀÚ¼¼È÷ °üÂûÇØ º¸¸é ¸¹Àº ºÎºÐÀÌ ´Ù¸£´Ù. 60 ÇÁ·¹ÀÓ Á¤µµ·Î ¼Óµµ°¡ ÀÏÁ¤ÇÏ¸ç °¡·ÁÁö¸é ¾Ö´Ï¸ÞÀ̼ÇÀÌ ÁßÁöµÈ´Ù. À§ ¿¹Á¦¿¡¼­´Â ±¸ÇöÇÏÁö ¾Ê¾ÒÁö¸¸ time Àμö¸¦ ÂüÁ¶ÇÏ¿© ½Ã°£ ±â¹Ý ¾Ö´Ï¸ÞÀ̼ÇÀ» ±¸ÇöÇÒ ¼öµµ ÀÖ´Ù.

ÀÌ ¹æ¹ýÀÌ Å¸À̸Ӹ¦ ¾²´Â °Í¿¡ ºñÇØ ¹Ì·¡ ÁöÇâÀûÀÌ°í ±ÇÀåµÇ´Â ¹ÙÀÌ´Ù. ÇÏÁö¸¸ ¾ÈŸ±õ°Ôµµ ÃÖ±Ù¿¡ Ãß°¡µÈ ±â´ÉÀ̾ ¸ðµç ºê¶ó¿ìÀú°¡ ´Ù Áö¿øÇÏÁö ¾Ê´Â´Ù. IE9´Â ÀÌ ¹æ¹ýÀ» ¾ÆÁ÷ Áö¿øÇÏÁö ¾Ê´Â´Ù. ¾ÆÁ÷ ¿ÏÀüÈ÷ ÇÕÀǵµ ¾ÈµÈ »óÅÂÀÌ°í ÀϺΠºê¶ó¿ìÀú¿¡¼­´Â ¹ö±×±îÁö ÀÖ´Ù. Á¦Á¶»çº° Á¢µÎ°¡ Á¤ÀǵǾî ÀÖ¾î Á¶°ÇºÎ Äڵ带 ÀÛ¼ºÇÏ¸é ¸ðµç ºê¶ó¿ìÀú¿¡¼­ ÀÌ ¹æ¹ýÀ» ´Ù ¾µ ¼ö´Â ÀÖÁö¸¸ Á¶¸¸°£ Ç¥ÁØÀÌ µÉ µí ÇϹǷΠ±»ÀÌ ±×·¸°Ô±îÁö ÇÒ ÇÊ¿ä´Â ¾ø´Ù.

¾ÆÁ÷±îÁö´Â ŸÀ̸ӵµ ¾µ¸¸ÇÑ ¹æ¹ýÀÌ´Ù. ¹®Á¦°¡ ÀÖÁö¸¸ ÇØ°á ¹æ¹ýÀÌ ÀÖ°í Àû¾îµµ ºê¶ó¿ìÀú ¹ÌÁö¿ø ¹®Á¦´Â ¾ø´Ù. ÀÌ Ã¥¿¡¼­´Â ŸÀ̸ӷΠ½Ç½ÀÀ» °è¼Ó ÁøÇàÇÑ´Ù.