ŸÀ̸Ӹ¦ »ç¿ëÇÑ ¾Ö´Ï¸ÞÀ̼ÇÀº ÀÌÇØÇϱ⠽±°í ±¸Á¶µµ °£´ÜÇÏ´Ù. ÁÖ±âÀûÀ¸·Î
È£ÃâµÇ´Â ÇÔ¼ö¿¡¼ º¯¼ö°ªÀ» ¹Ù²ã°¡¸ç ±×¸®±â¸¸ ÇÏ¸é µÈ´Ù. ±×·¯³ª ŸÀ̸Ӱ¡ ¿ø·¡ ¾Ö´Ï¸ÞÀ̼ÇÀ» À§ÇØ ¸¸µç
ÀåÄ¡°¡ ¾Æ´Ï´Ù º¸´Ï ¿©·¯ °¡Áö ¹®Á¦°¡ ÀÖ´Ù.
¨ç È£Ãâ ÁֱⰡ ºÎÁ¤È®ÇÏ´Ù. 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´Â ÀÌ ¹æ¹ýÀ» ¾ÆÁ÷ Áö¿øÇÏÁö
¾Ê´Â´Ù. ¾ÆÁ÷ ¿ÏÀüÈ÷ ÇÕÀǵµ ¾ÈµÈ »óÅÂÀÌ°í ÀϺΠºê¶ó¿ìÀú¿¡¼´Â ¹ö±×±îÁö ÀÖ´Ù. Á¦Á¶»çº° Á¢µÎ°¡ Á¤ÀǵǾî ÀÖ¾î Á¶°ÇºÎ Äڵ带 ÀÛ¼ºÇÏ¸é ¸ðµç ºê¶ó¿ìÀú¿¡¼ ÀÌ ¹æ¹ýÀ» ´Ù ¾µ ¼ö´Â ÀÖÁö¸¸ Á¶¸¸°£
Ç¥ÁØÀÌ µÉ µí ÇϹǷΠ±»ÀÌ ±×·¸°Ô±îÁö ÇÒ ÇÊ¿ä´Â ¾ø´Ù.
¾ÆÁ÷±îÁö´Â ŸÀ̸ӵµ ¾µ¸¸ÇÑ ¹æ¹ýÀÌ´Ù. ¹®Á¦°¡ ÀÖÁö¸¸ ÇØ°á ¹æ¹ýÀÌ ÀÖ°í
Àû¾îµµ ºê¶ó¿ìÀú ¹ÌÁö¿ø ¹®Á¦´Â ¾ø´Ù. ÀÌ Ã¥¿¡¼´Â ŸÀ̸ӷΠ½Ç½ÀÀ» °è¼Ó ÁøÇàÇÑ´Ù.