{"id":2278,"date":"2015-11-06T11:22:15","date_gmt":"2015-11-06T11:22:15","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=2278"},"modified":"2017-01-26T22:32:18","modified_gmt":"2017-01-26T13:32:18","slug":"%ec%9b%b9-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98-33-%e3%85%a1-requestanimationframe-%ed%99%9c%ec%9a%a9-%eb%b0%a9%ec%8b%9d","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=2278","title":{"rendered":"\uc6f9 \uc560\ub2c8\uba54\uc774\uc158 3\/3 \u3161 requestAnimationFrame \ud65c\uc6a9 \ubc29\uc2dd"},"content":{"rendered":"<p>\uc6f9\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\ub294 \uc138\ubc88\uc9f8 \ubc29\uc2dd\uc740 javascript \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud574 \uc560\ub2c8\uba54\uc774\uc158\ub420 \uac1d\uccb4\uc758 \uc18d\uc131\uc758 \ubcc0\uacbd\ud558\ub294 \uac83\uc73c\ub85c\uc368 requestAnimationFrame API\ub97c \uc774\uc6a9\ud574 \uc18d\ub3c4\ub97c \ud5a5\uc0c1\uc2dc\ud0a4\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4. requestAnimationFrame API\uac00 \uc81c\uacf5\ub418\uae30 \uc774\uc804\uc5d0\ub294 \ud0c0\uc774\uba38\ub97c \uc0ac\uc6a9\ud558\uc600\uc73c\ub098, \uc774 \ud0c0\uc774\uba38\ub294 \ubd88\ud655\uc2e4\ud558\uace0 \ub290\ub9ac\ub2e4\ub294 \ub2e8\uc810\uc774 \uc788\uc5b4 \ud604\uc7ac\ub294 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. (\uc544.. \ud55c\uac8c\uc784 \ud558\uace0 \uc654\ub354\ub2c8 \uba38\ub9ac\uac00 \ub775&#8230; \ud558\ub124.. @_@;) \uc544\ub798\ub294 \uc774 requestAnimationFrame \ud568\uc218\ub97c \uc774\uc6a9\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc5d0 \ub300\ud55c \uc608\uc785\ub2c8\ub2e4.<\/p>\n<p>[xyz-ihs snippet=&#8221;requestAnimation&#8221;]<\/p>\n<p>SVG\ub97c \uc0ac\uc6a9\ud588\uace0 path\ub97c \uc774\uc6a9\ud574 \ub3c4\ud615\uc744 \uad6c\uc131\ud558\uc600\uc2b5\ub2c8\ub2e4. \ub3c4\ud615\uc758 \uc120\ud615 \ub300\uc26c \uc2a4\ud0c0\uc77c\uc778 strokeDashOffset \uc18d\uc131\uc744 \uc8fc\uae30\uc801\uc73c\ub85c \ubcc0\uacbd\ud568\uc73c\ub85c\uc368 \ub9e4\uce58 \ud589\uad70\ud558\ub294 \ubc8c\ub808 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uc608\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub97c \uc0b4\ud3b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uba3c\uc800 svg\uc640 \ub3c4\ud615\uc5d0 \ub300\ud55c path \uc815\uc758\uc785\ub2c8\ub2e4.<\/p>\n<pre>\r\n<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 100 30'>\r\n    <path class='chain_st'\r\n        stroke-dasharray='2.6 2.45'\r\n        d='M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 \r\n           H80 C89 26.5 89 13.5 80.8 13.5z' \/>\r\n<\/svg>\r\n<\/pre>\n<p>path\uc5d0 chain_st\ub77c\ub294 \ud074\ub798\uc2a4\uac00 \uc9c0\uc815\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. chain_st \ud074\ub798\uc2a4\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre>\r\n.chain_st {\r\n    stroke-width: 1;\r\n    stroke: #f00;\r\nfill: transparent;\r\n}     \r\n\r\nsvg {\r\n    width:100%;\r\n} \r\n<\/pre>\n<p>\ub2e8\uc21c\ud788 path\uc758 \uc120\uad75\uae30\uacfc \uc0c9\uc0c1, \uadf8\ub9ac\uace0 \ucc44\uc6c0\uc0c9\uc740 \ud22c\uba85\uc73c\ub85c \uc9c0\uc815\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ub367\ubd99\uc5ec svg\uc758 \ud3ed\uc744 \ud604\uc81c \ubd80\ubaa8 \ub108\ube44\ub97c \uaf49 \ucc44\uc6b0\ub3c4\ub85d 7~9\ubc88 \ucf54\ub4dc\uc5d0\uc11c \uc9c0\uc815\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774\uc81c \uc560\ub2c8\uba54\uc774\uc158 \ucf54\ub4dc\uc778\ub370, \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre>\r\nvar p = document.querySelector('.chain_st'),\r\noffset = 5;\r\n\r\nvar offsetMe = function () {\r\n    if (offset < 0) offset = 5;\r\n    p.style.strokeDashoffset = offset;\r\n    offset--;\r\n\r\n    requestAnimationFrame(offsetMe);\r\n}\r\n\r\noffsetMe();\r\n<\/pre>\n<p>offsetMe \ud568\uc218\ub97c \ud638\ucd9c\ud560\ub54c\ub9c8\ub2e4 strokeDashOffset\uc758 \uac12\uc744 \ubcc0\uacbd\ud558\uace0 \uc788\ub294 6\ubc88 \ucf54\ub4dc\ub97c \uc8fc\ubaa9\ud558\uae30 \ubc14\ub78d\ub2c8\ub2e4. \uc774 offsetMe \ud568\uc218\ub294 requestAnimationFrame API\ub97c \ud1b5\ud574 \uc8fc\uae30\uc801\uc73c\ub85c \ud638\ucd9c\ub429\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc6f9\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\ub294 \uc138\ubc88\uc9f8 \ubc29\uc2dd\uc740 javascript \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud574 \uc560\ub2c8\uba54\uc774\uc158\ub420 \uac1d\uccb4\uc758 \uc18d\uc131\uc758 \ubcc0\uacbd\ud558\ub294 \uac83\uc73c\ub85c\uc368 requestAnimationFrame API\ub97c \uc774\uc6a9\ud574 \uc18d\ub3c4\ub97c \ud5a5\uc0c1\uc2dc\ud0a4\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4. requestAnimationFrame API\uac00 \uc81c\uacf5\ub418\uae30 \uc774\uc804\uc5d0\ub294 \ud0c0\uc774\uba38\ub97c \uc0ac\uc6a9\ud558\uc600\uc73c\ub098, \uc774 \ud0c0\uc774\uba38\ub294 \ubd88\ud655\uc2e4\ud558\uace0 \ub290\ub9ac\ub2e4\ub294 \ub2e8\uc810\uc774 \uc788\uc5b4 \ud604\uc7ac\ub294 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. (\uc544.. \ud55c\uac8c\uc784 \ud558\uace0 \uc654\ub354\ub2c8 \uba38\ub9ac\uac00 \ub775&#8230; \ud558\ub124.. @_@;) \uc544\ub798\ub294 \uc774 requestAnimationFrame \ud568\uc218\ub97c \uc774\uc6a9\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc5d0 \ub300\ud55c \uc608\uc785\ub2c8\ub2e4. [xyz-ihs snippet=&#8221;requestAnimation&#8221;] SVG\ub97c \uc0ac\uc6a9\ud588\uace0 path\ub97c &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=2278\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;\uc6f9 \uc560\ub2c8\uba54\uc774\uc158 3\/3 \u3161 requestAnimationFrame \ud65c\uc6a9 \ubc29\uc2dd&#8221;<\/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-2278","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\/2278","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=2278"}],"version-history":[{"count":2,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2278\/revisions"}],"predecessor-version":[{"id":2712,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2278\/revisions\/2712"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2278"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}