티스토리 뷰
Syntax
window.requestAnimationFrame(callback);
Parameters
callback
- A parameter specifying a function to call when it's time to update your animation for the next repaint. The callback has one single argument, a
DOMHighResTimeStamp
, which indicates the current time (the time returned from window.performance.now() ) for when requestAnimationFrame starts to fire callbacks.
Return value
A long
integer value, the request id, that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value. You can pass this value towindow.cancelAnimationFrame()
to cancel the refresh callback request.
기본적인 setInterval()과 비슷한 함수 입니다. 함수 호출은 밀리세컨드 단위로 호출됩니다.
인자로 함수를 받으며 방법은 아래와 같습니다.
추가 : callback 함수를 실행할때 timestamp 인자를 사용할 수 있습니다.
Source
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE HTML> <html> <head> <meta charset= "utf-8" > <script type= "text/javascript" src= "/_include/Lib/jquery/jquery-2.1.4.min.js" ></script> <style> html, body {height:100%; width:100%; padding:0px; margin:0px;} #move {display:inline-block; position:relative; background-color:red; width:100px; height:100px;} </style> <script> window.onload = init(); var start = null ; var element = null ; function init(){ window.requestAnimationFrame(step); } function step( timestamp ) { element = document.getElementById( "move" ); if (!start) start = timestamp; var progress = timestamp - start; if ( progress > 2000 ){ start = timestamp; } element.style.left = Math.min(progress/10, 200) + "px" ; window.requestAnimationFrame(step); } </script> </head> <body> <span id= "move" >aa</span> </body> </html> |
Demo
'Develop > canvas' 카테고리의 다른 글
34. requestAnimationFrame() - setInterval()과 동일 (0) | 2015.08.10 |
---|---|
33 .clip() - 잘라내기 (0) | 2015.08.10 |
32. globalCompositeOperation - 색상 블렌딩모드 (합성) (0) | 2015.08.10 |
31. measureText() - 글자의 넓이 반환 (0) | 2015.08.10 |
30. strokeText() - 라인으로 글쓰기 (0) | 2015.08.10 |
29. fillText() - 글자그리기 (0) | 2015.08.10 |
- TAG
- Canvas, HTML5, JavaScript, requestAnimationFrame, setInterval, 자바스크립트, 캔버스
댓글
공지사항
최근에 달린 댓글
- Total
- 56,251
- Today
- 11
- Yesterday
- 49
링크
TAG
- Symfony
- 텍스트
- 곡선
- translate
- 글
- Fill
- rect
- 심포니
- GitLab
- 도형그리기
- stroke()
- 배경색
- 베지어
- HTML5
- JavaScript
- fillText
- Canvas
- 글자
- strokeText
- measureText
- 라즈베리파이
- arc()
- Round
- 캔버스
- save
- virtualhost
- 글쓰기
- 자바스크립트
- Bezier
- 튜토리얼