HTML5\ub97c \uc9c0\uc6d0\ud558\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800 \uae30\ubc18\uc758 JavaScript\uc758 window \uac1d\uccb4\uc5d0\ub294 requestAnimationFrame \ud568\uc218\uac00 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ub354 \uc815\ud655\ud788\ub294, \uc774 \ud568\uc218\ub294 WebGL\uc758 \uc9c0\uc6d0\uacfc \ud568\uaed8 \uc81c\uacf5\ub429\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 \uc9c0\uc815\ub41c \uc5f0\uc0b0(\ud568\uc218)\uc758 \ud638\ucd9c\uc744 \ub2e4\ub978 \uc5f0\uc0b0\uc5d0 \ubc29\ud574\ub97c \uc8fc\uc9c0 \uc54a\uace0 \ucd5c\ub300\ud55c \ube68\ub9ac \ud638\ucd9c\ud574 \uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uc6f9GL\uc5d0\uc11c \uc774 \ud568\uc218\uc758 \uc6a9\ub3c4\ub97c \ucda9\ubd84\ud788 \uc9d0\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub124, \uc544\ub798\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc740 requestAnimationFrame \ud568\uc218\ub97c \uc0ac\uc6a9\ud55c \uc608\uc81c \uc785\ub2c8\ub2e4. \uc774 \uc608\uc81c\ub97c \ud1b5\ud574 requestAnimFrame \ud568\uc218\uc5d0 \ub300\ud574 \uc815\ub9ac\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
[xyz-ihs snippet=”requestAnimationFrame2″]<\/p>\n
\uc704\uc758 \uc608\uc81c\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uba3c\uc800 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc774\ub8e8\uc5b4\uc9c0\ub294 \uce94\ubc84\uc2a4\uc5d0 \ub300\ud55c \uc815\uc758 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\r\n<\/canvas>\r\n<\/pre>\n\ub2e4\uc74c\uc740 requestAnimationFrame \ud568\uc218\uac00 \uc544\uc9c1 \uc9c0\uc6d0\uc774 \ub418\uc9c0 \uc54a\uc744 \uacbd\uc6b0, \ub610\ub294 \ube0c\ub7ec\uc6b0\uc800 \ub9c8\ub2e4 \uc11c\ub85c \ub2e4\ub978 \uc774\ub984\uc73c\ub85c \ud568\uc218\ub85c \uc81c\uacf5\ub418\ub294 \ubb38\uc81c\uc5d0 \ub300\ud55c \ud574\ubc95\uc73c\ub85c \uc77c\uad04\uc801\uc73c\ub85c requestAnimFrame\uc774\ub77c\ub294 \ud568\uc218\ub85c \uc9c0\uc6d0\ub418\ub3c4\ub85d \ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n\r\nwindow.requestAnimFrame = (function(callback) {\r\n return window.requestAnimationFrame || \r\n window.webkitRequestAnimationFrame || \r\n window.mozRequestAnimationFrame || \r\n window.oRequestAnimationFrame || \r\n window.msRequestAnimationFrame ||\r\n function(callback) { window.setTimeout(callback, 1000 \/ 60); };\r\n})();\r\n<\/pre>\n\uc704\uc758 \ucf54\ub4dc\ub97c \ubcf4\uba74 \ub9cc\uc57d \uc5b4\ub5a0\ud55c requestAnimationFrame \ud568\uc218\ub3c4 \uc9c0\uc6d0\ub418\uc9c0 \uc54a\uc744 \uacbd\uc6b0 1000\/60\ubc00\ub9ac\ucd08 \ud6c4\uc5d0 \ubc1c\uc0dd\ud558\ub294 Timer\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\ub2e4\uc74c\uc740 \uce94\ubc84\uc2a4\uc5d0 \uc0ac\uac01\ud615\uc744 \ub80c\ub354\ub9c1\ud558\uace0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc218\ud589\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n\r\nvar canvas = document.getElementById('myCanvas');\r\nvar context = canvas.getContext('2d');\r\n\r\nvar myRectangle = {\r\n x: 0,\r\n y: 75,\r\n width: 100,\r\n height: 50,\r\n borderWidth: 5\r\n};\r\n\r\ndrawRectangle(myRectangle, context);\r\n\r\nsetTimeout(function() {\r\n var startTime = (new Date()).getTime();\r\n animate(myRectangle, canvas, context, startTime);\r\n }, 2000);\r\n<\/pre>\n4\ubc88 \ucf54\ub4dc\uac00 \uce94\ubc84\uc2a4\uc5d0 \ub80c\ub354\ub9c1\ud560 \uc0ac\uac01\ud615\uc758 \uc2a4\ud399\uc785\ub2c8\ub2e4. 12\ubc88 \ucf54\ub4dc\ub97c \ud1b5\ud574 \uc774 \uc0ac\uac01\ud615\uc758 \uc2a4\ud399\ub300\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 14\ubc88 \ucf54\ub4dc\uc5d0\uc11c 2\ucd08 \ud6c4\uc5d0 animation \ud568\uc218\ub97c \ud638\ucd9c\ud558\uace0 \uc788\ub294\ub370\uc694. \ubc14\ub85c \uc774 animation \ud568\uc218\uac00 \uc2e4\uc81c requestAnimFrame \ud568\uc218\ub97c \uc774\uc6a9\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc218\ud589\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.<\/p>\ndrawRectangle \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\nfunction drawRectangle(rect, context) {\r\n context.beginPath();\r\n context.rect(rect.x, rect.y, rect.width, rect.height);\r\n context.fillStyle = '#8ED6FF';\r\n context.fill();\r\n context.lineWidth = rect.borderWidth;\r\n context.strokeStyle = 'black';\r\n context.stroke();\r\n}\r\n<\/pre>\n\uadf8\ub9ac\uace0 animation \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\nfunction animate(rect, canvas, context, startTime) {\r\n var time = (new Date()).getTime() - startTime;\r\n var linearSpeed = 100;\r\n var newX = linearSpeed * time \/ 1000;\r\n\r\n if(newX < canvas.width - rect.width - rect.borderWidth \/ 2) {\r\n rect.x = newX;\r\n }\r\n\r\n context.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n drawRectangle(rect, context);\r\n\r\n requestAnimFrame(function() {\r\n animate(rect, canvas, context, startTime);\r\n });\r\n}\r\n<\/pre>\n2~4\ubc88 \ucf54\ub4dc\ub294 \uc0ac\uac01\ud615\ub97c \uc6c0\uc9c1\uc774\ub3c4\ub85d \uc0c8\ub86d\uac8c \uc124\uc815\ud560 x \uc88c\ud45c\uac12\uc744 \uacc4\uc0b0\ud558\uc5ec newX \ubcc0\uc218\uc5d0 \ud560\ub2f9\ud569\ub2c8\ub2e4. 6~8\ubc88 \ucf54\ub4dc\ub294 \uacc4\uc0b0\ud55c newX \ubcc0\uc218\ub97c \uc0ac\uac01\ud615\uc758 x \uc18d\uc131\uc5d0 \ud560\ub2f9\ud558\ub294 \uac83\uc73c\ub85c\uc368 \ub9cc\uc57d \uc0ac\uac01\ud615\uc774 \uce94\ubc84\uc2a4 \ubc16\uc73c\ub85c \ubc97\uc5b4\ub098\uc9c0 \uc54a\ub3c4\ub85d \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. 10\ubc88 \ucf54\ub4dc\ub294 \uc0c8\ub85c\uc6b4 \uc704\uce58\uc758 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\uae30\uc5d0 \uc55e\uc11c \ud654\uba74\uc744 \uc9c0\uc6b0\ub294 \ucf54\ub4dc\uc774\uace0 12\ubc88 \ucf54\ub4dc\ub294 \uc2e4\uc81c\ub85c \ud654\uba74\uc5d0 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\ub294 \ud568\uc218\uc758 \ud638\ucd9c\uc774\uba70, 14~16\ubc88\uc774 \ubc14\ub85c requestAnimFrame \ud568\uc218\ub97c \ud1b5\ud574 animate \ud568\uc218\ub97c \ud638\ucd9c\ud574 \uc8fc\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ucc98\ub7fc animate \ud568\uc218\uc758 \ud638\ucd9c\uc744 requestAnimFrame \ud568\uc218\ub97c \ud1b5\ud574 \ub4f1\ub85d\ud574 \ub193\uc73c\uba74 \uac00\uc7a5 \uc801\ud569\ud558\uace0 \ube60\ub978 \uc2dc\uc810\uc5d0 animate \ud568\uc218\ub97c \ud638\ucd9c\ud574\uc8fc\uac8c \ub429\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"HTML5\ub97c \uc9c0\uc6d0\ud558\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800 \uae30\ubc18\uc758 JavaScript\uc758 window \uac1d\uccb4\uc5d0\ub294 requestAnimationFrame \ud568\uc218\uac00 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ub354 \uc815\ud655\ud788\ub294, \uc774 \ud568\uc218\ub294 WebGL\uc758 \uc9c0\uc6d0\uacfc \ud568\uaed8 \uc81c\uacf5\ub429\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 \uc9c0\uc815\ub41c \uc5f0\uc0b0(\ud568\uc218)\uc758 \ud638\ucd9c\uc744 \ub2e4\ub978 \uc5f0\uc0b0\uc5d0 \ubc29\ud574\ub97c \uc8fc\uc9c0 \uc54a\uace0 \ucd5c\ub300\ud55c \ube68\ub9ac \ud638\ucd9c\ud574 \uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uc6f9GL\uc5d0\uc11c \uc774 \ud568\uc218\uc758 \uc6a9\ub3c4\ub97c \ucda9\ubd84\ud788 \uc9d0\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub124, \uc544\ub798\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc740 requestAnimationFrame \ud568\uc218\ub97c \uc0ac\uc6a9\ud55c \uc608\uc81c \uc785\ub2c8\ub2e4. \uc774 \uc608\uc81c\ub97c \ud1b5\ud574 requestAnimFrame \ud568\uc218\uc5d0 … <\/p>\n\ub354 \ubcf4\uae30 “HTML5\uc758 requestAnimationFrame \ud568\uc218”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-2237","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2237"}],"version-history":[{"count":2,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237\/revisions"}],"predecessor-version":[{"id":2732,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237\/revisions\/2732"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2237"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\ub2e4\uc74c\uc740 requestAnimationFrame \ud568\uc218\uac00 \uc544\uc9c1 \uc9c0\uc6d0\uc774 \ub418\uc9c0 \uc54a\uc744 \uacbd\uc6b0, \ub610\ub294 \ube0c\ub7ec\uc6b0\uc800 \ub9c8\ub2e4 \uc11c\ub85c \ub2e4\ub978 \uc774\ub984\uc73c\ub85c \ud568\uc218\ub85c \uc81c\uacf5\ub418\ub294 \ubb38\uc81c\uc5d0 \ub300\ud55c \ud574\ubc95\uc73c\ub85c \uc77c\uad04\uc801\uc73c\ub85c requestAnimFrame\uc774\ub77c\ub294 \ud568\uc218\ub85c \uc9c0\uc6d0\ub418\ub3c4\ub85d \ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\r\nwindow.requestAnimFrame = (function(callback) {\r\n return window.requestAnimationFrame || \r\n window.webkitRequestAnimationFrame || \r\n window.mozRequestAnimationFrame || \r\n window.oRequestAnimationFrame || \r\n window.msRequestAnimationFrame ||\r\n function(callback) { window.setTimeout(callback, 1000 \/ 60); };\r\n})();\r\n<\/pre>\n\uc704\uc758 \ucf54\ub4dc\ub97c \ubcf4\uba74 \ub9cc\uc57d \uc5b4\ub5a0\ud55c requestAnimationFrame \ud568\uc218\ub3c4 \uc9c0\uc6d0\ub418\uc9c0 \uc54a\uc744 \uacbd\uc6b0 1000\/60\ubc00\ub9ac\ucd08 \ud6c4\uc5d0 \ubc1c\uc0dd\ud558\ub294 Timer\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\ub2e4\uc74c\uc740 \uce94\ubc84\uc2a4\uc5d0 \uc0ac\uac01\ud615\uc744 \ub80c\ub354\ub9c1\ud558\uace0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc218\ud589\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n\r\nvar canvas = document.getElementById('myCanvas');\r\nvar context = canvas.getContext('2d');\r\n\r\nvar myRectangle = {\r\n x: 0,\r\n y: 75,\r\n width: 100,\r\n height: 50,\r\n borderWidth: 5\r\n};\r\n\r\ndrawRectangle(myRectangle, context);\r\n\r\nsetTimeout(function() {\r\n var startTime = (new Date()).getTime();\r\n animate(myRectangle, canvas, context, startTime);\r\n }, 2000);\r\n<\/pre>\n4\ubc88 \ucf54\ub4dc\uac00 \uce94\ubc84\uc2a4\uc5d0 \ub80c\ub354\ub9c1\ud560 \uc0ac\uac01\ud615\uc758 \uc2a4\ud399\uc785\ub2c8\ub2e4. 12\ubc88 \ucf54\ub4dc\ub97c \ud1b5\ud574 \uc774 \uc0ac\uac01\ud615\uc758 \uc2a4\ud399\ub300\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 14\ubc88 \ucf54\ub4dc\uc5d0\uc11c 2\ucd08 \ud6c4\uc5d0 animation \ud568\uc218\ub97c \ud638\ucd9c\ud558\uace0 \uc788\ub294\ub370\uc694. \ubc14\ub85c \uc774 animation \ud568\uc218\uac00 \uc2e4\uc81c requestAnimFrame \ud568\uc218\ub97c \uc774\uc6a9\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc218\ud589\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.<\/p>\ndrawRectangle \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\nfunction drawRectangle(rect, context) {\r\n context.beginPath();\r\n context.rect(rect.x, rect.y, rect.width, rect.height);\r\n context.fillStyle = '#8ED6FF';\r\n context.fill();\r\n context.lineWidth = rect.borderWidth;\r\n context.strokeStyle = 'black';\r\n context.stroke();\r\n}\r\n<\/pre>\n\uadf8\ub9ac\uace0 animation \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\nfunction animate(rect, canvas, context, startTime) {\r\n var time = (new Date()).getTime() - startTime;\r\n var linearSpeed = 100;\r\n var newX = linearSpeed * time \/ 1000;\r\n\r\n if(newX < canvas.width - rect.width - rect.borderWidth \/ 2) {\r\n rect.x = newX;\r\n }\r\n\r\n context.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n drawRectangle(rect, context);\r\n\r\n requestAnimFrame(function() {\r\n animate(rect, canvas, context, startTime);\r\n });\r\n}\r\n<\/pre>\n2~4\ubc88 \ucf54\ub4dc\ub294 \uc0ac\uac01\ud615\ub97c \uc6c0\uc9c1\uc774\ub3c4\ub85d \uc0c8\ub86d\uac8c \uc124\uc815\ud560 x \uc88c\ud45c\uac12\uc744 \uacc4\uc0b0\ud558\uc5ec newX \ubcc0\uc218\uc5d0 \ud560\ub2f9\ud569\ub2c8\ub2e4. 6~8\ubc88 \ucf54\ub4dc\ub294 \uacc4\uc0b0\ud55c newX \ubcc0\uc218\ub97c \uc0ac\uac01\ud615\uc758 x \uc18d\uc131\uc5d0 \ud560\ub2f9\ud558\ub294 \uac83\uc73c\ub85c\uc368 \ub9cc\uc57d \uc0ac\uac01\ud615\uc774 \uce94\ubc84\uc2a4 \ubc16\uc73c\ub85c \ubc97\uc5b4\ub098\uc9c0 \uc54a\ub3c4\ub85d \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. 10\ubc88 \ucf54\ub4dc\ub294 \uc0c8\ub85c\uc6b4 \uc704\uce58\uc758 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\uae30\uc5d0 \uc55e\uc11c \ud654\uba74\uc744 \uc9c0\uc6b0\ub294 \ucf54\ub4dc\uc774\uace0 12\ubc88 \ucf54\ub4dc\ub294 \uc2e4\uc81c\ub85c \ud654\uba74\uc5d0 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\ub294 \ud568\uc218\uc758 \ud638\ucd9c\uc774\uba70, 14~16\ubc88\uc774 \ubc14\ub85c requestAnimFrame \ud568\uc218\ub97c \ud1b5\ud574 animate \ud568\uc218\ub97c \ud638\ucd9c\ud574 \uc8fc\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ucc98\ub7fc animate \ud568\uc218\uc758 \ud638\ucd9c\uc744 requestAnimFrame \ud568\uc218\ub97c \ud1b5\ud574 \ub4f1\ub85d\ud574 \ub193\uc73c\uba74 \uac00\uc7a5 \uc801\ud569\ud558\uace0 \ube60\ub978 \uc2dc\uc810\uc5d0 animate \ud568\uc218\ub97c \ud638\ucd9c\ud574\uc8fc\uac8c \ub429\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"HTML5\ub97c \uc9c0\uc6d0\ud558\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800 \uae30\ubc18\uc758 JavaScript\uc758 window \uac1d\uccb4\uc5d0\ub294 requestAnimationFrame \ud568\uc218\uac00 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ub354 \uc815\ud655\ud788\ub294, \uc774 \ud568\uc218\ub294 WebGL\uc758 \uc9c0\uc6d0\uacfc \ud568\uaed8 \uc81c\uacf5\ub429\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 \uc9c0\uc815\ub41c \uc5f0\uc0b0(\ud568\uc218)\uc758 \ud638\ucd9c\uc744 \ub2e4\ub978 \uc5f0\uc0b0\uc5d0 \ubc29\ud574\ub97c \uc8fc\uc9c0 \uc54a\uace0 \ucd5c\ub300\ud55c \ube68\ub9ac \ud638\ucd9c\ud574 \uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uc6f9GL\uc5d0\uc11c \uc774 \ud568\uc218\uc758 \uc6a9\ub3c4\ub97c \ucda9\ubd84\ud788 \uc9d0\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub124, \uc544\ub798\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc740 requestAnimationFrame \ud568\uc218\ub97c \uc0ac\uc6a9\ud55c \uc608\uc81c \uc785\ub2c8\ub2e4. \uc774 \uc608\uc81c\ub97c \ud1b5\ud574 requestAnimFrame \ud568\uc218\uc5d0 … <\/p>\n\ub354 \ubcf4\uae30 “HTML5\uc758 requestAnimationFrame \ud568\uc218”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-2237","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2237"}],"version-history":[{"count":2,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237\/revisions"}],"predecessor-version":[{"id":2732,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237\/revisions\/2732"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2237"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\uc704\uc758 \ucf54\ub4dc\ub97c \ubcf4\uba74 \ub9cc\uc57d \uc5b4\ub5a0\ud55c requestAnimationFrame \ud568\uc218\ub3c4 \uc9c0\uc6d0\ub418\uc9c0 \uc54a\uc744 \uacbd\uc6b0 1000\/60\ubc00\ub9ac\ucd08 \ud6c4\uc5d0 \ubc1c\uc0dd\ud558\ub294 Timer\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub2e4\uc74c\uc740 \uce94\ubc84\uc2a4\uc5d0 \uc0ac\uac01\ud615\uc744 \ub80c\ub354\ub9c1\ud558\uace0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc218\ud589\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\r\nvar canvas = document.getElementById('myCanvas');\r\nvar context = canvas.getContext('2d');\r\n\r\nvar myRectangle = {\r\n x: 0,\r\n y: 75,\r\n width: 100,\r\n height: 50,\r\n borderWidth: 5\r\n};\r\n\r\ndrawRectangle(myRectangle, context);\r\n\r\nsetTimeout(function() {\r\n var startTime = (new Date()).getTime();\r\n animate(myRectangle, canvas, context, startTime);\r\n }, 2000);\r\n<\/pre>\n4\ubc88 \ucf54\ub4dc\uac00 \uce94\ubc84\uc2a4\uc5d0 \ub80c\ub354\ub9c1\ud560 \uc0ac\uac01\ud615\uc758 \uc2a4\ud399\uc785\ub2c8\ub2e4. 12\ubc88 \ucf54\ub4dc\ub97c \ud1b5\ud574 \uc774 \uc0ac\uac01\ud615\uc758 \uc2a4\ud399\ub300\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 14\ubc88 \ucf54\ub4dc\uc5d0\uc11c 2\ucd08 \ud6c4\uc5d0 animation \ud568\uc218\ub97c \ud638\ucd9c\ud558\uace0 \uc788\ub294\ub370\uc694. \ubc14\ub85c \uc774 animation \ud568\uc218\uac00 \uc2e4\uc81c requestAnimFrame \ud568\uc218\ub97c \uc774\uc6a9\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc218\ud589\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.<\/p>\ndrawRectangle \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\nfunction drawRectangle(rect, context) {\r\n context.beginPath();\r\n context.rect(rect.x, rect.y, rect.width, rect.height);\r\n context.fillStyle = '#8ED6FF';\r\n context.fill();\r\n context.lineWidth = rect.borderWidth;\r\n context.strokeStyle = 'black';\r\n context.stroke();\r\n}\r\n<\/pre>\n\uadf8\ub9ac\uace0 animation \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\nfunction animate(rect, canvas, context, startTime) {\r\n var time = (new Date()).getTime() - startTime;\r\n var linearSpeed = 100;\r\n var newX = linearSpeed * time \/ 1000;\r\n\r\n if(newX < canvas.width - rect.width - rect.borderWidth \/ 2) {\r\n rect.x = newX;\r\n }\r\n\r\n context.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n drawRectangle(rect, context);\r\n\r\n requestAnimFrame(function() {\r\n animate(rect, canvas, context, startTime);\r\n });\r\n}\r\n<\/pre>\n2~4\ubc88 \ucf54\ub4dc\ub294 \uc0ac\uac01\ud615\ub97c \uc6c0\uc9c1\uc774\ub3c4\ub85d \uc0c8\ub86d\uac8c \uc124\uc815\ud560 x \uc88c\ud45c\uac12\uc744 \uacc4\uc0b0\ud558\uc5ec newX \ubcc0\uc218\uc5d0 \ud560\ub2f9\ud569\ub2c8\ub2e4. 6~8\ubc88 \ucf54\ub4dc\ub294 \uacc4\uc0b0\ud55c newX \ubcc0\uc218\ub97c \uc0ac\uac01\ud615\uc758 x \uc18d\uc131\uc5d0 \ud560\ub2f9\ud558\ub294 \uac83\uc73c\ub85c\uc368 \ub9cc\uc57d \uc0ac\uac01\ud615\uc774 \uce94\ubc84\uc2a4 \ubc16\uc73c\ub85c \ubc97\uc5b4\ub098\uc9c0 \uc54a\ub3c4\ub85d \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. 10\ubc88 \ucf54\ub4dc\ub294 \uc0c8\ub85c\uc6b4 \uc704\uce58\uc758 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\uae30\uc5d0 \uc55e\uc11c \ud654\uba74\uc744 \uc9c0\uc6b0\ub294 \ucf54\ub4dc\uc774\uace0 12\ubc88 \ucf54\ub4dc\ub294 \uc2e4\uc81c\ub85c \ud654\uba74\uc5d0 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\ub294 \ud568\uc218\uc758 \ud638\ucd9c\uc774\uba70, 14~16\ubc88\uc774 \ubc14\ub85c requestAnimFrame \ud568\uc218\ub97c \ud1b5\ud574 animate \ud568\uc218\ub97c \ud638\ucd9c\ud574 \uc8fc\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ucc98\ub7fc animate \ud568\uc218\uc758 \ud638\ucd9c\uc744 requestAnimFrame \ud568\uc218\ub97c \ud1b5\ud574 \ub4f1\ub85d\ud574 \ub193\uc73c\uba74 \uac00\uc7a5 \uc801\ud569\ud558\uace0 \ube60\ub978 \uc2dc\uc810\uc5d0 animate \ud568\uc218\ub97c \ud638\ucd9c\ud574\uc8fc\uac8c \ub429\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"HTML5\ub97c \uc9c0\uc6d0\ud558\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800 \uae30\ubc18\uc758 JavaScript\uc758 window \uac1d\uccb4\uc5d0\ub294 requestAnimationFrame \ud568\uc218\uac00 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ub354 \uc815\ud655\ud788\ub294, \uc774 \ud568\uc218\ub294 WebGL\uc758 \uc9c0\uc6d0\uacfc \ud568\uaed8 \uc81c\uacf5\ub429\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 \uc9c0\uc815\ub41c \uc5f0\uc0b0(\ud568\uc218)\uc758 \ud638\ucd9c\uc744 \ub2e4\ub978 \uc5f0\uc0b0\uc5d0 \ubc29\ud574\ub97c \uc8fc\uc9c0 \uc54a\uace0 \ucd5c\ub300\ud55c \ube68\ub9ac \ud638\ucd9c\ud574 \uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uc6f9GL\uc5d0\uc11c \uc774 \ud568\uc218\uc758 \uc6a9\ub3c4\ub97c \ucda9\ubd84\ud788 \uc9d0\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub124, \uc544\ub798\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc740 requestAnimationFrame \ud568\uc218\ub97c \uc0ac\uc6a9\ud55c \uc608\uc81c \uc785\ub2c8\ub2e4. \uc774 \uc608\uc81c\ub97c \ud1b5\ud574 requestAnimFrame \ud568\uc218\uc5d0 … <\/p>\n\ub354 \ubcf4\uae30 “HTML5\uc758 requestAnimationFrame \ud568\uc218”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-2237","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2237"}],"version-history":[{"count":2,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237\/revisions"}],"predecessor-version":[{"id":2732,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237\/revisions\/2732"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2237"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
4\ubc88 \ucf54\ub4dc\uac00 \uce94\ubc84\uc2a4\uc5d0 \ub80c\ub354\ub9c1\ud560 \uc0ac\uac01\ud615\uc758 \uc2a4\ud399\uc785\ub2c8\ub2e4. 12\ubc88 \ucf54\ub4dc\ub97c \ud1b5\ud574 \uc774 \uc0ac\uac01\ud615\uc758 \uc2a4\ud399\ub300\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 14\ubc88 \ucf54\ub4dc\uc5d0\uc11c 2\ucd08 \ud6c4\uc5d0 animation \ud568\uc218\ub97c \ud638\ucd9c\ud558\uace0 \uc788\ub294\ub370\uc694. \ubc14\ub85c \uc774 animation \ud568\uc218\uac00 \uc2e4\uc81c requestAnimFrame \ud568\uc218\ub97c \uc774\uc6a9\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc218\ud589\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.<\/p>\n
drawRectangle \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nfunction drawRectangle(rect, context) {\r\n context.beginPath();\r\n context.rect(rect.x, rect.y, rect.width, rect.height);\r\n context.fillStyle = '#8ED6FF';\r\n context.fill();\r\n context.lineWidth = rect.borderWidth;\r\n context.strokeStyle = 'black';\r\n context.stroke();\r\n}\r\n<\/pre>\n\uadf8\ub9ac\uace0 animation \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\nfunction animate(rect, canvas, context, startTime) {\r\n var time = (new Date()).getTime() - startTime;\r\n var linearSpeed = 100;\r\n var newX = linearSpeed * time \/ 1000;\r\n\r\n if(newX < canvas.width - rect.width - rect.borderWidth \/ 2) {\r\n rect.x = newX;\r\n }\r\n\r\n context.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n drawRectangle(rect, context);\r\n\r\n requestAnimFrame(function() {\r\n animate(rect, canvas, context, startTime);\r\n });\r\n}\r\n<\/pre>\n2~4\ubc88 \ucf54\ub4dc\ub294 \uc0ac\uac01\ud615\ub97c \uc6c0\uc9c1\uc774\ub3c4\ub85d \uc0c8\ub86d\uac8c \uc124\uc815\ud560 x \uc88c\ud45c\uac12\uc744 \uacc4\uc0b0\ud558\uc5ec newX \ubcc0\uc218\uc5d0 \ud560\ub2f9\ud569\ub2c8\ub2e4. 6~8\ubc88 \ucf54\ub4dc\ub294 \uacc4\uc0b0\ud55c newX \ubcc0\uc218\ub97c \uc0ac\uac01\ud615\uc758 x \uc18d\uc131\uc5d0 \ud560\ub2f9\ud558\ub294 \uac83\uc73c\ub85c\uc368 \ub9cc\uc57d \uc0ac\uac01\ud615\uc774 \uce94\ubc84\uc2a4 \ubc16\uc73c\ub85c \ubc97\uc5b4\ub098\uc9c0 \uc54a\ub3c4\ub85d \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. 10\ubc88 \ucf54\ub4dc\ub294 \uc0c8\ub85c\uc6b4 \uc704\uce58\uc758 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\uae30\uc5d0 \uc55e\uc11c \ud654\uba74\uc744 \uc9c0\uc6b0\ub294 \ucf54\ub4dc\uc774\uace0 12\ubc88 \ucf54\ub4dc\ub294 \uc2e4\uc81c\ub85c \ud654\uba74\uc5d0 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\ub294 \ud568\uc218\uc758 \ud638\ucd9c\uc774\uba70, 14~16\ubc88\uc774 \ubc14\ub85c requestAnimFrame \ud568\uc218\ub97c \ud1b5\ud574 animate \ud568\uc218\ub97c \ud638\ucd9c\ud574 \uc8fc\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ucc98\ub7fc animate \ud568\uc218\uc758 \ud638\ucd9c\uc744 requestAnimFrame \ud568\uc218\ub97c \ud1b5\ud574 \ub4f1\ub85d\ud574 \ub193\uc73c\uba74 \uac00\uc7a5 \uc801\ud569\ud558\uace0 \ube60\ub978 \uc2dc\uc810\uc5d0 animate \ud568\uc218\ub97c \ud638\ucd9c\ud574\uc8fc\uac8c \ub429\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"HTML5\ub97c \uc9c0\uc6d0\ud558\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800 \uae30\ubc18\uc758 JavaScript\uc758 window \uac1d\uccb4\uc5d0\ub294 requestAnimationFrame \ud568\uc218\uac00 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ub354 \uc815\ud655\ud788\ub294, \uc774 \ud568\uc218\ub294 WebGL\uc758 \uc9c0\uc6d0\uacfc \ud568\uaed8 \uc81c\uacf5\ub429\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 \uc9c0\uc815\ub41c \uc5f0\uc0b0(\ud568\uc218)\uc758 \ud638\ucd9c\uc744 \ub2e4\ub978 \uc5f0\uc0b0\uc5d0 \ubc29\ud574\ub97c \uc8fc\uc9c0 \uc54a\uace0 \ucd5c\ub300\ud55c \ube68\ub9ac \ud638\ucd9c\ud574 \uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uc6f9GL\uc5d0\uc11c \uc774 \ud568\uc218\uc758 \uc6a9\ub3c4\ub97c \ucda9\ubd84\ud788 \uc9d0\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub124, \uc544\ub798\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc740 requestAnimationFrame \ud568\uc218\ub97c \uc0ac\uc6a9\ud55c \uc608\uc81c \uc785\ub2c8\ub2e4. \uc774 \uc608\uc81c\ub97c \ud1b5\ud574 requestAnimFrame \ud568\uc218\uc5d0 … <\/p>\n\ub354 \ubcf4\uae30 “HTML5\uc758 requestAnimationFrame \ud568\uc218”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-2237","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2237"}],"version-history":[{"count":2,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237\/revisions"}],"predecessor-version":[{"id":2732,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237\/revisions\/2732"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2237"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\uadf8\ub9ac\uace0 animation \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nfunction animate(rect, canvas, context, startTime) {\r\n var time = (new Date()).getTime() - startTime;\r\n var linearSpeed = 100;\r\n var newX = linearSpeed * time \/ 1000;\r\n\r\n if(newX < canvas.width - rect.width - rect.borderWidth \/ 2) {\r\n rect.x = newX;\r\n }\r\n\r\n context.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n drawRectangle(rect, context);\r\n\r\n requestAnimFrame(function() {\r\n animate(rect, canvas, context, startTime);\r\n });\r\n}\r\n<\/pre>\n2~4\ubc88 \ucf54\ub4dc\ub294 \uc0ac\uac01\ud615\ub97c \uc6c0\uc9c1\uc774\ub3c4\ub85d \uc0c8\ub86d\uac8c \uc124\uc815\ud560 x \uc88c\ud45c\uac12\uc744 \uacc4\uc0b0\ud558\uc5ec newX \ubcc0\uc218\uc5d0 \ud560\ub2f9\ud569\ub2c8\ub2e4. 6~8\ubc88 \ucf54\ub4dc\ub294 \uacc4\uc0b0\ud55c newX \ubcc0\uc218\ub97c \uc0ac\uac01\ud615\uc758 x \uc18d\uc131\uc5d0 \ud560\ub2f9\ud558\ub294 \uac83\uc73c\ub85c\uc368 \ub9cc\uc57d \uc0ac\uac01\ud615\uc774 \uce94\ubc84\uc2a4 \ubc16\uc73c\ub85c \ubc97\uc5b4\ub098\uc9c0 \uc54a\ub3c4\ub85d \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. 10\ubc88 \ucf54\ub4dc\ub294 \uc0c8\ub85c\uc6b4 \uc704\uce58\uc758 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\uae30\uc5d0 \uc55e\uc11c \ud654\uba74\uc744 \uc9c0\uc6b0\ub294 \ucf54\ub4dc\uc774\uace0 12\ubc88 \ucf54\ub4dc\ub294 \uc2e4\uc81c\ub85c \ud654\uba74\uc5d0 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\ub294 \ud568\uc218\uc758 \ud638\ucd9c\uc774\uba70, 14~16\ubc88\uc774 \ubc14\ub85c requestAnimFrame \ud568\uc218\ub97c \ud1b5\ud574 animate \ud568\uc218\ub97c \ud638\ucd9c\ud574 \uc8fc\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ucc98\ub7fc animate \ud568\uc218\uc758 \ud638\ucd9c\uc744 requestAnimFrame \ud568\uc218\ub97c \ud1b5\ud574 \ub4f1\ub85d\ud574 \ub193\uc73c\uba74 \uac00\uc7a5 \uc801\ud569\ud558\uace0 \ube60\ub978 \uc2dc\uc810\uc5d0 animate \ud568\uc218\ub97c \ud638\ucd9c\ud574\uc8fc\uac8c \ub429\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"HTML5\ub97c \uc9c0\uc6d0\ud558\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800 \uae30\ubc18\uc758 JavaScript\uc758 window \uac1d\uccb4\uc5d0\ub294 requestAnimationFrame \ud568\uc218\uac00 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ub354 \uc815\ud655\ud788\ub294, \uc774 \ud568\uc218\ub294 WebGL\uc758 \uc9c0\uc6d0\uacfc \ud568\uaed8 \uc81c\uacf5\ub429\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 \uc9c0\uc815\ub41c \uc5f0\uc0b0(\ud568\uc218)\uc758 \ud638\ucd9c\uc744 \ub2e4\ub978 \uc5f0\uc0b0\uc5d0 \ubc29\ud574\ub97c \uc8fc\uc9c0 \uc54a\uace0 \ucd5c\ub300\ud55c \ube68\ub9ac \ud638\ucd9c\ud574 \uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uc6f9GL\uc5d0\uc11c \uc774 \ud568\uc218\uc758 \uc6a9\ub3c4\ub97c \ucda9\ubd84\ud788 \uc9d0\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub124, \uc544\ub798\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc740 requestAnimationFrame \ud568\uc218\ub97c \uc0ac\uc6a9\ud55c \uc608\uc81c \uc785\ub2c8\ub2e4. \uc774 \uc608\uc81c\ub97c \ud1b5\ud574 requestAnimFrame \ud568\uc218\uc5d0 … <\/p>\n\ub354 \ubcf4\uae30 “HTML5\uc758 requestAnimationFrame \ud568\uc218”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-2237","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2237"}],"version-history":[{"count":2,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237\/revisions"}],"predecessor-version":[{"id":2732,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237\/revisions\/2732"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2237"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
2~4\ubc88 \ucf54\ub4dc\ub294 \uc0ac\uac01\ud615\ub97c \uc6c0\uc9c1\uc774\ub3c4\ub85d \uc0c8\ub86d\uac8c \uc124\uc815\ud560 x \uc88c\ud45c\uac12\uc744 \uacc4\uc0b0\ud558\uc5ec newX \ubcc0\uc218\uc5d0 \ud560\ub2f9\ud569\ub2c8\ub2e4. 6~8\ubc88 \ucf54\ub4dc\ub294 \uacc4\uc0b0\ud55c newX \ubcc0\uc218\ub97c \uc0ac\uac01\ud615\uc758 x \uc18d\uc131\uc5d0 \ud560\ub2f9\ud558\ub294 \uac83\uc73c\ub85c\uc368 \ub9cc\uc57d \uc0ac\uac01\ud615\uc774 \uce94\ubc84\uc2a4 \ubc16\uc73c\ub85c \ubc97\uc5b4\ub098\uc9c0 \uc54a\ub3c4\ub85d \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. 10\ubc88 \ucf54\ub4dc\ub294 \uc0c8\ub85c\uc6b4 \uc704\uce58\uc758 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\uae30\uc5d0 \uc55e\uc11c \ud654\uba74\uc744 \uc9c0\uc6b0\ub294 \ucf54\ub4dc\uc774\uace0 12\ubc88 \ucf54\ub4dc\ub294 \uc2e4\uc81c\ub85c \ud654\uba74\uc5d0 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\ub294 \ud568\uc218\uc758 \ud638\ucd9c\uc774\uba70, 14~16\ubc88\uc774 \ubc14\ub85c requestAnimFrame \ud568\uc218\ub97c \ud1b5\ud574 animate \ud568\uc218\ub97c \ud638\ucd9c\ud574 \uc8fc\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ucc98\ub7fc animate \ud568\uc218\uc758 \ud638\ucd9c\uc744 requestAnimFrame \ud568\uc218\ub97c \ud1b5\ud574 \ub4f1\ub85d\ud574 \ub193\uc73c\uba74 \uac00\uc7a5 \uc801\ud569\ud558\uace0 \ube60\ub978 \uc2dc\uc810\uc5d0 animate \ud568\uc218\ub97c \ud638\ucd9c\ud574\uc8fc\uac8c \ub429\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
HTML5\ub97c \uc9c0\uc6d0\ud558\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800 \uae30\ubc18\uc758 JavaScript\uc758 window \uac1d\uccb4\uc5d0\ub294 requestAnimationFrame \ud568\uc218\uac00 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ub354 \uc815\ud655\ud788\ub294, \uc774 \ud568\uc218\ub294 WebGL\uc758 \uc9c0\uc6d0\uacfc \ud568\uaed8 \uc81c\uacf5\ub429\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 \uc9c0\uc815\ub41c \uc5f0\uc0b0(\ud568\uc218)\uc758 \ud638\ucd9c\uc744 \ub2e4\ub978 \uc5f0\uc0b0\uc5d0 \ubc29\ud574\ub97c \uc8fc\uc9c0 \uc54a\uace0 \ucd5c\ub300\ud55c \ube68\ub9ac \ud638\ucd9c\ud574 \uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uc6f9GL\uc5d0\uc11c \uc774 \ud568\uc218\uc758 \uc6a9\ub3c4\ub97c \ucda9\ubd84\ud788 \uc9d0\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub124, \uc544\ub798\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc740 requestAnimationFrame \ud568\uc218\ub97c \uc0ac\uc6a9\ud55c \uc608\uc81c \uc785\ub2c8\ub2e4. \uc774 \uc608\uc81c\ub97c \ud1b5\ud574 requestAnimFrame \ud568\uc218\uc5d0 … <\/p>\n
\ub354 \ubcf4\uae30 “HTML5\uc758 requestAnimationFrame \ud568\uc218”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-2237","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2237"}],"version-history":[{"count":2,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237\/revisions"}],"predecessor-version":[{"id":2732,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2237\/revisions\/2732"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2237"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}